You’ve arrived at the same place I had a few months ago, trying to improve your Pagespeed Insight score for your WordPress (or any other) site. Let me tell you what I had to do to get fairly decent scores, and show you the plugins and changes you’ll need. But first…
Let’s rewind
Back in March, Google announced that they were rolling out their mobile-first indexing search algorithm. This means that Google will be using what your website looks like on mobile as the starting point of how they index your site, instead of the desktop version, which is what they used to use. A good explanation of this has already been written by Bridget Randolph on Moz.
This leads to a lot of people scrambling over to Google’s Best Practices page, in order to get their site ready for, or take advantage of, the upcoming changes. You ultimately end up at the PageSpeed Insight page for developers. This allows you to input a URL and see what your website is scoring for both mobile and desktop. What makes this tool extra vital, is that it clearly points out what needs adjusting or improving, and why. Then directs you to documentation to help you make the changes. Awesome, right?
What to expect from PageSpeed Insight
While you will be aiming to get as high a score as possible, it’s very unlikely to have a site reach 100% that’ll work in the real world. What I mean by that is that you’ll have to make compromises along the way. Your site might have to utilise some external script otherwise the whole site can’t function, and you might not have access to that to make the necessary improvements.
Make the adjustments that you can do and gradually work your way through. I want social sharing on this site for example, but everything I’ve tried – going through all plugins and other solutions – either breaks my site or kill my PageSpeed score. So for now, until I can find a solution, I’ve left them out.
Where to start
If you’ve already run a PageSpeed test on your website, you’ll notice that it’ll give you two results pages, Mobile and Desktop. We’ll concentrate on the mobile as it’s a harsher critic, and anything you fix in the Mobile results will more than likely fix issues in the desktop version. There are 3 sections of Optimisation suggestions:
- Image Optimisation
- JavaScript, HTML, and CSS Optimisation
- Server Optimisation
Image Optimisation
Image optimisation is one of the easiest, but tedious, jobs to carry out. It will most likely have the biggest and quickest impact on your scores.
Make sure you are only using images when necessary. That doesn’t mean strip out all of your images, but don’t have images for the sake of having images. They have useful SEO purposes, so make them count, and use them to tell the story, not distract from it.
EWWW Image Optimizer
With the images you do have, make sure they are optimised. You can do this by running them through software that will reduce the size, only making the minimum change to the image. For WordPress, there is a plugin called EWWW Image Optimizer. This comes with both a paid and free version, in which you get more compression options with the paid version and the option to back up your images.
WP Smush
EWWW is the one I went for, but the other popular alternative for WordPress is WP Smush. Both are highly rated, so it’s down to personal preference and how you want to optimise your images. There is no right or wrong answer if you choose to go the plugin route.
Alternatively, you can use Adobe’s Fireworks to batch-process images and reduce the compression. If you don’t have access to the expensive Adobe Suite, you can use something free like IrfanView, which can batch-compress images.
The main aim here is to reduce the file size, looking for about 80-90% file compression, which PageSpeed Insights will be happy with. It’ll indicate which images it feels still require optimisation.
Content Distribution Network – CDN
Another option is to use a CDN, which will host all of your images and supply the most suitable image for the device it is being used on. It will also make sure it is optimised and take the load of your own server. Not only will it mean it is copied to multiple servers using server loading, but it means that it takes away to processing power and bandwidth away from your own server, allowing yours to work on the important things.
I didn’t find it necessary to use a CDN, mainly because I didn’t want to pay for another service. Most decent CDN come with a monthly fee, and they vary on what is on offer. I have proved that I can get by without one, but it’s another option should you need it.
JavaScript, HTML and CSS Optimisation
There isn’t a fix-all solution here, just a few procedures that you’ll need to carry out in order to get the desired effect. The first is to minify all your CSS, JavaScript and HTML files.
If it’s a template that you’ve built, minify them as part of your preprocess routine before uploading to the server. I do this, while also using W3 Total Cache, which has minify capabilities. As you’ll need the main caching part of this plugin in the next stage, it’ll allow you to cover two tasks with 1 plugin which saves on overheads.
The next thing is to make sure none of you JS or CSS slows down the loading of the page, and that anything that appears “below the fold” loads later. W3 Total Cache also has the ability to specify which files you want to load later. You can also manually useasync or deferto automatically tell the browser that these are not required until after the initial page load. Render-blocking JavaScript and CSS files are files that Google considers to delay the initial display load of a web page.
“Below the fold” meaning
For the uninitiated, “Below the Fold” is the part of your webpage that can only be seen once the user scrolls down. For example, if your browser takes up 1080 pixels in height, everything that appears in that first 1080 pixels is above the fold. Everything below that is considered below the fold. The term originated during print when front pages of tabloids and newspapers were often folded in half for display, storage of transport, and the headlines would tend to fit in the top half of that fold line so as to attract the most attention.
Server optimisation
Again, this section can be split up into 3 smaller parts. Browser Caching, server load, and server speed. Speeding up your server can help reduce server load. Caching your pages so each page doesn’t making repeated requests for static information can help reduce server load. By making a few adjustments, you can reduce server load. Using a cheap server or hosting company may limit what you are able to configure. In which case it would be a good time to look for an alternative host.
Let’s have a quick look at what you can do for server load.
Avoid Server Redirect
Remove unnecessary redirects for pages. Don’t make the server jump from one place to another if it doesn’t have to. Make sure that your server does not have to go through 2 redirects to get to the correct page.
Optimise your files
If you’ve proceeded through the optimisation steps above, then you’ve already minified your files. Doing this reduces the amount of data your server has to serve on every page load. Reducing the images will also do the same. The less data you transfer for each page load, the more your server will thank you for it.
Use Gzip compression
This will depend on how much access you have to your server, but compressing the files that are served can provide you with some massive savings. Some websites estimate that it can reduce some page sizes by 70%. My hosting allows me to set this up via a friendly Cpanel interface. But if you have access to the administration files, then you can do this manually. There are many tutorials out there to help you depending on your setup, and because of the wide array of setup choices out there. I’ll let you source what is best for you. But I’ll guarantee it isn’t as daunting as it seems.
Caching
Once all the above is done, it’s time to start looking into caching. There are a few Caching tools for WordPress, the most comprehensive and well documented seems to be W3 Total Cache. Installing it and then viewing the settings can seem overwhelming at first. But don’t worry, you don’t need all of them. In fact, I can provide you with links to two very good articles that’ll walk you through everything you need.
The first one is on wpmudev, which has The Ultimate Guide to W3 Total Cache. You can get set-up and configured in no time, seeing results on PageSpeed instantly. After getting everything in that working, I felt a little more comfortable using the plugin, even going it alone and making my own changes to see if I could make any improvements based on the understanding of what my site contained.
The second link is on mythemeshop.com, titled How to make your website load faster using W3 Total Cache. This covers every section of the plugin, with a brief description of what each section is for, and how it can help to make your site run faster. You can either run through it from start to finish or pick areas that you want to focus on and use that.
Server speed
If PageSpeed still indicates that your server response time is too slow, you are 100% sure that you cannot make adjustments to rectify that, maybe now is time to look for a new host. I would not move host lightly. Servers are not cheap, require a lot of time and work to set up and move sites over. I would also want to test a host before moving any major sites over to new hosts. Moving servers should be your last resort unless you can prove that the current setup is holding you back.
Conclusion
You are very unlikely to reach 100% on both Mobile and Desktop versions, so having that expectation beforehand will be useful. Two items on my list of Optimization Suggestions are about Google Analytics and Font Awesome, both of which are out of my hands. There are hacks to get around the Analytics issue, but that’ll mean I have to keep it up-to-date manually. That is not something I am willing to do. Currently, the mobile score for this site is around 93-94%, while the desktop score is at 97%. Those are very good scores to receive, especially for a WordPress site running on a shared server.
As long as your results are Green, you should be happy. There are currently no solid stats that show site’s that score highly outrank those that don’t. It’s still all about the content and the audience.