A step-by-step plan for speeding up your WordPress website.
First of all, why worry about load time?
That’s a very good question. You’re probably busy with other things, and who cares if your site loads in two seconds or three, right?
Well, research suggests that users care a lot about website speed. In fact, it might be the single most important technical aspect of your website. A slow website impacts customer loyalty, conversion rate and the perception of your brand.
Here are some quick stats:
- 40% of people abandon a website that takes more than 3 seconds to load.
- 47% of consumers expect a web page to load in 2 seconds or less.
- A 1 second delay in page response can result in a 7% reduction in conversions.
- 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
(Source: kissmetrics.com)
In other words, it’s crazy to ignore page load time, especially when it’s quite easy to test it to see if you have a problem.
The one minute website speed test:
- Go to gtmetrix.com.
- Enter the URL of your website.
- Click the Analyze button.
- Kick back and let it do its thing.
Easy peasy, right? Now comes the fun part.
You’ve just been presented with a report and chances are you have no idea what it means. Let me walk you through the basics. I’ll use the performance report for my own website as an example.
PageSpeed Score: Google’s test of how well the front-end of your site is optimized. This means things like HTML, CSS, scripts, images, video, etc.
YSlow Score: Yahoo’s version of PageSpeed which grades slightly differently but is basically the same thing.
Fully Loaded Time: The time it took for the page to load all of it’s elements and be fully rendered in the browser.
Total Page Size: The total size in bytes of all the elements of the web page.
Requests: The total number of requests made to the server while loading the web page. This effects performance because each request is a separate item the server has to deliver and the browser has to display.
Here’s what you should shoot for in each of these performance metrics.
PageSpeed/YSlow
I focus mainly on PageSpeed, and I like to see a score over 90%. There can be serious diminishing returns when improving this score, so don’t spend a lot of time trying to get from 92% to 95%. Mine is 96% in the test above, but like I like to fiddle.
Fully Loaded Time
The most important metric to look at. I like to see a load time of less than two seconds. That’s a pretty standard industry rule of thumb, and you’ll be doing well if you hit that. Of course, less is better, but a two second load time probably won’t annoy your users too much.
Total Page Size
Here’s where it gets tricky these days with big image sliders, video and other popular design elements. Personally, I would trade fancy design for a total page size of 2MB or less every time. But then I like to keep things simple.
Requests
This one can also get tricky if you’re running a lot of plugins, advertising, or anything else that involves third party elements. But as a general rule, if you keep it under 40 – 50 you should be in pretty good shape.
Now let’s get down to business.
Chances are your metrics as nowhere near as good as the goals above, especially if you’ve never done this test before. Don’t feel bad, as that’s pretty typical for your average WordPress site.
Even most professional WordPress developers don’t focus nearly enough on performance as they should. You may have spent thousands of dollars on your site only to find it loads slowly and scores abysmally on this test.
But take heart because most websites have a lot of room for improvement. I’m about to walk you through some of the most common issues and how to fix them.
All about images
I started building websites late in the last century when most people were still on dial up. Back then I used to try to make web pages less than 80K.
Times have changed and most people are on broadband connections now. But attention to images is still important.
Optimize images
This is one of the easiest wins, especially if you have a very low score. GTMetrix actually provides you with an “optimized version” for each image that is typically very well done. That means a small file size without compromising image quality too much.
But the easiest fix for this is to install the WP Smush WordPress plugin and have it do the work for you. It will even optimize all of the images already in your media gallery as a batch if you like.
There are a lot of image optimization plugins for WordPress, but I use WP Smush. It’s easy to set up and use, and the optimization it does is quite good.
Once you have it set up you can set it to optimize any future images you upload automatically, which should eliminate the problem of oversized images completely.
Serve scaled images
What’s happening here is that the images used have much larger dimensions than are actually displayed.
For instance, you may have a thumbnail image alongside a post title and excerpt on a category page. The image you see is 200px wide, but the actual image is 2000px wide. This is an extreme example, but I’ve seen worse.
Unfortunately, the solution might require fixing the code of your WordPress theme. But you can definitely limit this problem by paying close attention to the images you use.
These days responsive design is almost ubiquitous, and images scale according to the size of the screen. So, the images you see on your desktop will shrink when viewed on a phone or tablet.
But images should only be as large as the largest size displayed. Anything else is just wasting bandwidth and slowing down your site.
Specify image dimensions
Almost all the images you see in a web page should have the width and height specified. That allows the browser to render the layout of the page much more quickly.
If you have a bunch of images without dimensions, your page will render more slowly, and the page elements may jerk around as the browser figures out what size the images need to be.
Like the scaled images problem, it’s a result of lazy coding and might require fixing the code in your theme. If you’re not comfortable doing that, definitely make sure that all of the images you use in the WordPress editor have image dimensions specified. They should be inserted automatically by the editor. If they’re not, something is amiss.
Using the Waterfall tab
Reducing your total page size is probably the single best way to reduce your load time. Once you’ve got your image optimization issues sorted out, click on the Waterfall tab in your GTMetrix report.
This gives you a step-by-step look at how your webpage is downloaded by a browser. It’s a great way to catch large files or other gotchas that are slowing down your page load time.
For instance, you might see one or more of the following.
- The image slider you’re using looks great, but the total byte size for the images used is over three megabytes
- That nifty plugin you installed is loading 500K worth of CSS and JavaScript
- You have several photographic images in PNG format, instead of JPG, and that are adding an extra 800K
In other words, the Waterfall is a great tool for catching large or slow-loading files that the earlier tests missed.
Take a look at the file size and load time columns for anything that looks out of place, disproportionately large or slow loading.
The benefits of caching
Time to address one of the most important components of optimizing a WordPress site: caching.
When a browser requests a webpage, WordPress does a lot of work putting it together. It has to query the database, collect all kinds of HTML, CSS, JavaScript and image files, put them all together and render the page.
A better solution is to cache, or store on the server, many of these assembled pieces intact so they don’t have to be re-assembled each time the page is loaded.
You might think of it as the difference between making a sandwich versus buying one pre-made. Instead of taking the time to assemble the sandwich from it’s component parts you just pull it off a shelf.
WordPress is a great platform, but it can be slow right out of the box, particularly if you have a complex site. It really needs to be cached to achieve optimal performance.
But it always amazes me how many WP sites aren’t cached, and are therefor much slower than necessary. It’s relatively straightforward to set up, and should be a standard part of building a WordPress website.
WordPress caching plugins
Fortunately, when WordPress has a shortcoming, there are usually multiple plugins to fix the issue – in this case, caching plugins.
There are quite a few available, but one of the most popular, and the one I use, is W3 Total Cache. It provides all of the required caching, and will greatly improve load time and PageSpeed score.
I’ll take you through some of the most common issues you’ll see in your GTMetrix report that W3 Total Cache will fix.
Minify HTML, CSS and Javascript
If you website is currently not cached, chances are you got a big fat F for all of these in your report. But what does it mean?
Minifying is the fairly simple process of stripping out white space and line breaks from a piece of code to reduce it’s file size. While it can sometimes cause problems with a browser interpreting JavaScript, it’s typically pretty easy to set and forget.
Enable gzip compression
Again, if you don’t have caching set up, you probably didn’t do so great on this one. Not to worry, because W3TC will fix this as well.
By enabling gzip compression, the code sent to the browser is actually compressed, making it much smaller than it was before. If you’ve ever created a Zip archive on your computer, it’s very similar to what’s going on with gzip compression.
Defer parsing of JavaScript
When using WordPress, it’s easy to accumulate a lot of JavaScript files from themes and plugins. By default, these are all included one by one in the header of the webpage code.
The problem with this is that the browser needs to load all these separate files before it can render the page. A better solution is to combine them into one file and then include that in the footer of the page code.
This won’t effect the functionality of the site, but it will allow the user to see the rendered page much faster. That’s a better user experience, which is what this is all about.
Leverage browser caching
Similar to how files are cached on a server, your browser caches files as well. These are typically images, CSS and JavaScript files that are stored on your device so they don’t have to be loaded each time the page loads.
At the same time, your browser can’t cache these files forever because chances are they’ll change at some point. Therein lies the rub.
By default, files are set to expire from the browser’s cache anywhere from two minutes to a day. So, if a user comes back to your site later in the day, they may have to reload all those files anyway, even though chances are nothing’s changed.
The key is to set the cache expiration to something more reasonable, like a week to a year. Chances are most users will clear their browser cache before a year is up, but for files that rarely change this is a good bet.
Configuring W3 Total Cache
Configuring W3 Total Cache can be a bit intimidating, but if you go through it step by step it will dramatically improve both your load time and your PageSpeed score.
A tutorial on W3TC is beyond the scope of this post, and there are plenty of them out there already. I like this one from wpmudev.org.
How’d it Go?
If you’ve gone through this guide and successfully made the changes I talk about, chances are your site is in much better shape performance wise.
You may have even hit that magic 90% PageSpeed score and 2 second load time goal I mentioned at the beginning. If so, give yourself a pat on the back. That’s a solid accomplishment for a beginner.
If you did everything I told you to do and your site is still slow, you may have other issues. If you have a decent PageSpeed score and a relatively small page size (say 2MB or less) and you still can’t get the load time under two seconds, it might be time to consider new hosting.
I’ve used many web hosting companies over the years, and my current favorite is WPX Hosting. They’re the best WordPress hosting for my money right now.
While there are quite a few other techniques to improve performance, what I’ve detailed above should have made big improvements.