• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

We’re currently booked and will be ready for new projects in late April 2023.

Questions? Call 254.340.0086 or send an email to [email protected].

Elodin Design

WordPress Design & Development

  • About
    • About Jon
    • Why ‘Elodin Design’
  • Websites
  • Services
  • Process
  • Blog
  • Repos
  • Contact

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

January 31, 2019 by Jon Schroeder Leave a Comment

Table of contents

  1. What is site optimization?
    1. Best practices already being followed
      1. Before optimizing
        1. After setting up caching with WP Rocket

          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).
          The summary on GTMetrix of the "before" view of the site.
          “Before” view of the GTMetrix site summary. This site really isn’t in bad shape, but with a bit of tweaking, pageloads can feel almost instantaneous.

          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.
          The summary on GTMetrix of the "after" view of the site.
          This is the “after” view of the GTMetrix score.

          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:

          GTMetrix report for the services page
          The Services page report from GTMetrix

          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.

          Reader Interactions

          Leave a Reply Cancel reply

          Your email address will not be published. Required fields are marked *

          Primary Sidebar

          About the blog

          I’ve always been exceptionally bad at actually sitting down and writing blog entries, so do me a favor – please feel free to comment or drop me a line if you have something you’d like me to write about (or just to say hello).

          Browse by category

          • Advanced Custom Fields
          • Gutenberg
          • Perspective
          • Tutorials & how-to guides
          • Updates

          Centered and full-justified text on the internet

          How to add contextual styling in the Gutenberg editor

          User interface is really important

          How to connect Gravity Forms with Salesforce web-to-lead using Gravity Forms’ Webhooks addon

          Reviewing SpinupWP and why I closed my account

          Ready to get started?

          There’s no pressure. If you’re interested in building a site, please feel free to reach out – and I’ll talk through your project with you and give you some pointers even if we don’t end up working together.

          Reach out

          Elodin Design, Inc. (formerly Red Blue Concepts)
          Website design & development · Custom WordPress theme and plugin development
          3305 Fox Hollow Circle, Waco, TX 76708 · (254) 340-0086
          Copyright © 2023 · All rights reserved.

          This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
          Privacy & Cookies Policy

          Privacy Overview

          This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
          Necessary
          Always Enabled
          Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
          Non-necessary
          Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
          SAVE & ACCEPT