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.
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.
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.
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
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
- 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
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.