The World is moving towards a faster web and that’s what endorsed by Google too ! Site page load time will always be a factor in SEO.
When it comes to load time of a WordPress blog, you may think of few plugins that would help you reduce your site load time. But NO, its not about only plugins ! There are a lot of tweaks that you have to apply in order to get your site load speedily.
I have broken down the process into 6 proven steps that would surely reduce the load time of your WordPress blog.
Step 1: Use these Plugins on your WordPress blog
W3 Super Cache
W3 Super Cache plugin caches and compresses the pages of your blog so that they can be served quickly on demand. Now, Make sure that you enable following settings in the advanced mode after installing the plugin:
Async JS and CSS
This type of loading blocks the page until an external resource (A Script or CSS File) loads completely. To avoid this, we have to use asynchronous loading which can be easily achieved using the Async JS and CSS Plugin. Thus by using asynchronous loading, the content on the page will be displayed first and the scripts will be loaded in parallel without blocking the page.
Step 2: Tweak your .htaccess file
.htaccess file is located in your web hosting directory with which you can add / remove miscellaneous features to your site. Log in to your Web Hosting account > go to File Manager (Make sure you tick the below settings)
We will edit the .htaccess file for adding compression functionality to files and setting expiry dates for web page resources. By Adding compression functionality, the images, scripts, fonts, and text will be compressed before sending to the client(visitor) resulting in reduced size of the page.
There may be common files used on every page of your WordPress blog such as for example your profile picture in the sidebar. If somehow we can store the picture locally into the visitor browser, there will be no need to download the image again every time the visitor navigates to other pages of your blog. This can be done by enabling expirations.
To implement both the aforementioned features, you just have to edit your .htaccess file and add the code following the below image:
# Enable expirations
# Default directive
ExpiresDefault “access plus 1 day”
# My favicon
ExpiresByType image/x-icon “access plus 1 week”
ExpiresByType image/gif “access plus 1 week”
ExpiresByType image/png “access plus 1 week”
ExpiresByType image/jpg “access plus 1 week”
ExpiresByType image/jpeg “access plus 1 week”
ExpiresByType text/css “access 1 week”
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttfAddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xmlAddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Step 3: Use CSS extensively
Do you use images for designing your Blog or displaying bait content every time ? It is a bad practice !
Unnecessary use of images can increase your page load time. Moreover, you can achieve high quality looks by merely using few lines of CSS code.
Step 4: Look after your Font Family
You might be knowing or not, there are inbuilt fonts as well as external fonts (which needs to be downloaded at the time of page load).
Refer this article on fonts: Choosing Fonts for your Blog
The fonts can be imported with CSS code :
This statement will download the Bree Serif fonts from Google Servers.
You have to avoid using the fonts which are used very less frequently on your blog to avoid unnecessary delay in rendering. At most, you can use up to three or four external font families.
Google Font Tips
While using Google fonts, see that you are importing all of them through a single code. For an example :
should be written in one line as :
This will download all fonts in single request thus reducing the page load time.
Font Importing Tip
Studies have suggested that <link> method is more efficient than @import for importing external fonts.
You can import fonts using <link> tag as follows:
<link href=’http://fonts.googleapis.com/css?family=Bree+Serif’ rel=’stylesheet’ type=’text/css’>
Note that the above code should not be pasted within CSS file. It should be with the <head></head> section.
Step 5: Optimize Images
Images are the integral part of website or in other words, a website is incomplete without images. But larger sized images often tends to annoy users. You can first resize the image in MS Paint or other software and use it on your blog.
There is a technique called as Lossless compression through which you can reduce the size of the image without loosing its quality.
Here is one such online tool – http://ezgif.com/optipng which lets you compress png images online without loosing the quality. You can Google out other online tools for compressing jpg, gif etc.
Step 6: Use Google Page Speed Tool
The Google Page Speed Tool lets you check your site load speed and gives you a score out of 100. It also suggests what kind of improvements your blog needs in order to speed up page loading.
If you have followed the above five steps, the step number six will give you a good score 🙂 Go ahead and check it out.