PageSpeed Insights Recommendations

PageSpeed Insights recommendations are a bittersweet aspect of web performance optimization. 

They are indeed wonderful suggestions to help improve the performance of your website.

However, a PageSpeed report can contain a number of recommendations that can cause confusion and make you feel at a loss with questions like:

What do PageSpeed recommendations mean?
How can I fix PageSpeed warnings?

Every PageSpeed Insights report includes a series of recommendations and warnings, divided into two main categories:

  1. Opportunities
  2. Diagnostics

The Opportunities section focuses on performance metrics that could improve page loading time.

The Diagnostics section, on the other hand, focuses more on the best practices for web development that should be implemented into the analyzed page.

In this guide, we’re going to walk you through the most common PageSpeed Insights recommendations: we’ll explain them in plain English and then we’ll see how to fix them or, at least, how to put them into the right context.

PageSpeed Insights recommendations: Opportunities

With the Opportunities section, PageSpeed Insights wants to give you advice on the performance metrics that could help your page load faster.

Every recommendation is accompanied by the estimated time savings that you could gain by implementing the suggested fix.

Opportunities tab in PageSpeed
Example of the Opportunity section: removing unused CSS could make this page gain 0.45 seconds of loading time.

Let’s see which are the most common PSI recommendations in this section and how to approach them.

Eliminate Render-Blocking Resources and Defer Unused CSS

With this recommendation, Google wants you to remove or defer JS and CSS files that interfere with loading the above the fold content of your webpages. 

Above the fold content is the content your users see as soon as they open the page, before they start scrolling.

To understand what PageSpeed means when it asks you to eliminate render-blocking resources (be it a script or a stylesheet) or defer unused CSS, we have to understand what a render-blocking resource is.

From WP Rocket’s documentation:

Before the browser can display a web page, it has to render its HTML.
During this process, whenever the browser encounters an element that references a script, or stylesheet, it has to stop, request the file, wait for it to download from the server, and execute it before it finally can continue parsing the HTML.
With most WordPress themes and plugins loading not only one, but multiple CSS and/or JavaScript files, this process can delay the time to first render of the page quite significantly.

While some CSS and JS resources have to be downloaded and processed before displaying anything on the page (they are the so called critical resources), some others can be postponed and loaded in a second time without any issue nor user experience loss.

This is also the case of the so called unused CSS, such as stylesheets that might be needed after the page is loaded, i.e. the CSS of a modal window appearing only after clicking a specific button.

Deferring the loading of non-critical resources or of unused CSS, and make them load after the browser has rendered the page, is a good practice to save a few (milli)seconds of loading time.

So, how to defer the loading of render-blocking JS/CSS and defer unused CSS?

Manually approaching this tweak might be a bit tricky, since it involves digging and editing your code. If you prefer to proceed programmatically, here’s an example of how to remove render-blocking JavaScript and one about eliminating render-blocking CSS

The easiest solution is to use a plugin like WP Rocket!

Our plugin includes two options that will help to fix PSI recommendation:

It’s worth noticing that, sometimes, it can be very difficult (if not impossible) to completely eliminate all render-blocking CSS and JS. The possibility to achieve this result will highly depend on how the theme and plugins you’re using on your WordPress site are coded.

If you didn’t code your website from scratch yourself, and you’re instead relying on a theme and plugins other developers wrote, you simply have to accept that you can’t have 100% control over them.

It’s ok to not defer ALL your CSS and JS render-blocking resources, since sometimes this process can lead to a broken page (and that’s way worse than a “red score“ by Google PageSpeed Insight!).

Reduce Server Response Time

If your server is responding slowly to users’ requests, the overall user experience of your site will be affected.

As we already mentioned in our guide about slow loading times, a fast server is a fundamental element of website performance.

When Google PageSpeed asks you to reduce server response time, it’s basically referring to the indicator known as Time to First Byte.

We already addressed this topic with our guide: Time to first byte: how to test, interpret and reduce it!

Minify CSS and Minify JavaScript

These two recommendations are related to one of the most popular code optimization techniques: minification.

Minification is the technique that makes HTML pages, CSS and JS scripts less readable (for humans, of course) but faster to load!

This method removes all unnecessary characters, markups, spacing and comments that developers tend to add to web pages and script files.

Developers in fact may need comments, markup and spacing to make pages and scripts more readable during their development process. 

But when their masterpiece is over and the website is online, all those additional elements become redundant: they increase network traffic, and burden the bandwidth of network requests.

That’s when minification comes handy: it makes the code leaner, so the final user will receive it faster and the overall load time will improve.

So, how can you minify CSS and JS files?

There are two ways to minify your CSS and JavaScript:

To know how you can manually minify your files, have a look at our guide: Best CSS and JS Minification Tools.

To automatically take care of minification, and forget manual tweaks, you can use a WordPress plugin.

There are many efficient minification plugins on the market, but, again, WP Rocket could be the perfect solution for you! 🚀

Our plugin includes both CSS and JS minification, as well as CSS and JS combination:

Minify and Combine CSS Files

Minify and combine CSS files with WP Rocket

Minify and Combine JS Files

Minify and combine JavaScript files with WP Rocket

As already mentioned for the note about eliminating render-blocking resources, minification and combination are advanced features that can sometimes break the layout of your pages.
It always depends on the code of the theme and other plugins you’re using: some JS or CSS files might be incompatible with minification, so you should always keep your eyes open when you implement this technique.

Check out our documentation to understand how to fix potential issues related to minification/combination.

Multiple Page Redirects

301 redirects are indeed crucial to notify your browser that a HTTP request is coming from a different source location and avoid 404 errors; but when redirects pile up, they tend to slow down your pages.

PageSpeed Insights considers redirects as a problem when a page contains more than two of them.

The ideal solution would be, of course, to update the original links to the redirected resources.

Enable Text Compression

With this recommendation, PageSpeed Insights is asking you to enable GZIP compression.

As Google explains:

Text compression minimizes the byte size of network responses that include text content. Less bytes downloaded means faster page loads.

GZIP compression is a very popular and effective method to speed up your WordPress site, because it reduces the total size of the pages and improves time to first paint.

Everything you need to know about implementing GZIP compression on your WordPress site, is included in our guide!

Preconnect to Required Origins

This PageSpeed warning appears every time you have third-party content on your website (e.g fonts loaded from Google, or a video from YouTube), and you’re not prefetching their correspondent DNS resolutions.

What Is DNS Prefetching?

Here’s a definition from our guide about the differences between preload, prefetch, and preconnect:

With prefetch, you can tell the browser to fetch resources you think the user might need later as part of a future navigation or interaction, if the user takes the action you’re expecting. These resources will then be fetched at the lowest priority in the browser, when the current page is done loading and there’s bandwidth available.

In particular, with DNS prefetching you can tell the browser to perform DNS lookups on a page while the users are browsing it: when the external resources get requested, the DNS resolution would have already been processed, reducing the latency.

Prefetching DNS requests can give your loading time a minor boost, and you can easily apply it (and make PageSpeed happy) with WP Rocket:

How to prefetch URLs with WP Rocket

Preload Key Requests

This warning refers to the Critical Rendering Path (CRP) optimization strategy.
CRP is useful to prioritize some resources before others, and decide their loading order.  

In this way, the browser can load a page faster.

To fix this PSI recommendation, you should declare preload links in your HTML, so the browser knows that it has to download critical resources as soon as possible.

WP Rocket allows you to take care of this warning for CSS files only: by enabling the Optimize CSS Delivery option, WP Rocket adds the rel=”preload” attribute to CSS files.

How to optimize CSS delivery with WP Rocket

More info on how WP Rocket manages critical CSS, here.

Defer Offscreen Images

Offscreen images are those that don’t appear when the user opens a page. They are the so-called below-the-fold images.

Since users can’t see them when they load a page, there’s no point in downloading them as part of the loading process.

With this recommendation, PageSpeed is asking you to defer the loading of offscreen images at a later stage, namely when the user scrolls the page and requests the below-the-fold content.

To defer offscreen images, you can LazyLoad them.

LazyLoad is a technique that allows you to defer image loading (to know more about LazyLoad and how to apply it to your images, read our guide).

You can manually lazyload your image files, or use a plugin instead.

If you opt for this second option, you have two great alternatives:

LazyLoad standalone plugin by WP Rocket
LazyLoad option in WP Rocket settings

By choosing one of the two, PageSpeed Insights will be satisfied and it should fix the warning about offscreen images not deferred.

Just keep in mind that, as far as WP Rocket’s LazyLoad is concerned, not all images can be lazyloaded at the moment, e.g. background images that are loaded from stylesheets.
To learn where this exceptions apply, have a look at our documentation.

Properly Size Images

Mastering the art of image optimization is something that you can easily learn.
It will allow you to gain a huge improvement in page speed, and Google PageSpeed will definitely notice it rewarding you for this!

To properly size and optimize your images, you should follow a few steps that we extensively described in our guide on how to compress your images and reduce their file size.

Efficiently Encode Images and Optimize Images

Image encoding is the process of saving images in a more efficient and compressed format.
Optimizing images is the set of measures required to make your images load faster, such as:

To take care of your image optimization strategy with a unique and efficient tool, you can use our free tool Imagify. It will help you to work on your files and fix the majority of PageSpeed warnings concerning images.

Serve Images in Next-Gen Format

With this recommendation, PageSpeed is asking you to use more modern image formats, like JPEG 2000, JPEG XR and WebP.

These image formats are superior to their “older” siblings, JPEG and PNG images, in terms of quality and compression features: they are able to load faster and consume less mobile data.

Our image optimization plugin Imagify is able to convert images to WebP formats, so don’t hesitate to take advantage of it!
WP Rocket is also going to provide WebP support very soon (it will be added to one of our next major versions).

PageSpeed Insights recommendations: Diagnostics

All the recommendations included in the Diagnostics section focus on performance and on the best practices that can help improve it.

Diagnostics Tab in PageSpeed Insights

Let’s see which are the most common PSI recommendations in this section and what you can do to fix them.

Ensure Text Remains Visible During Webfont Load

This PSI warning concerns the loading of web fonts, which are often large files that slow down pages a lot.

Some browsers, while waiting for fonts to load, hide text in the page, producing the effect known as the “flash of invisible text”.

But this solution doesn’t facilitate user experience: the ideal solution, in this case, would be let users immediately see the text using a system font.

This will produce the so-called “flash of unstyled text” effect: but defaulting to a system font will make the browser save important loading time, since it will be using a font it already has in its system.

Once the web font you originally chose will be completely downloaded it will be visible to the user; nobody will have to wait staring an invisible text on the page, if you opt for a “flash of unstyled text” solution.

WP Rocket 3.3.5 introduced support for Google Fonts using the “swap” font-display property:

This means that, if you’re using Google fonts, WP Rocket will help to take care of the “flash of unstyled text” effect.

Combine Google Fonts Files in WP Rocket

Combine Google Fonts is enabled by default upon activation.
To learn more about web fonts optimization, you can read our guide.

Minimize Main-Thread Work and Reduce JavaScript Execution Time

These recommendations have to do with the use of JS scripts, and its impact in the load performance of your pages.

JS comes at a high cost for your website: once downloaded, it has to be “read” and “understood” by the browser (parsed and compiled) and is then executed within the browser. The more JS there is on your page, the more time the browser will need to parse, compile and execute it.

As per the note about “Minimize main-thread work“, this is how PageSpeed defines it:

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.

To reduce JS execution time and minimize main-thread work, you have to remove the JS that is not needed in the page by disabling plugin or theme JS files from loading on the page.

You can use specific plugins that can help you remove unwanted JS from your pages, such as:

Use them carefully and consult with their developers and/or documentation before using them.

Serve Static Assets with an Efficient Cache Policy

A cache policy is the set of steps to put in place to make sure your pages are cached and load fast.

As we already saw in our guide about load time and caching, there are several layers of cache available that you should audit and apply, whenever possible, to your site: page caching, server-side caching, object caching and browser caching.

When Google PageSpeed asks to serve static assets with an efficient cache policy, it’s referring to browser caching.

To learn how to tackle this warning, you can read our guide on how to correct the static cache warning in PageSpeed.

If you’re using WP Rocket, you don’t have to worry about this: our plugin automatically applies the necessary Expire headers in the htaccess file.
If you’re using an NGINX server, you won’t have the htaccess file, so the above mentioned headers won’t be applied. However, WP Rocket works out of the box on NGINX servers: here you can find more info about it.

Avoid Enormous Network Payloads

Here PageSpeed is asking you to reduce the number of network requests.

Network requests have a high impact on page load speeds but they also affect user experience, bounce rate and SEO.

To fix this warning and reduce the amount of HTTP requests on your site, you can follow our guide.

Avoid Excessive DOM Size

DOM elements are all the tags on a page (like DIV, HTML, BODY, etc.).

According to Google’s Web Developers Guide, an optimal DOM tree includes these characteristics:

Generally speaking, to reduce an excessive DOM size you should review themes and plugins you are using: you could do so by directly addressing the design of your site or asking for help to a developer.

Minimize Critical Requests Depth

This note refers to the Critical Request Chains, that is the list of resources which are loaded with a high priority on a page. This is not an audit that you’re meant to “pass” or “fail”, but if you address it you’ll be able to improve page load performance on your site.

PageSpeed Insights suggests to tackle this audit by “reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load“.

With WP Rocket, you can improve the Minimize Critical Request Depth factor by removing render-blocking CSS/JS; this means enabling the options that we already presented above:

Wrapping Up

In this article you learned how to interpret and address PageSpeed Insights recommendations filed under the Diagnostics and Opportunities sections.

Remember that the most important thing when dealing with PageSpeed, is to consider its recommendations as a powerful tool to improve the performance of your site. They are not, by any means, an indicator of the real speed of your pages.

By learning to interpret its warnings, you’ll be able to audit your website’s health and to understand when PageSpeed recommendations are worth addressing.

Now it’s time to go ahead and learn about other aspects of this fundamental web performance testing tool:

Author's avatar

Alice is a content writer with strong experience in international customer service and empathic communication. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps. You can follow @Alice_Ridice on Twitter.

1 comment

Hello,
Is there any way making lazy load working only for mobile phones?
Destop users have usually fast internet and I don't want to use lazylaod there but in mobile phone where pages get extra long because of stacking elements would be perfect. Checked all your documentation but didn't find anything abut that... Hints or small code for that?

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}