If you were following my tweets, you may be already having an idea about what I have been up to. Yes, I have been trying to nail down the page load performance issues on this blog in order to achieve a page render speed under 500 Milli seconds for the homepage and all other pages under 1 second.
Why is website load speed important?
Firstly, most users will hit their browser’s ‘Back’ button (i.e increased bounce rate figures), if the link that they clicked from a search result or a connected page doesn’t open in a couple of seconds. And the other important point is that Google punishes websites that are too slow by reducing their search ranks and hence page load speed plays a major role in SEO.
In this post I shall explain how I achieved a homepage load speed of 368 ms via a few free tools, scripts and WordPress plugins.
Will this method work for all?
What I have tried to explain here are those WordPress blog performance fixes that would work for all types of hosting services including the cheapest possible shared host. And, I wouldn’t touch upon other obvious performance improvement tips (Read here)
However, there are numerous other parameters that affect the page rendering speed on a website. Some of the performance fixes (e.g. GZIP compression) cannot be done under shared hosting services and a great deal of performance cannot be achieved without supporting infrastructure such as a Content Delivery Network (CDN) either.
Anyhow, let us move on with whatever technical fixes possible with any given host.
Tools you would need
The following list of free plugins and scripts is all that you need for our performance project today.
- W3 Total Cache (my preference) or WordPress Super Cache plugin
- Optimus Cache Prime script – A hidden gem in achieving extreme site performance, works great with the above cache plugins
- WP Smush.it image optimizer plugin
How to go about it?
We would start with installing and configuring the plugins mentioned above. As for Smush.it plugin, there’s nothing much that you need to do in terms of configuration.
Cache Plugin settings
However, for the cache plugins, I would recommend to use ONLY page cache (and not object/DB cache) and minify if your server allows that.
The most important performance setting in page cache is to ‘preload’ or ‘prime’ the cached pages. I am using a setting of 5 pages to be primed per 300 seconds (image below). If anyone needs to know more about my W3 Total Cache settings, please let me know your queries via comments.
OCP Installation and Settings
Now, over to OCP (Optimus Cache Prime) setup. This one is one of the easiest apps to setup. The settings procedure is well explained on their project page. All that you have to really do is:
- Copy the script to a suitable directory on your server.
- Setup a cron job via your cPanel that call the script periodically
- The script would be called in the following format:
<ocp directory>/ocp -l <WordPress directory>/wp-content/w3tc/pgcache/ -ls _index.html http://yoursite.com/sitemap.xml
I have setup the OCP to run every 30 minutes and this can instantly prepare the page cache that’s in the form expected by w3 Total Cache (check the OCP project site for WP Super Cache parameters)
Now the question is, why use W3TC’s page preload feature when OCP is working? Well, the answer is that OCP will check if the page is already in the cache before generating it – this will make the page caching logic kind of balanced between the two without hogging the server resources. Also, when W3TC does the cleanup, the OCP can preload everything together in the next few minutes.
With the above two working together, you can already see your WordPress blog hurrying as if it’s on steroids.
WP Smush.it usage
Smush.it is a plugin that runs automatically to optimize your images every time any image is uploaded to a post. You can do a one-time optimization of the entire media gallery once the plugin is installed and then expect a auto-smush as and when you create new posts.
Smush.it – which internally use Yahoo SmushIt web service – optimizes and brings down the image content size drastically there by improving the page load performance.
That’s pretty much what you need to quickly convert your lagging blog into a super fast blog. Please note that at times, when the priming is happening, the blog may be a bit slow but it’s really fast 90% of the time on any given day.
Further Performance Tips for WordPress blogs
- Avoid the usage of slow performing plugins and scripts. You can figure out from Pingdom Tools performance report which script or stylesheet is contributing to the slow performance of your blog
- Avoid Timthumb. If you happen to have a theme with Timthumb, please read my post on timthumb optimization
- Always use, progressive JPEG images for your post content
- Include your stylesheets inline if they are relatively smaller in size
- Carefully follow the performance tips provided by your page speed test sites (some are listed below)
- Make it a habit to optimize every image and script that’s added to your blog
Page test tools that I use
- GTMetrix – to check with Google Pagespeed and Yahoo YSlow simultaneously
- Pingdom Tools (Can use their free alerts too)
I shall be back with more posts on this particular topic of Performance – SEO optimization. By the way, if you go for a decent VPS Hosting service and a CDN such as MaxCDN, you will be able to achieve a site load performance as given in the picture below: