You’ve built the perfect WordPress site but you’re noticing that it takes a while to load. Even worse, Google has noticed and you’re losing search engine traffic because of it. Here’s a few tricks I’ve learned to get top scores on Google PageSpeed Insights, Google’s tool to measure site performance.
With all the images and JavaScript required to make a website these days, it can cause your website to load slowly. That extra load time can cause lower search engine ranking and visitors to leave your site. You can improve your score relatively quickly by optimizing your images, installing a good caching plugin, minimizing your CSS, and optimizing your JavaScript to be non-render blocking.
You’re Losing Traffic To Your Site
Google has said that site speed is one of the major factors used by its algorithm to rank pages, especially for mobile results. With the lower search engine ranking, that means fewer people will see or click on your site within search engine results. Google wants to deliver the most relevant and best user experience for their searches so it makes sense that they’d favor a competitor’s website over yours if their site loads faster.
And it’s not just Google. Visitors to your site are doing this too. According to a 2017 survey, “more than 75% of people reported leaving a slow-loading website for a competitor’s site.” And let’s be honest here, when you’re on your own site, wouldn’t you like it to load faster? None of us likes to sit around, waiting for a website to load!
How To Check Your Page Load Times
There’s a ton of different websites where you can test your website’s performance but let me save you the trouble of sifting through them all. The main tool you should use is from Google, their own PageSpeed Insights. To get a little more insight, you should also use GTMetrix.
Google PageSpeed Insights
Since this is Google’s page speed tool, it’s the most important since it shows you how Google is analyzing your page and will give you insights on how you can fix it. At the top, you’ll see 2 tabs: one for Mobile and one for Desktop. You’ll notice that Google puts Mobile first. The usage is easy: just type in your URL and hit the Analyze button. They’ll then spit out your score, give you some other speed metrics, display a visual representation and “opportunities” on how you can improve your score.
GTmetrix
For additional speed analysis, go to GTmetrix. You’ll use it in a similar fashion, typing in your website address and clicking on “Test your site”. You’ll get a report card back with 2 grades, along with percentages. With this, you’ll get a list of recommendations to improve your page speed as well.
Between both of these tools you’ll have a good list of ways to improve your website’s speed but how do you actually do that? You could spend a lot of time optimizing your website for speed but these next steps will get you a good score on both sites, are quick to set up, and are easy to do.
As I cover each of these, I’ll share my PageSpeed Insights and GTMetrix scores for this website. Starting off, I had these scores:
- PageSpeed Insights: 11 Mobile Score, 41 Desktop Score
- GT Metrix: 57% PageSpeed Score, 69% YSlow Score
Optimize Your Images
If you have any images on your site, chances are that your images are the biggest culprit to your site loading slow. For my site, even though I had optimized my images within Photoshop before exporting, they were still adding almost 4 seconds to my page load!
Luckily, there are quite a few plugins that will optimize your image for free. Smush and ShortPixel Image Optimizer are both popular solutions but I actually prefer the Webcraftic Robin image optimizer plugin. With the free version, you can optimize all your images and can set all new uploaded images to automatically optimize based on the settings you enter. I personally go with the lossy compression mode and drop the EXIF data. I also have the main thumbnails optimized.
After optimizing the images, my scores jumped. Still though, my page didn’t start to display on Mobile until after 6.1 seconds!
- PageSpeed Insights: 47 Mobile Score, 78 Desktop Score
- GT Metrix: 85% PageSpeed Score, 74% YSlow Score
Caching Plugins
That’s a pretty good start! The next step will be browser caching and minimizing Javascript and CSS. Since I have the website hosted at Cloudways, the caching plugin Breeze was already installed so I just enabled and set up that plugin. Other good caching plugins include WP Fastest Cache, W3 Total Cache, and WP Super Cache. We’ve used all of these and they’ll provide similar functionality.
If you’re not familiar with caching, the idea is to create a compiled version of your pages with all the HTML, CSS, and Javascript already built so that the pages can load much faster. Visitors don’t have to wait for the server to render, or build, the page from all the different files each time that it is visited. Instead a copy of that page, already rendered, is displayed. If you want a heftier explanation, check out Amazon’s Caching Overview article.
For the Breeze plugin, I enabled the cache system, turned on Gzip Compression and Browser Cache. Since I know I’ll be minimizing the HTML, CSS, and JS files with a different plugin, I didn’t enable these features within Breeze. You’ll notice that my speeds didn’t improve dramatically with this step but I do usually see a significant jump in this step.
- PageSpeed Insights: 53 Mobile Score, 78 Desktop Score
- GT Metrix: 85% PageSpeed Score, 76% YSlow Score
Optimize Your CSS and JavaScript
Running a scan now, the largest opportunity within Google PageSpeed Insights, is to eliminate render-blocking resources. This refers to any CSS or JavaScript that has to load before the page can be displayed. Deferring the loading of fonts and unessential JavaScript (that doesn’t need to run immediately) can dramatically decrease your page load speed. In my case, it brought my initial display time down to only 3.3 seconds on mobile and 0.9 seconds on desktop. Now that’s more like it!
There’s a couple of plugins that do a good job with deferring render-blocking resources, most notably Autoptimize and Hummingbird. Both will also minimize HTML, CSS, and Javascript and will also lazy load images. I prefer Autoptimize and have found the following settings work best:
- Optimize JavaScript Code? Checked.
- Aggregate JS-files? Checked.
- Also aggregate inline JS? Checked.
- Optimize CSS Code? Checked.
- Aggregate CSS-files? Checked.
- Also aggregate inline CSS? Checked.
- Optimize HTML Code? Checked.
- Save aggregated script/css as static files? Checked.
- Minify excluded CSS and JS files? Checked.
- Under the Images tab, I turn on Lazy-load images.
- For Google Fonts (under Extra), I combine and preload in head.
With these options, I now have these respectable scores:
- PageSpeed Insights: 85 Mobile Score, 98 Desktop Score
- GT Metrix: 94% PageSpeed Score, 90% YSlow Score
Recap
Beyond what I’ve described, I could optimize the code further or save the images to a CDN, but I’ve found that these page speed optimization steps are perfect for most projects and don’t take that much time to implement. You may need to fiddle with some of the settings from site to site but the effort will be worth it to get those page speed gains, both for improved site traffic and better user experience.