PageSpeed Says My Site Needs More Work

So, you’ve run the EWWW Image Optimizer on all your images (or another IO plugin) and PageSpeed Insights (or GTMetrix, WebPageTest, etc.) still says you need to do more with your images (or CSS, or JS, or who knows what else)? What do you do next?

Look, you could just use our Easy IO CDN, even Google recommends using an image CDN... Our Easy Image Optimizer service is intended to solve the major image optimization problems recognized by most performance testing sites:

Compress your images
Properly scale/size your images
Defer off-screen images (lazy load)
Use next-gen image formats (like WebP and AVIF)

If you're using Easy IO, and still getting any of these recommendations, we've summarized the important bits for Easy Image Optimizer in a separate article.

I'll attempt to keep this as short as possible, but you can dig a little deeper with this article.

How Reliable are Performance Tests?

To be clear, there are multiple problems with testing sites like PageSpeed Insights, and you're probably doing it wrong anyway.

First, you can test the same site multiple times and get different results. Sometimes they'll say your images need work, then they say it's all good. Your score is 50, oh wait now it's 90! Oh, hold on, it's only 70 now...

Worse, if you run some of Google's sites through their own tests, like web.dev or developers.google.com, you'll find they don't do so well:

So... what do they know that we don't?

Testing sites can help you find ways to make your site faster, but they often fail to validate improvements you've made. PageSpeed Insights is probably the worst about this, so I generally use GTmetrix instead, even though it is owned by one of our "competitors".

If you want to see what real-world performance data is being used by Google for search, use their Search Console and take a look at the Core Web Vitals section.

None of this definitively tells you how fast a site actually is. So, I always double-check things myself. It's quicker, pretty easy, and I made a video to show you exactly how to check your site speed:

Doing it Right

There are two very important things to keep in mind when/if you do run a speed test with GTmetrix (or anything else):

Test Location

One big reason I prefer GTmetrix over PSI is the ability to choose the test location. Your site's speed is relative to the data center where your website is hosted, so it is important to choose a location near where your site is hosted—ask your web host if you don't know where they host your site.

Choosing a test location also has implications for CDN caching, which is especially important for Easy IO. You want to be able to repeat your tests from the same location every time, so that you are eliminating as much variability as possible.

Always Test Multiple Times

Your site should have some sort of caching, either plugin or server-based, to make your site as fast as possible. If you only test a page once, you're probably getting an uncached result. So at a minimum, you need two tests to make sure you're getting the best speed your site is capable of.

When you use a CDN, like Easy IO, it can take multiple requests to "prime the cache". You can check the headers on GTmetrix to see if the cache is in full effect. I go into that in more detail in our article on testing Easy IO.

About those recommendations...

Now that we know how to test a site properly, how do we make sure we've got all the right settings in EWWW IO?

Remove Metadata

This option is on by default, because hidden metadata can really bloat your images, with anywhere from 10%, all the way up to 90%, of an image file used by metadata.

Lossy Compression (Efficient Encoding/Increase image compression factor)

It's important to know, that all testing sites expect you to use lossy compression instead of lossless, which involves at least a tiny amount of quality loss. Realistically, PageSpeed Insights will bug you until every single image on your site is using WebP or AVIF, regardless of whether that would actually make your images smaller.

Using our Premium compression, you can achieve 45-55% savings (average) and it is better quality than either WebP or AVIF. Simply activate your API key in the EWWW Image Optimizer plugin, and Premium-level compression will automatically be enabled.

Or, you can...

Use next-gen/modern image formats (like WebP and AVIF)

All major browsers support WebP and it can achieve around 40% savings. We've documented various configurations and setups here. Short version, turn on WebP Conversion, run the bulk optimizer, and pick a WebP delivery method. If you'd like AVIF, use Easy IO, plain and simple.

Images "somewhere else"

If a performance test is flagging images that are not part of your Media Library, you can add extra image folders in the EWWW IO Advanced Settings.

First enable Ludicrous Mode, and then head over to the Advanced tab. Then, add any folders that need to be optimized in the (aptly named) Folders to Optimize setting.

Once you’ve saved the extra Folders to Optimize, you should run the local/bulk image optimizer to get those images optimized. Once that has completed, you can turn on the Scheduled Optimization setting to regularly scan said folders for new images.

Defer off-screen images (lazy loading)

Lazy Load is built into WordPress, but EWWW Image Optimizer features one of the most comprehensive lazy loading features available. There are two main reasons to use EWWW IO for lazy loading instead of anything else:

It can lazy load any image, even CSS background images. If you have background images in external CSS, you'll want to install SWIS Performance to allow EWWW IO to wrangle those.
It can help you solve issues with image sizing with the built-in Automatic Scaling. Unfortunately, the stock markup in WordPress doesn't always work very well, so we can check the page before loading an image to see exactly what size it needs to be.

Which is a perfect segue to...

Images need to be properly sized, or serve images with responsive size

This basically means your images are too large for where they are being displayed. EWWW IO has a few tools to help you handle this, but the first one is the Automatic Scaling option I just mentioned.

With Lazy Load and Automatic Scaling enabled, any image that already has responsive/srcset markup will be auto-sized by EWWW IO. If an image doesn't use responsive markup, you can use Easy IO along with the auto-scaler to get the exact right size.

Additionally, EWWW IO has an option on the Resize tab that lets you highlight images that might need resizing (Resize Detection).

Beyond EWWW IO, you can often just select a more suitable size (medium, thumbnail, etc.) from the image block settings (in the page/post editor). If you don't already have a suitable size and these are images from your Media Library, you can add additional size variations with the Simple Image Sizes plugin.

As a last resort, you can also use the built-in image editor to scale or crop your image(s) to the expected size.

Anything else?

Testing sites are constantly changing, and it seems like they always find more work for all of us to do. If you run into anything else we missed, or have more questions, let us know!

Happy Optimizing!