Continuing with our tutorials on achieving faster WordPress sites we’re going to take a look at 7 important points you need to be getting right, or at the very least be attempting to.
1. Fast Hosting
All the optimzation in the world won’t do you much good if you’re with a sub-par web hosting provider; you need a solid foundation of a fast, reliable server that can also handle the occasional traffic spike. We showed how you could spin up your own nginx powered VPS with digital ocean, but if you’re not familiar with Linux systems administration you probably want a managed host of some sort. When you’re hosting WordPress sites it’s a good idea to go with a specialist WordPress host as they’ll have already optimised their infrastructure towards WordPress. Popular choices include: WPengine, Pressable, pagely, but as always do your research.
An important factor to consider when choosing a host is the geographical location of their servers. If your website has an international audience, for example a general interest blog, then this won’t matter too much. But if you have an eCommerce store or local interest site you’ll want to host with a provider who has a datacenter in your country, this will minimise response times as data will physically travel fewer miles. In our case, we host all our UK based websites with TSOhost, who have proven to be great!
2. Well Coded Theme & Plugins
As with having a solid host, using a well coded theme and plugins is an absolute prerequisite before you start thinking about fine tuning your site. Bad themes can include large amounts of unnecessary code, poorly structured/un-semantic HTML, place scripts and custom code in the wrong places and much more. For this reason it’s best, if you’re unable to evaluate code, to stick with the big names of the theme industry, WooThemes, Genesis, Elegant Themes, etc. ThemeForest is probably the worst offender in this respect; although they are slowly cleaning up and tightening theme submission requirements, it’s still best to look closely at a theme before hitting buy.
Certain plugins can also have devastating effects on site speed, in general it’s not the number that you have active (we’ve built sites with 50+, all those WooCommerce extensions add up), but their purpose. Typically plugins which make heavy use of the database cause the most problems – so plugins that display related posts (services like Gravity are much better at this anyway), security plugins, redirection/logging plugins, and sometimes eCommerce plugins. A good way to find out which plugins are stressing your server the most is to use P3 profiler, a plugin that analyses other plugins’ speed.
3. Optimized Images
Optimizing images is one of the easiest wins you can achieve, and with recent research revealing that over 45% of the top 100 eCommerce sites use unoptimized images this is an area where you can do better than the big guys. Firstly, you need to be saving/exporting in the right format, predominantly jpg, png or gif. Jpeg should be used for high colour density images like photographs, png should be used for vector graphics and images needing transparency, and of course gifs for animated images or low colour density images. That last point is often overlooked, but for a real world example of the advantage take a look at our product images for the WooCommerce Extensions listed on our site:
As you can see, if we’d saved out in jpeg format we’d have a file weighing in at 55.6K but using gif we have a file only 9.9K in size. This is due to the low number of colours in the image, which enables us to leverage gifs format better than jpeg.
Secondly, optimizing compression and stripping unnecessary meta data can reduce image file sizes considerably. There are number of ways to do this, a popular method for WordPress is to use WP smush.it – a plugin that sends images you upload to Yahoo’s smush.it service to be compressed – or use a variety of desktop software before uploading. Both have their merits; WP smush.it is great if you don’t trust your clients or authors to properly optimize images before uploading, but it can sometimes be quite slow and the smush.it service is infamously temperamental. We prefer to use desktop software, our favourite being ImageOptim (Mac OS X only) which has a large number of compression and stripping algorithms with a simple interface, just drop your image onto the dock icon.
As shown, ImageOptim reduced our jpeg-gif comparison by 27.6%. Other popular programs include:
See this article for a number of other options. Further optimization to look into includes progressive jpegs (images initially load blurry and increase in quality with available bandwidth, not all broswers support it though) and advanced colour profiling for jpegs with Photoshop.
4. Use A Caching Plugin!
Using a caching plugin is another absolute must for speeding up your site. Caching will keep the most frequently used elements of your site in a high performance store, for example your server’s RAM. NB: some WordPress hosts like WPengine already employ their own caching and do not allow you to run your own, so first check with your host if you can. There are really only two options you should consider, W3 Total Cache and WP Super Cache. W3 Total Cache is our personal favourite and generally seems to be the preferred option with more comprehensive features, even coining their own term “The only WordPress Performance Optimization (WPO) framework; designed to improve user experience and page speed”.
A full tutorial of W3TC is wildly out of scope for this blog post, especially as the configuration is heavily dependent on individual sites – you’ll need to be particularly careful with aggressive caching when using WooCommerce or other eCommerce platforms – we’ll follow up with a WooCommerce caching post soon – for now we’ll give a quick overview but if you’re going to install it, have a thorough read of the FAQ first.
There are 5 ways in which W3TC enhances performance:
- Page Cache
The page cache is self-explanatory in that it keeps your site’s page and post content in the cache, relieving your server of some of the backend code execution (PHP) and database lookup (MYSQL). This is where you’ll see the most benefits.
- Browser Cache
Minification combines your different CSS and JS files and optionally strips them of whitespace. This is a powerful tool and can often break things so you’ll need to experiment with how far you can minify resources.
- Database Cache
The database cache setting is again self-explanatory in that it caches certain database objects for reduced loading time. Think queries that are often run and don’t need to be written to.
See the section on CDNs (content delivery networks) below for a full description, but this setting in W3TC allows you to easily set up an origin pull or push CDN.
Regardless of the plugin you choose, a caching plugin will dramatically increase site performance as it relieves your server of much of the work it used to do. Be careful though, as an incorrectly setup caching plugin may do more harm than good!
5. Clean up Your Database
Over time WordPress itself and a number of plugins will create more and more data within your MySQL database; a lot of this will be superfluous. Old post revisions, deleted plugins data (wordfence creates an enormous amount of data), transient options, orphaned meta data and more can all be safely removed from your database, potentially speeding it up. A faster database means faster query results, which in turn means a faster site so it’s a good idea to perform at least infrequently. Popular plugins that will optimize the database include:
6. Use a CDN
You’ll have no doubt come across the term CDN, or Content Delivery Network, but you may not realise quite how easy and affordable it can be to implement. There are a dizzying number of providers you can choose, from larger networks like Akamai, edgecast and Amazon to smaller operations built on top of others like PressCDN, MaxCDN and cachefly. Who you choose will be dependent on your budget, largest visitor geographical regions and preferences.
The basic premise of a CDN is to offload the delivery of your sites static assets (images, videos, css & js files) to servers positioned around the world. The CDN will automatically determine which server is closest to the visitor and deliver the assets from that server, result in faster load times for your visitors.
As mentioned above, the W3TC plugin is a great way to get easily setup with a CDN, with support for a number of popular CDNs you just enter your login/API details and W3TC will do the heavy lifting.
A popular alternative and one we use is Cloudflare, which functions both as a CDN and includes performance and security enhancing features, like Mirage (pro only) which detects screen size and serves up an appropriately sized image. Best of all, they have a free plan with unlimited bandwidth!
- Go to CDNplanet to determine which CDN is best for you.
7. Comprehensive Testing
To be on top of your site speed game you need to be testing what’s working and what’s not, assesing improvements you need to make and analysing real visitor load time data.
Our favourite testing tools are:
- Google Page Speed Insights – Pleasing users is only half the battle – you need to woo Google to get visitors in the first place. Page speed insights is a great resource that shows you exactly what Google sees and wants from your site.
- Pingdom Tools – Pingdom is a lightweight, fast tool you can use to check your site, similar to Google’s offering it won’t give you much more info.
- WebPageTest – Web Page Test is a much more comprehensive resource that has a large number of test server locations with options to test with different browsers and internet connection speeds. A little slower to process but it’s worth the wait.
- Yslow – This is a great browser extension for most browsers that you can use to quickly analyse any website
All these tools will give you scores for certain areas and suggestions for improvements, usually in order of importance. Work through the most important but be careful not to obsess over the numbers! They’re only guidelines and often you will be unable to implement all recommendations.
The real test is how your site performs for your actual visitors. If you’re using the new Universal Google Analytics tracking code then this has been made much easier for you. Follow the instructions here on how to change your tracking code to include more site speed data. More powerful options like New Relic are also available but can be overkill.
Have we missed something glaringly obvious? Let us know in the comments…