Make Your WordPress Site Load Faster
You may already know that the speed in which your site loads correlates directly with engagement, and in the case of commercial sites, profit. A slow-loading site can be frustrating to use and ultimately discourages visitors from taking your preferred action. All sorts of studies have been carried out that demonstrate the importance of site load speed to the user experience.
So it pays (literally) to speed up WordPress in terms of the loading time. With that in mind, in this article I want to give you a comprehensive overview of the actions you can take to both measure and improve your site’s load speed. Spending just a few minutes reading and implementing the measures below can potentially make a big difference to the success of your WordPress site.
Measuring Your Loading Time
The first thing you’ll want to do is figure out how well your site is performing, both for current and future reference (i.e. when you implement improvements).
I have two recommendations, both of which are free:
The above tools grade your site based upon a vast number of variables and spit out a whole bunch of recommendations (of which many will be addressed below).
If on the other hand you’re just looking for a straight site speed measurement (in seconds), check out Pingdom. If you go down this route I recommend that you “ping” your site 4-5 times and take the average load speed in order to get a more accurate reading.
Now let’s move onto the actions you can take to improve your site’s load speed.
WordPress Cache for Increased Performance
If you have been using WordPress for any length of time then you are probably familiar with (or have at least heard of) caching. To put it simply, caching takes your dynamically-created WordPress web pages and converts them into a “static” page. The science isn’t really important — the key thing to understand is that it makes your pages load more quickly. Installing a caching plugin alone should make a huge difference to your site load speed.
However, any beginner (or even intermediate) WordPress user can be left somewhat confused and/or intimidated by (a) the number of caching plugins available and (b) how to set up a plugin to get good results.
With the above said I’ll make it easy for you. There are two particularly popular (and similar) caching plugins available, of which I recommend W3 Total Cache.
Slimming Down Images
There are an awful lot of posts out there that recommend little tweaks to improve your site’s load speed. Many of these tweaks can make a difference but few will have as dramatic an effect as optimizing the images that you use on your site, which usually make up a large proportion of the total size of any given webpage.
The first step is to only upload images that are (a) already the correct size and (b) saved in an appropriate format (jpg for color-rich photographs and images, png for limited-color images like screenshots etc).
The second step is to ensure that every image you upload is run through a lossless optimization process, which does exactly what you might expect — optimizes images without any detrimental effect to their quality. While there are a few plugin options available, my suggestion is Smush Image Compression — it’s a simple plug and play affair.
Lazy Load Objects
Finally, you may want to change the order in which certain elements on your site are loaded. Delaying the loading of resource-intensive elements so that all other parts of the page can load first can really improve the user experience.
When it comes to WordPress sites, there are generally two things that you will want to consider for lazy loading:
Images
This should be pretty obvious – since images generally make the up a big proportion of a web page’s size, loading them last allows everything else to be in place in double-quick time.
My plugin recommendation is Lazy Load. It only load images when they appear in the browser viewport, which translates to lightning-fast upfront load speed. Furthermore, when a visitor scrolls down a page and hits a new image it is likely to appear almost instantly, as it is the only new element to be loaded.
Widgets
Widgets can often put a drain on a page’s load speed — often because they rely upon 3rd party servers to load (a common example of this is the Facebook “Like” box).
Therefore, choosing to lazy load widgets can prevent the rest of your page struggling to load. My plugin recommendation is Lazy Widget Loader, which allows you to select which widgets are lazy loaded.
I also recommend that you choose a social media sharing plugin that supports lazy loading. My number one pick is Digg Digg – not only does it offer awesome functionality, but it also allows you to pick exactly when the buttons should be loaded.
Conclusion
In reality you can implement all of the above features in less than thirty minutes. This paltry time investment is well worth the improvement it will make to your site.
Remember to keep testing your site speed as you implement the various measures above. Observing what effect caching, optimizing and lazy loading have on your site will add to your understanding of site speed (which can’t be a bad thing).
If you have any questions, please do not hesitate to ask in the comments section below!
I was going to utilize the W3 cache plugin, but I just recently read about the plausible bug with the security breach stuff. Is it still a safe plugin in to utilize?
The developer recently updated the plugin to fix the vulnerability. It’s an excellent plugin and I swear by it. Tip: I use the Rackspace CDN and the performance increase was very noticeable!
The W3C bug was only affecting disk caching (APC, Memcache etc are ok), and it was also patched by the developer.
I use the tips in this post and took my clients site from 4.2s load to 1.3s load times on the same host and same content.
Thanks for the post, Tom.
Any suggestion on which content delivery network might be the best pick or do you even suggest using one?
Hey dude, I know you recently moved to Media Temple. You know they have it setup already so you can use CloudFlare. I’d really recommend it, it works well, already setup with Media Temple and its free 😉
Yeah, I’m glad Dragan drew the short straw on setting that up, so I don’t have to deal with it 🙂
All I know is that it really is extremely easy to set up, but still haven’t checked how it affects site speed.
Hey A.J.,
Thanks for the suggestion. I did setup CloudFlare service and it’s very easy to do it via MediaTemple account center.
I just wanted an opinion on using paid CDNs.
Some of the biggest improvements in speed I’ve been able to pull is: 1. Minifying code (especially js), 2. CDN with Amazon and Cloud Front. 3. Conditionally delivering javascript and css files
I was able to improve the speed of some of my more image and javascript intensive sites by a factor of two by using these 3 simple implementations. (e.g. FrostRiver.com)
Caching can be a pain, especially with a site that is updated on a regular basis. I always have problems with caching scripts with regards to upgrades, updates, and changes, so I rarely use them.
Another great cdn is from google.It is free and much faster than cloudfare.
can google cdn be used with cloudfare?
To be honest I’m not sure. But CloudFlare is a CDN so I do not see why you would need or want to have both at once. I used to use CloudFlare on its own and loved it, but now I use the one included with my WPEngine package, so to be honest I’m not too familiar with CloudFlare anymore its possible a lot has changed since last time i used it.
Every new project I try to cache resources such as js files, create css sprites and reduce the number of header request, then if required look at gzip’ing files on heavy sites. The Google Page Speed plugin for FireFox is a great tool to use as a reference. Useful post.
the other thing someone can do is use a CDN like cloudfront.
just wondering about the wpsmushit plugin: it optimizes an image and shaves of about 2.6% while pagespeed reports that the same picture can be optimized to save 27% – so what tool is pagespeed using to do that??
wpsmushit is a great plugin, but I’ve had problems with it always cutting out…Personally I don’t know how the Google Page Speed tests that (maybe you need to clear your cache and re-test?)
I personally use CloudFlare which optimizes images before they are delivered to the visitor.
I was using W3 Total Cache but had to uninstall it because it loaded up my server resources. Anyone who also experienced this?
I haven’t had such great results with W3 Total Cache either. I personally use CloudFlare the $20/month one.
Interesting!
I had W3 Total Cache some 18 months ago and faced many problems with it
I uninstalled it and have thought of installing again
I have MaxCdn but have not found a good installation tutorial for the new total cache plugin
IU use Thesis theme and understand Object cache is not good for Thesis?
Would like to find a config tutorial for W3Total Cache plugin
I personally use a premium version of CloudFlare. I host on Media Temple so they are partnered with CloudFlare. There isn’t any need for me to use a Caching plugin and CloudFlare at the same time since CloudFlare is a CDN and it caches your site.
Plugin, web host and influence our site speed as well.
Yes, probably the most important!
Nice plugin , my site has open fastly after installing plugin………..
thanks for the plugin im like wp smush.it
I made a Google Pagespeed Insights plugin for WordPress. It is a great tool for people who are looking to further improve their sites performance based on pagespeed recommendations.
You already touched on the Pagespeed offering from google, however this plugin expands greatly on their offering.
My plugin runs and stores pagespeed reports on all of your WordPress pages, which allows you to visualize your highest and lowest performing pages. You can also view report summaries to see the ‘big picture’ of your sites performance. Summaries show the biggest areas for improvement across all reports.
The free version is available on the WordPress Codex: http://wordpress.org/plugins/google-pagespeed-insights/
My website includes additional plugin information and videos, as well as the premium plugin and features.
The plugin looks really nice! Good work Matt. I’m just wondering if you have done any testing to see how the plugin itself affects page speed. Or do you recommend running it for a while after site launch then de-activating it?
-AJ
Hey, thanks for looking at it!
I have done a fair bit of testing to see what impact (if any) the plugin has while it is running, as well as how much room it takes up in the database to store the reports.
I used New Relic to monitor the server during report scans and I saw no noticeable increase in utilization. This actually makes a lot of sense for a couple of reasons:
1) All the ‘heavy’ lifting of checking these pages is being done through the Google API, so that load occurs on Google’s servers, not your own server.
2) Only one page is checked at a time. The work to send a page off to google, wait for the response, and then store that response to the database is very low.
During development I made it a point to store the Pagespeed reports data in their own WordPress tables. Keeping the data separate from the wordpress posts and postmeta tables ensures that my plugin does not have an adverse effect on SQL query response time.
As for DB size, I do not have much control over that, but I was pleased to find that it is very low. On one of the largest tests I did, I ran desktop reports on 580 URLs. The database size was only 14.5mb for all of that data.
So in my testing I have not seen any negative impacts on page speed while using this tool. If anyone has a different experience, please contact me so I can investigate.
It is also worth noting that most of the time the plugin isn’t even running, unless you have manually started a page scan, or if you are using the premium version, and you have scheduled weekly/bimonthly/monthly scans. And even then for an average sized site it will only run for maybe 10 minutes.
Awesome! Nice to see a developer that really takes pride in their work and it seems you’ve really done everything correctly. I’ll take a closer look at the plugin/code when I get a chance 😉
Couple quick questions:
1. Did you add an option in the admin to clear the stored data? Would be nice.
2. Would you ever consider guest posting on WPExplorer? We’d love to have you share some tips, guides, tutorials.. It would be a great way for you to get a bit more extra exposure and a great back-link 😉 I can PM you on Twitter with my email address if interested.
-AJ
Thanks!
To answer your questions:
1) Yes, there is an setting in the “Advanced Configuration” area of the Options page which will allow you to delete all report data. You can erase all reports, or erase ‘everything’ which includes things like: Ignored URLs, Snapshots, and Custom URLs
2) That is very flattering. Yes I would consider it.
1. Awesome.
2. Awesomer.
Hi,
Awesome stuff!! Best hosting must need to get the best speed for the website. Also, unnecessary plugins sometimes cause slow down of the website. I personally found the image and caching issue when i checked with Google page speed insight. Thanks for sharing this great post.
You could also try our Lazy Load for Images plugin (it’s on WordPress.org)