Improving Loading Speed on a WordPress site: A Case Study

I was asked recently if I could provide a step-by-step walkthrough of improving page speed scores / loading times on WordPress websites. Okay, not so recently, but I got distracted and delayed in writing this guide. That said, here it is. A real-world example of how to speed up a WordPress website using the very tools we use.

Krista Smith of Activate Her Awesome has been a client / friend of ours for many years, and – when the subject came up – I asked her if she had an un-optimized website I could use as a case study. Sure enough, she did. Her main site, Activateherawesome.com, had no speed optimization at all. A perfect case study for us to use!

Here’s her site’s GTMetrix score before we did anything:

Well, that won’t do at all…

Step 1: Optimize images with an image processor like Imagify or Shortpixel. These are great tools which can use lossless or lossy compression to improve your image sizes dramatically. Typically I use the lossy options as there’s virtually no visual differences (unless, you know, you’re a professional photographer showing off massive resolution images). This can take a while if you have a lot of images. Krista’s site took about 3 hours to process. Here’s the results after:

The PageSpeed score improved significantly, but – more importantly – look at the Total Page Size; 3.5MB smaller than previously. That’s huge.

Next up…

Step 2: Install WP Rocket and enable all the settings in the Cache, File Optimization, and Media categories. Note: If your host uses HTTP/2 and your site is using SSL, do NOT enable the “Combine Files” options for CSS and JS. These are for older hosts that don’t support HTTP/2, which our servers all do.

The results?

Now that’s a dramatic improvement in both speed scores and a full second in page loading time. Beautiful!

But we still have an “F” on the score – “Serve Scaled Images”… What is this, and how do we tackle it?

“Serve Scaled Images” is basically saying that some of the images on the page – most in this case – are being loaded at a much higher resolution than they are actually being viewed. This can happen, for example, when you take a 1200x1200px photo and force it (through HTML or CSS) to display at 300x300px. Your computer (and network connection) still have to download the 1200×1200 picture. That might not seem overly burdensome, but imagine your website has 5-10 images on it, all being scaled down like this. For each picture on the site, you’re potentially loading significantly more data than you need to, and that’s going to slow things down.

Unfortunately there’s no magic pill for this one, but it’s not hard to fix! Go to each instance of an image and check out what size image it’s loading. If you’re displaying a picture at 500×400, the “Large” size would be appropriate. If it’s closer to / smaller than 300×200, then the “Medium” size would be best.

The results?

Google’s PageSpeed score is in the green and over 90%, and the total page size is less than a fifth of its original size.

This setup isn’t perfect; Krista found some fonts were broken, and a couple other odd Javascript issues. Those can be tackled by tweaking your WP Rocket settings. Every site is different, so some things need to be changed differently on every site.

Have any questions? Leave them in the comments below! Happy optimizing!