WordPress is liberating websites, making them available for non-developers. People are discovering that they can build a website by themselves, without any technical superpowers, which is awesome! However, this also creates some issues along the way. For instance, what do you do if your Google PageSpeed Insights score is a bit low? Today, we talk about how you can improve PageSpeed Insights score for your WordPress site.
There’s a lot of debate around the subject of how Google ranks websites, and whether you should put more effort into raising the bar in an attempt to improve PageSpeed Insights score for your site. Of course, Google’s is not the only player in this game, and there are other tools available for monitoring website performance. GT Metrix and Pingdom do a great job in analyzing website speeds, and I recommend checking them as well. However, the rules of the game set by Google shouldn’t be ignored, moreover because they are easy to be met.
Here’s how the 10 Google PageSpeed recommendations can be checked, with immediate results for your site’s load time.
The good news is that for most of Google’s PageSpeed rules, there is a WordPress plugin that can assist you. Without any technical background, you will be able to fix your website code and improve PageSpeed Insights score!
Improve PageSpeed Insights score step #1: Google PageSpeed test
To begin with, you have to check how your website stacks up against Google’s PageSpeed metrics. This can be done on the spot, with no account needed, no email sign up, nor any marketing witchery. Just grab your website’s URL (or any URL you want to check) and
go HERE.
Just paste your website’s URL and wait a bit, the process will take a few seconds depending on the complexity of the page. Keep in mind that the analysis is made in relation to that exact URL – not the entire website. The page is fetched both for desktop and mobile usage, so you will actually receive two reports.
Google’s scale goes from 0-100, and each score is marked with a separate color, depending on the performance levels: red, yellow and green. Scoring over 85 points gets marked green, signaling you’re on the safe side.
The 10 rules of Google PageSpeed Insights
After running the analysis, you will get a detailed report on what your website is doing ok, as well as the things to improve, with actionable suggestions for both mobile and desktop versions. There are 10 main rules that Google is monitoring, some of them will be successfully met, some not.
For the failed ones, you will receive advice on how to better handle the requirements, mostly addressing webmasters who can work their way directly into the code.
Here are the things you should do first:
1. Leverage browser caching (see the original rule)
Some elements of your website can be temporarily stored (cached) to make the loading easier. Loading non-cached content (HTML, CSS, logo, images) will significantly slow things down. No wonder it is the number one fix for your website if you want to improve PageSpeed Insights score.
Caching for WordPress websites is managed by several free and premium plugins. I suggest trying out either W3 Total Cache (free solution, link below) or going directly for WP Rocket, which has a price tag, but still very affordable (it’s what we use on the blog).
2. Eliminate render-blocking JavaScript (see the original rule)
In short, some JavaScript code may be interfering with your above-the-fold content, preventing the page from loading properly.
There are two sides to this problem:
- The technical explanation: the thing you need to do is move the call to jQuery from the head of the page further down, adjusting when the call to the jQuery module is made.
- The simplified solution: you can fix the problem with one cool plugin – WP Deffered JavaScripts. It will force the browser to download JavaScripts in parallel, helping the site to load faster.
3. Optimize CSS delivery (see the original rule)
Most CSS requires extra time to download, so reducing the weight of the CSS code will also help improve PageSpeed Insights score.
One plugin that’s really effective when it comes to aggregating and minimizing JavaScript, CSS and HTML is called Autoptimize. Just install it and enable the options you want in Settings / Autoptimize.
If you don’t like it, you can use WP Super Minify alternatively.
4. Minify resources (see the original rule)
Unnecessary or redundant code affects the browser’s behavior. Google will downgrade you when your HTML, CSS and JavaScript files are too large. It’s recommended that all JavaScript files larger than 4096 bytes should be minified.
This process is handled well by the plugins that also optimize CSS delivery, which we mentioned in the previous point: WP Super Minify or Autoptimize. Use them to improve PageSpeed Insights score.
5. Enable GZip compression (see the original rule)
Continuing with the code improvements, CSS and HTML can also be compressed. This is done with GZip compression, which reduces the size of your website before sending it to the browser. This can be set in various ways:
- You can have your web host set this up.
- You can set it in your .htaccess file.
- You can enable it through your caching plugin, like the aforementioned W3 Total Cache.
6. Optimize images (see the original rule)
Images contribute, on average, for about 60% of a web page’s total size – this is the largest factor influencing loading times. The optimization process can considerably reduce the size of your images by removing unnecessary information, and by smartly re-compressing them using the most appropriate algorithms.
The optimization may be handled in different ways. Lossless optimization is moderate and it is recommended for technical drawings where no details should be removed from the image. Lossy optimization can radically improve the website speed by shrinking images more aggressively. However, this will not interfere with the visual aspect of your image. Images will still be properly displayed on the web, and the optimization will not disturb the way users see the images online.
Another thing, cameras and smartphones create photos with lots of megapixels, which are not needed for the web. In order to keep an optimal image size, and reduce server space usage, you should also resize images to a maximum width and height that your WordPress theme can handle.
For a detailed how-to on image optimization please check out our other post here. It will help you improve PageSpeed Insights score.
7. Improve server response time (see the original rule)
Slow response time may be caused by several issues: poor web hosting, web server setup, traffic overload or too many resources used. Google’s optimal server response time recommendation is set below 200ms.
Among other things, having too many poorly coded plugins may affect the server’s response times.
8. Prioritize visible content (see the original rule)
A very good practice in website coding – when building the HTML structure of your site – is to put content first, and then all the side elements and JavaScript further down the page.
Google also warns about reducing the amount of data used by your resources – an option which should have been resolved by the plugins recommended when discussing rule #4.
9. Use asynchronous scripts (see the original rule)
When the code is executed synchronously by the browser, it cannot do more than one task at a time and will prevent the page from loading faster.
For this, Google has published a list of the asynchronous versions of popular JavaScript tools/script. Make sure that you use them instead of their standard versions to improve PageSpeed Insights score.
10. Avoid multiple landing page redirects (see the original rule)
Redirects are a nice tool for getting people exactly where you want them on your website. However, unnecessary redirects will also cause delays and make it more difficult to improve PageSpeed Insights score for your WordPress site.
Google isn’t particularly fond of redirects in any shape or form. However, when you do need to use them, make sure that you have only one redirect for a single URL.
For example, avoid redirecting from site.com/page » www.site.com/page » m.site.com/page when dealing with the mobile version.
If you want just simple one-time 301 redirects, try out a plugin called Linker. In short, it lets Google know that whatever you’re redirecting isn’t a temporary redirect but will stay there for good.
Conclusion
Okay, with all that behind us, my advice is to actually start by solving the most critical issues signaled in your PageSpeed Insights report.
For more in-depth understanding of each recommendation, check out the Google developers rules – everything explained more extensively. The Google PageSpeed Insights test can be repeated as many times as you want, but allow some time to pass between the runs, as the results are cached for 30 seconds or so.
I hope you’ll feel much more confident to tackle all those PageSpeed Insights rules at this point. I’m also interested to learn how you’ve been dealing with these issues, what other performance tools you have tried, and how they’ve helped. Share them in the comments.
And lastly, want to make your website quicker? Don’t forget about our free email course on how to speed up your WordPress site:
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!