PageSpeed Insights Tips

Have you tested your website with Google PageSpeed Insights, but have no idea how to fix the issues it finds? These are some tips and methods I’ve found that works great on almost any WordPress website.

Before I begin, if you’re running ads with Adthrive or Mediavine, set them to be deferred. This will take all the issues they can create for PageSpeed Insights out. Test again, and see what you’re left with. You’ll thank me later. (Little to no RPM decrease from everyone I’ve worked with on page speed fixes).

For Mediavine, this is in your Mediavine Dashboard > Settings > Ad Settings > Optimize Ads for PageSpeed (check both boxes, mobile and for desktop).

For Adthrive, I don’t have a screenshot, and I’ve not ever logged into their dashboard, but I know it’s an option to defer ads for PageSpeed scores.

The main issues I see when I’ve worked on fixing site speed for websites are these:

Opportunities

Serve images in next-gen formats
Eliminate render-blocking resources
Efficiently encode images
Properly size images
Lazy-load images
Enable text compression
Preconnect to required origins

Diagnostics

Minimize main-thread work
Ensure text remains visible during webfont load
Reduce the impact of third-party code
Reduce JavaScript execution time
Serve static assets with an efficient cache policy

These issues certainly are not all the possible ones found by PageSpeed Insights, but they are the main ones.

How to fix PageSpeed Insights Issues?

First, let’s talk about image related issues.

Serve images in next-gen formats

Also can be fixed by this process:

Efficiently encode images
Properly size images
Lazy Load images

Google says “Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.”

The trouble with this is, most image editors like PhotoShop or PicMonkey don’t offer a way for you to save your images in these formats. In addition to this, WebP, one of the more popular formats, is still only supported in some browsers. Meaning you have to have a way to display a fall back image.

Use a plugin

There are several plugins that can help with this. Shortpixel and Imagify are both great, but do have extra fees associated with them.

Fix it manually

If you’re up for an extra step in your image process, I recommend just running your images through the Squoosh tool from Google. It’s actually super simple, and you really don’t have to change any settings to get great results.

Often times it will reduce your image size by 90%, while keeping the quality nearly the same. As I’m building websites, this is what I use on images before uploading to the Media Library.

Using the “MozJpeg” default option will save the image with a normal .jpg file extension, but it will pass the “next-gen format” requirement from PageSpeed Insights

Bulk image fix?

You can’t bulk upload to Squoosh, but the process is so fast that it shouldn’t be too bad to upload the images for your posts or pages as you’re building them.

If you’re needing a bulk fix solution, then you’ll want to use one of the plugins I mentioned previously.

Properly size images

This really isn’t an issue too often, since WordPress will resize, and use dynamic image delivery to fix this completely. However, it’s good to be aware of the sizes you’re uploading, and to not upload too large. 900 to 1200px wide is typically more than enough for most images, especially if a sidebar is on the page/post.

Getting images under 100kbs is a good goal to have.

Eliminate render-blocking resources

One word. Autoptimize. This plugin fixes so many issues with HTML, CSS, and JS. The features it has are also covered by some caching plugins, so you could get away with only one plugin here. I’ll talk about caching options in a minute.

Autoptimize offers these fixes:

“It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts (optionally) to the footer. It also minifies the HTML code itself, making your page really lightweight.” – Autoptimize’s plugin page

Concatenates? Yep it does that. What does that mean? Well, when you have a WordPress website, you’ll have your theme, sometimes a child theme, and then multiple plugins. Each of these will typically have their own CSS and JS files they are loading.

This can mean that your site is loading 10, 20, 30???? CSS or JS files. Autoptimize takes these individual files and combines them into (concatenates into) one CSS file, and one JS file. This can greatly improve load time.

They do offer pro features, but I’ve not yet ever needed them. The only add-on they offer which can be helpful is the Critical CSS plugin. It’s not a must, but it may be what your site needs to speed up another few points.

The idea behind “critical CSS” is that only some of your CSS is needed to load that first page view. You know, the “above the fold” or “before you scroll/swipe” view of your website. This feature will load only what is needed for this, and then load the rest later.

Website Caching

Properly setting up a caching plugin can solve a lot of issues, even some that Autoptimize solves. For example WP Rocket offers the same type of concatenation and minification (removing spaces in the code) that Autoptimize does. WP Rocket also has image lazy loading options.

WP Rocket is a paid plugin, but it’s great. If you’re looking for how to set it up, best option configuration, I can do a post on this later. Let me know.

Some other great options for caching are WP Super Cache, HyperCache, Comet Cache or KeyCDN’s Cache Enabler.

Test more than just your homepage

Running PageSpeed Insights on your homepage URL only, doesn’t test your whole site, it’s only testing your homepage.

Does this mean I have to test every page !?!?!?

Short answer: no.

Longer answer: You should test your most popular content on your site individually, and fix any addition issues that pop up.

Most fixes you do will apply globally to all pages on your website, but since every page is unique, and will have their own images, you will likely have to spot check and fix things.

The most common spot check issue I see are related to images, and their need to be optimized on that page. If you bulk optimized using ShortPixel or Imagify, you likely won’t see this issue.