How to get a (near) perfect score on GTMetrix & Pingdom

What is site optimization?

Here, we’re talking about speed. It’s all about getting your site to load as quickly as possible. Google has an index measuring this (PageSpeed) and Yahoo has one (YSlow), and there are a few third-party sites available to test how well you’re doing in terms of optimization.

IMPORTANT: Don’t chase a perfect score. That really shouldn’t be the goal. There are tradeoffs to getting a perfect score on most sites, and often it’s just about how much you do on a page, at least to a degree. A blank html page would likely score perfectly. That’s not anyone’s goal though.

Here’s the overall, birds-eye view of the components that make a site “optimized” (and load much faster than it would otherwise:

• Reduce the overall size of the page, particularly when it affects load time. Videos and images further down the page can be lazy-loaded to reduce the perceived loading time, and to a large degree the real goal is user experience. Perceived load time is actually more important than what these third-party load speed tests will tell us. Images are usually the largest culprits here. An image loaded straight off of a camera might be 10-15 megabytes, and that one image is about four times as much bandwidth as my whole homepage takes to load! So keeping image sizes down is probably the single factor that will have the biggest impact.
• Reduce the number of requests the browser has to make to download the page. This can be done by combining various files into a single file (concatenation). However, it’s important to note that if you’re loading 50 images on a page, that will increase the number of requests by 50. You can’t optimize the number of requests except by removing images, and optimization ideally should not affect the content of a site unless there’s something truly wrong happening or there’s simply too much going on in a given page.

I rely heavily on, well, knowing what I’m doing, but also on the Imagify and WPRocket plugins, the latter produced by Jonathan Buttigieg and Jean-Baptiste Marchand-Arvier, and I think each of them has helped me a number of times with various feature requests and tickets (thanks!). These two plugins are both very easy to use, and they’re both full-featured. You don’t need 15 different plugins to optimize your WordPress website.

Best practices already being followed

There are a whole bunch. Here are some of the most important things that this site is already doing right that a lot of sites don’t:

• Using appropriate image sizes. This means using “large” images when a large image is actually needed, and not using the original-sized image when we’re only showing a small version of that. We’re allowing WordPress to do something it does very well and crop images to appropriate sizes for our actual usage. That’s noticeable on an archive where we display a bunch of those, like the blog page of this site.
• Loading scripts only when needed. All javascript files should be registered by themes and plugins (this tells WordPress where to find the files, for one thing), and then only loaded when they’re actually needed.
• Enqueuing scripts and styles the right way through WordPress. A lot of especially older sites were built by just sticking javascript in wherever they wanted. That makes minification harder. I’m lazy too, and from time to time, I’ll use inline javascript in cases where I need to initialize a javascript library with values that are location-specific, but generally speaking, you shouldn’t do that (there’s a better way called localization that I’m bad about using) and certainly you shouldn’t just enqueue things globally (you should never load javascript files for a particular task on every page, whether that need is there or not).
• Using a relatively light theme. I’m just using the Genesis Sample theme, modified to split up the main stylesheet into pieces so that things stay organized when I make changes to it. I’ve made a few other changes (this is my starter theme), but that’s the biggest one. And this is not a theme that tries to do everything.
• Use plugins that follow best practices. This one’s actually a pretty big deal. The worst culprits tend to be page builders, but load of plugins out there just don’t use best practices, and they can trash the performance aspects of your site.

Before optimizing

Here’s the “before” look, using GTMetrix and Pingdom. Do note that images were already optimized with Imagify before I ran this test (I typically optimize those as I’m developing a site), and I use essentially their default settings.

• GTMetrix: This is already showing a site that’s reasonably well optimized. I’m not using a lot of heavy javascript here, my styles are relatively minimal, and images are pretty well optimized. Gzip compression is already enabled (I’m on a Flywheel server, and this is using their built-in cache, which does a very good job for taking zero effort to set up.
• Pingdom: This is showing a load time of only 300 milliseconds. I don’t buy it. I’m not sure what’s going on with Pingdom, but I don’t believe the results they’re showing me today. They did load the site – I see about the right number of resources being loaded, and the waterfall looks like everything’s there … but 300 milliseconds overall load time isn’t right. It’s as if Pingdom is ignoring the video background and the image for some reason, because it’s only showing a page size of something like 380 kilobytes (the reality is that the home page is about 4.3 megabytes).

After setting up caching with WP Rocket

Luckily (and this is because there are so many best practices I’ve been using over time that are done correctly) I was able to essentially just enable everything on WP Rocket. That means I could do all of the following:

• Minify all HTML, CSS and javascript on the site (minification). Less white space means smaller files. Minifying these things removes all of the white space. If your javascript or CSS is poorly written, then sometimes you’ll see this cause issues.
• Combine all CSS and javascript on the site (concatenation). Less individual files the browser has to download equates to faster load times.
  
• Lazy Loading: this is the practice of only loading images, videos, and iframes when they’re actually needed, when you scroll to a place where you can see them. I actually took off lazy loading for images, as I don’t like the way lazy-loaded images sometimes have a white flash when they’re overlaid on top of a colored background. So this is actually disabled right now.

And here’s the “after.”

• GTMetrix: Shows just three errors. One is the wide image on the home page (GTMetrix thinks it can be optimized just a tad more, but 7 kilobytes is not going to affect load time at all. The other is fully intentional. Also, the jquery library is not being deferred to the footer, and that’s just in case I install a plugin at some point that uses inline jquery. I’d rather that not break anything, so we’re loading something like 80 kilbytes of data a little while before we absolutely have to. Lastly, there’s not an appropriate expires header being added to one stylesheet, but it’s the Google font that I’m using (and therefore I can’t control the expires header). In short, this is about as close as it’s possible to get to a perfect score, at 98 on the PageSpeed scale and 98 on the YSlow scale.
• Pingdom: Shows basically the same thing as before. I think they’re having an issue today. Still is definitely loading the site (I can see everything I expect to see), but the home page on a first load just isn’t loading in 300 milliseconds. Pingdom’s wrong.

I should probably also note that this is the home page, and it’s just kind of a heavy page (I’m loading background video, after all). If I’m loading another page on the site, say the Services page, then the results look even better:

Have questions? Suggestions? I’d love to hear about them. If there’s something I didn’t include in this little walkthrough, then please let me know in the comments.