Faster WordPress Websites.
If none of this makes sense please hire us to Optimize your WordPress Website. We are here to help with any Web Design and Web Development needs.
1. FAST HOSTING
All the optimization 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 Google Cloud Platform, but if you’re not familiar with Linux systems administration you probably want a managed host of some sort. Or we can help manage your WordPress website. 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 Pinnacle Platform, Kinsta, and 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 data center in your country, this will minimise response times as data will physically travel fewer miles. In our case, we host all our US-based websites with Pinnacle Platform, 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, 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 color density images like photographs, png should be used for vector graphics and images needing transparency, and of course gifs for animated images or low color density images.
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 colors in the image, which enables us to leverage gifs format better than jpeg.
Secondly, optimizing compression and stripping unnecessary metadata can reduce image file sizes considerably. There is a 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 favorite 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 browsers support it though) and advanced color 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 favorite 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
The browser cache takes advantage of the inbuilt cache functionality of your visitor’s browser. You can tell browsers to cache your site’s static files like images and even HTML, CSS and JavaScript. This prevents your visitors from downloading the same content when navigating through your site.
- Minify
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.
- CDN
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 incorrect 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 metadata 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 realize 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, edge cast 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, resulting in faster load times for your visitors.
As mentioned above, the W3TC plugin is a great way to get easy 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, assessing improvements you need to make and analyzing real visitor load time data.
Our favorite 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 analyze any website
All these tools will give you scores for certain areas and suggestions for improvements, usually in the 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…
