PageSpeed Insights Guide PDF

PAGESPEED INSIGHTS
BY GOOGLE:
The 2020 Guide
wp-rocket.me
PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE 1
Founded in 2014 in France, WP Media is a distributed company of more than 20 WordPress
lovers living in the four corners of the world. We develop plugins that make the web a better
place — faster, lighter, and easier to use.
Check out our two main plugins:

• WP Rocket integrates more than 80% of web performance best practices automatically to
reduce your website’s loading time.
• Imagify reduces image file sizes without losing quality. By compressing your images you speed
up your website and boost your SEO..
2 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

Table of content
PageSpeed Insights by Google:
The 2020 Guide
INTRODUCTION
Why a Book About PageSpeed Insights by Google?
CHAPTER 1
PageSpeed Insights by Google: an Overview
CHAPTER 2
What is PageSpeed Insights and How Does It Work?
CHAPTER 3
Why you Shouldn’t Care About Google PageSpeed Insights
Scores
CHAPTER 4
PageSpeed Insights Is Now Powered by Lighthouse:
How to Read the New Audit?
CHAPTER 5
How to Address Google PageSpeed Insights
Recommendations
CHAPTER 6
How to Use WP Rocket to Improve Your PageSpeed
Insights’ Scores
Why a Book About
PageSpeed Insights
by Google?
When it comes to measuring your page speed, there are plenty of testing
tools to choose from. Some of them are very intuitive, others go deeper and
provide tons of metrics.
From PageSpeed Insights to GTMetrix, Pingdom, or WebPageTest, you’re
spoiled when it comes to the choices that are available.
Nonetheless, it’s undeniable that most of the people approaching page

speed monitoring for the first time will most likely turn to PageSpeed Insights
by Google.
In this book, we’re going to focus on this super popular tool.
We’ll show you how to use it and understand its results, and how to fix its
most common recommendations. We’ll also suggest some alternative
testing tools.
At WP Rocket, we firmly believe

that optimizing the web
performance of your site is not
something that should be left
in the hands of a single tool.
There are a number of excellent
and free performance testing
tools so take advantage of them.

1
CHAPTER 1
PageSpeed Insights by Google:

An Overview
Google launched the first version of PageSpeed Insights around 2013. They
wanted to provide a tool for performance analysis and make it usable for a
broader audience.
For this purpose, they built a tool that returns a performance score and provides
suggestions on how to improve it. Auditing is available for both desktop, and
mobile devices.
What is PageSpeed Insights?

Over the years, PageSpeed Insights (also referred to as PSI) evolved to become
one of the most popular performance testing tools.
Its scores are easy to read, and its suggestions are useful to understand what can
be improved on your site.
This PageSpeed Insights 2020 Guide will take you through the secrets of this
essential tool, and will show how to make the most of it.
PageSpeed Insights Scores: How to Read and Understand

Them Fully
The scoring system at the core of PageSpeed Insights is probably one of the
reasons it became so popular.
Getting a grasp of the health state of your website is effortless with PSI:
• The green check means that everything is okay.

• The orange circle means that something requires some attention.
• The red triangle is the dreaded symbol that indicates something is not working
as it should.
Since the end of 2018, PageSpeed Insights is powered by another tool from the
Google family: Lighthouse.

PAGESPEED INSIGHTS BY GOOGLE: AN OVERVIEW
While the scoring system didn’t change its appearance, several under-the-hood
mechanisms modified the way a PSI report should be read.
That’s why we dedicated a chapter of this ebook to how to read the new
PageSpeed audit powered by Lighthouse.
On the other hand, we can’t stress this enough: it’s imperative to use PageSpeed
Insights as only one of the tools to assess the health of your website’s performance.
PSI scores shouldn’t give you headaches. They’re not a universal truth.
In our chapter about why you shouldn’t care about PageSpeed scores, you’ll
understand why.
How to Fix the Most Common PageSpeed Recommendations

A PageSpeed report usually contains several suggestions. But, if you don’t feel
comfortable with the technicalities of website development, they can cause
confusion, and make you feel at a loss.
In the chapter dedicated to Google PageSpeed Insights recommendations

explained in plain English, we provide the basis to understanding the most
common PSI suggestions.
We’ll see how to interpret their meaning, what the easiest fixes are, and when
you shouldn’t worry too much about them. Above all, you’ll understand why
getting a 100% PageSpeed Insights score may not be a realistic expectation.

1
CHAPTER 2
What is PageSpeed Insights and

How Does It Work?
One of the most frequent questions our Customer Support team receives here
at WP Rocket is “How can I get a 100/100 score with PageSpeed Insights?”.
How many times, while measuring your website speed, have you asked yourself
a similar question?
There’s no doubt that PageSpeed Insights by Google is one of the most

internationally used page speed measurement tools, and for good reasons.
The Google team has always been on the front line of web performance
optimization and tooling. Over the last ten years, they developed a series of
performance tools dedicated to different types of users: from developers to
marketers to amateur website owners, there’s a Google tool suitable for every
need!
At the moment, we can count on the following performance

tools developed by Google:
•  PageSpeed Insights, which analyzes your pages then generates suggestions

to make them faster;
•  Lighthouse, which collects modern performance metrics and insights on
developer best practices;
•  WebPageTest, a complete performance, and optimization tool diving into
performance stats on real devices;
•  Chrome DevTools, the set of developers tools built into the Google Chrome
browser;
•  TestMySite, the tool dedicated to performance testing on mobile devices;

WHAT IS PAGESPEED INSIGHTS AND HOW DOES IT WORK?
Google’s paternity allowed PageSpeed to rapidly gain a high reputation since its
launch in 2013.
However, the perfect speed test tool doesn’t exist: so PageSpeed Insights
shouldn’t be considered the only voice of truth, but a good ally for your web
page performance assessments, along with other equally valid tools.
With this guide, you’ll get to know PageSpeed Insights from its core; you’ll
understand how its famous score system works and what exactly does it
measure.
What is PageSpeed Insights by Google?

PageSpeed Insights (PSI) measures the performance of a page on both mobile
and desktop devices, and then provides suggestions to improve that page.
PageSpeed Insights is powered by Lighthouse since the end of 2018. This means
that the results in your PSI reports are based on the Lighthouse API. We’ll analyse
the meaning of it in Chapter 4.
When scanning a page, PageSpeed provides two types of data about it: Lab
and Field data.
Lab data is collected in a controlled environment, that is with a set of predefined

devices and network settings. It’s effective for debugging performance issues,
and its testing can be easily reproduced.
However, it might fail in catching real-world bottlenecks.
On the other hand, Field data (also called Real User Monitoring or RUM) includes
performance data coming from real page loads. It’s effective to capture true, real-
world user experience, but the set of metrics is limited as well as its debugging
potential.
What Kind of Information Does PageSpeed Provide About Your Site?

When you ask PageSpeed Insights to analyze a page, it will return different
sections and indicators about the performance of that page.

In order of appearance:
Speed score
Field data
Field data is based on real-world Chrome users experience over the last 30 days: it
includes First Contentful Paint (FCP) and First Input Delay (FID).
Lab data
Lab data is based on a Lighthouse analysis on an emulated mobile device and

mobile network. See the next chapter for the details of the metrics included in this
section.

Opportunities
The Opportunities section includes recommendations about performance metrics

that could improve page loading time.
Each recommendation includes an estimation of the load time the page could save
if the suggestions were implemented.
Diagnostics
The Diagnostics section provides recommendations about which best practices for
web development should be added to the page.
Passed audits
The Passed Audits section includes all the performance checks the page already
meets and that don’t need any intervention.

In our opinion, three main reasons explain the popularity of PageSpeed Insights:
• Its speed score (from 0 to 100) gives an immediate indication of how well your
website performs;
• The color scheme (green check, orange circle, red triangle) of its suggestions
makes it easier to identify priority issues affecting your website performance;
• Its recommendations provide direct feedback about what you should fix on your
site to improve its performance.
How Is PageSpeed Insight Score Calculated?

As we said, PageSpeed results are now powered by Lighthouse API.
The score makes no exception: the speed rating that you see on the top of your
PageSpeed report is based on the lab data analyzed by Lighthouse.
The most important thing to notice in this context is that Lighthouse simulates a
page load in a particular environment: mobile networks and mid-tier device.
Google’s documentation about Lighthouse scoring is very precise and helps a

lot to understand where PageSpeed Insights rating is coming from:
“Lighthouse returns a Performance score between 0 and 100. 0 is the lowest

possible score. A 0 score usually indicates an error in Lighthouse. […] 100 is the best
possible score which represents the 98th percentile, a top-performing site. A score
of 50 represents the 75th percentile.“
Source: Google Tools for Web Developers
Google clarifies that only the items in the Metrics section of the Lighthouse’s
Performance category contribute to the score. The recommendations appearing
under Diagnostic and Opportunities are not part of the score.
The Performance audit in Lighthouse consists of six metrics:
Performance
• First Contentful Paint • First CPU Idle

• First Meaningful Paint • Time to Interactive
• Speed Index • Estimated Input Latency
Each of them has its own score.

(For a detailed explanation of each metric, check Google’s guide “Tools for
Web Developers” Lighthouse section.)

Lighthouse weights those scores to generate the final

Performance rating.
The score follows a specific color-coding map:
• 0 to 49 (slow): Red
• 50 to 89 (average): Orange
• 90 to 100 (fast): Green
If you’re curious to know how each metric contribute to the final score, see
Google’s spreadsheet with the scoring details.
What Is a Good PageSpeed Score?

It won’t be difficult to find articles on the web promising to reveal the secret tip to
score 100/100 on Google PageSpeed.
But now that you understand how the final score is calculated, it’ll be easier to
understand why scoring 100/100 is incredibly tricky nowadays.
Mobile-first indexing also adds to the challenge.
Obtaining a green PageSpeed Insights score can, of course, feel rewarding, but
the real question to ask yourself should be different: does that single PageSpeed
score really say something meaningful about my website?
In our opinion, it doesn’t (and here’s why you shouldn’t care about your Google
PageSpeed score).

There are a lot of tricks that can help to achieve a green score on PageSpeed.
For example, applying some code optimization techniques (like deferring non-
critical JS files or unused CSS), could be an excellent way to improve the first
paint of your pages, and obtain a green score.
But that won’t be sufficient.

The real indicator of quality for your site is its loading time.
The lower loading time your site will obtain on the six Performance metrics
indicated above, the better its overall score will be.
So, PageSpeed Insights and SEO: are they related?
The mere PageSpeed score your site obtains won’t influence Google’s ranking:
that number alone is not an indicator of an “SEO grade.“
So there’s not a direct correlation between how your site scores, and the position
it will gain in the SERP.
But, there’s a but.

Since, as we saw, the PageSpeed score is the result of overall performance
analysis on a few specific metrics, the better your score, the more you can
assume your site is in good shape.
A good score is a fair indicator of the well-being of your site in the eyes of Google.
But it won’t guarantee the victory in the race to the top of the SERP.
Given that Lighthouse scoring system rewards websites reaching satisfactory

performance metrics, if you work on making your site fast and improving its user
experience, you’ll also get better PageSpeed scores.
A faster website has higher chances of being loved by Google.
Your efforts should then be focused on making sure your website loads as fast
as it can: page speed is the real ranking factor, not the score.
To learn how you can achieve this goal, you can start from our blog post about
page speed optimization for WordPress and the errors to avoid.

CHAPTER 3
Why You Shouldn’t Care About

Google PageSpeed Insights Scores
As a website owner, you know your site needs to be fast.
You’ve read all the articles about how to make WordPress faster and which
plugins to install to accomplish this.
You’ve probably added a caching plugin, hopefully WP Rocket (if not, get it from
here!), and now you want to know how much benefit you’re getting.
So you head over to Google PageSpeed Insights, because that’s what all the
articles tell you to do, and enter your URL.
You’ll be presented with a grade and a list of recommendations from Google

and at that point, you might be dismayed:
?
“What are all these red and orange warnings?”
“Why isn’t my grade higher?”
“What do all these recommendations mean?”
After adding caching to your site, you might be expecting that your PageSpeed
grade will be near-perfect. Or you’ll look at the recommendations and wonder
why your caching plugin hasn’t fixed them all, automatically.
A lot of customers ask us why their PageSpeed grade isn’t higher, or they assume
that because it didn’t increase a lot, it must mean WP Rocket isn’t making their
site faster.
The simple truth is this:
Your Google PageSpeed score does not matter.
That’s right, we said it doesn’t matter.

Here’s why.

The Need for Speed
Speed, i.e the loading time of your site is the most important metric along with
its perceived performance.
Perceived performance is a measure of how fast a user feels your website is.
These two metrics are what counts for user experience and for SEO. When the
Google bot crawls your site, it cannot see your “grade”, only your speed.
Did you know that Google PageSpeed doesn’t even measure the loading
time of your site?
Read that again:
Google PageSpeed does not actually measure the speed of your site.
We’ll see this in more detail in the chapter dedicated to the new PageSpeed API,
which is now based on a different analysis engine, Lighthouse.
We like to use Pingdom Tools to measure the load time.
Think back to your school days.

Did perfect grades mean you were smart? Not necessarily.
It just meant that you knew how to do well on tests. But many intelligent people
simply not do well on tests.
So just like school grades are not an indicator of intelligence, Google’s PageSpeed
grade alone is not actually an indicator of speed.
Here are 3 websites all with similar load times, but with vastly differing
PageSpeed scores:
1. PurePlanetRecycling
Pingdom Test

WHY YOU SHOULDN’T CARE ABOUT GOOGLE PAGESPEED INSIGHTS SCORES
PageSpeed for desktop
PageSpeed for mobile
Loading time: 881 ms

Google PageSpeed: 89 on desktop / 37 on mobile

2. AnticaTrattorialPortico.it
Pingdom Test


3. CheekyPunter.com
Pingdom Test


Between these 3 sites, the loading time ranges from 461 ms – 881 ms but the
PageSpeed scores range from 30 to 41 on mobile!
And the below site has a really good PageSpeed score but is slower than all
3 above (note: the website owner asked to maintain URL anonymous):
4. Anonymous URL
Pingdom Test
So you can see from these examples that the Google PageSpeed grade
is not a real indicator of speed.

Chasing A Grade Is A Waste of Time

No site gets a perfect grade, in fact it’s pretty much impossible to achieve, and
since it doesn’t correlate to speed, why bother?
If you try an attain a perfect grade, by implementing all the suggestions Google
PageSpeed makes, you will lose your sanity pretty quickly.
You cannot take too literally all of the suggestions from Google PageSpeed
because sometimes they are unrealistic or impossible.
For example, it may tell you to minify or add expire headers to a file that is not
hosted on your website. This is impossible.
A good example that illustrates the impossibility to control these resources

can be the “Serve static assets with an efficient cache policy” recommendation
showing up for WP Rocket’s website:

As you can see, Google PageSpeed Insight recommends to optimize external
files coming from Google Analytics and OptinMonster.
So What Is PageSpeed Good For?

Google PageSpeed can be helpful as long as you don’t treat it as the be-all,
end-all.
Sometimes it can alert you to problem areas on your site that you can address.
For example, it might alert you to the fact that your content is not being GZIP-ed
(Enable Text Compression).
WP Rocket adds the rules for GZIP by default so if PageSpeed gives you a
warning, this might be a sign your server does not have it activated.
Or it might alert you that you have too many large images which could be
compressed. This is a good recommendation which you can actually act on:
Image Optimization – An Easy Win For A Faster Site
So it’s best to look at PageSpeed as one of several tools in your arsenal that
might provide some pointers, but your goal should always be to improve your
actual speed, not your “PageSpeed“ grade.
Guidelines for Using PageSpeed
• Don’t rely on PageSpeed alone to assess the performance of your site.

Use it as one of several indicators.
• Always read the recommendations carefully and assess if they are
possible and worth your time. If it’s asking you to do something impossible,
you should ignore that!
• Don’t forget to always focus on speed and don’t worry about chasing a
grade.
• Always use different speed testing tools like Pingdom or GTMetrix to see
the impact of any changes you have made on your site.

CHAPTER 4
PageSpeed Insights Is
Now Powered by Lighthouse:
How to Read the New Audit?
In November 2018, Google released v5 of its PageSpeed Insights API, which now
implements Lighthouse technology and integrates field data provided by the
Chrome User Experience Report (CrUX).
This new version got a mixed response from the public: while some people
started to see PSI scores skyrocketing, others plunged in despair looking at how
their scores dropped.
If you have followed WP Rocket since the beginning, you know that we believe
that a reliable web performance optimization score shouldn’t depend on
PageSpeed Insights only.
But since Google’s tools are among the most used when it comes to running a
performance audit, let’s see together what changed with the new PageSpeed
Insights, and which key points you should always keep in mind when pondering
its recommendations.
Getting to Know Google Lighthouse
Until now, Google was relying on several performance tools to assess the
performance of websites, such as PageSpeed Insights, WebPageTest, Test My
Site, Chrome Developer Tools and Lighthouse.

The main problem of employing different performance tools is that they produce
various recommendations, piling up confusion to the Web Performance
Optimization process which is not always straightforward to get to grips with.
That’s why, according to Google, it was time to make things easier and allow
developers to obtain the same performance recommendations everywhere, no
matter which Google tool they decided to use.
Now that Lighthouse powers PageSpeed Insights, you should obtain the same
result whether you choose to get your performance recommendations from the
web, the command line, or Chrome DevTools.
Keeping in mind this context it’s worth noting that, with this new tool, Google
is targeting a very specific type of users: developers and tech-savvy people
that already have a good knowledge of web performance best practices and
solutions.
At the same time, if we focus on the WordPress ecosystem, we’re observing a

remarkable interest by Google in fine-tuning Lighthouse recommendations and
making them more approachable for WordPress developers and site owners.
As Alberto Medina (Developer Advocate at Google) says:

“We are considering the development of a project called WordPress-
localized Advice Packs for Lighthouse, with the goal of providing
WordPress-specific guidance using Lighthouse.
With it, WordPress developers and site owners will get the results from
Lighthouse audits tailored to the realities of the WordPress platform.»

PAGESPEED INSIGHTS IS NOW POWERED BY LIGHTHOUSE: HOW TO READ THE NEW AUDIT?
Now, before stepping into the details of the new PageSpeed Insight API, let’s
clarify what Google Lighthouse is.
What Is Google Lighthouse?

Lighthouse is the technology at the core of this v5 PSI update. According to
Google’s definition:
“Lighthouse is an open-source, automated tool for improving the quality of web

pages. You can run it against any web page, public or requiring authentication. It
has audits for performance, accessibility, progressive web apps, and more.
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node
module. You give Lighthouse a URL to audit, it runs a series of audits against the
page, and then it generates a report on how well the page did. From there, use the
failing audits as indicators on how to improve the page. Each audit has a reference
doc explaining why the audit is important, as well as how to fix it.
Lighthouse code is available on the public Google Chrome GitHub repo.”
(Source: Lighthouse section of Google’s Tools for Web Developers)
Why Is This PageSpeed Insights Update

a Game-Changer?
From now on, the new PageSpeed Insights requires all of us to adjust the way we
read performance scores and interpret Web Performance Optimization audits.
When you measure a page with PageSpeed Insights, the result includes both
lab and field data about that page.
This is how Google explains the difference between lab and field data:
“Lab data is useful for debugging performance issues, as it is collected in a

controlled environment. However, it may not capture real-world bottlenecks.
Field data is useful for capturing true, real-world user experience – but has a more
limited set of metrics.”
(Source: Official PageSpeed Insights documentation)
Lab data on PSI is based on different metrics:

• First Contentful Paint
• First Meaningful Paint
• Speed Index
• First CPU Idle
• Time to Interactive
• Estimated Input Latency

Each of these metrics gets a score and the (in)famous PSI icon: green check
when the grade is good (90+), orange circle for the average grade, and a red
triangle for the lowest grade.
Field data, on the other hand, is based on a set of historical stats about how
a specific page has performed ”in the real world”: it considers anonymized
performance data from real users who visited the page from different devices
and network conditions.
This data is stored on the Chrome User Experience Report dataset and is
depicted in the user interface as a classification of speed: a green bar for fast
pages, an orange bar for average pages, and a red bar for slow pages.
It’s important to note that not all sites may have enough field data available for
display.
Why You Should Read PSI Scores in a Different Way

In simple terms, while lab data simulates the performance of a page on a fixed
set of conditions (device and network), field data collects an average of the real-
world performance.
Now that all PSI results are based on Lighthouse, we have to interpret results
differently, and for a simple reason: Lighthouse simulates a page load on mobile
networks and mid-tier devices.

PAGESPEED INSIGHTS IS NOW POWERED BY LIGHTHOUSE: HOW TO READ THE NEW AUDIT?
This is the real revolution of the new PageSpeed Insight version.

Every time you read a PSI report, you have to remember that the first screen
presented is the mobile performance: it describes how your website performs
under a mobile connection and, furthermore, on a mid-range device.
3 Key Points to Remember When You Run

a PageSpeed Test
Now that you know that mobile is prioritized by Google and its Lighthouse tool,
let’s look at three key points to keep in mind when running a PageSpeed Insight
test with the new API:
1. PSI Tests Are Conducted Using a Throttled 3G Connection

This will probably matter if your visitors are using low-speed 3G networks.
The average download speed on mobile is constantly increasing: our mobile

networks are more and more powerful, and they can run four times faster than
the speed of a 3G connection.
This parameter is not so relevant if your audience is based in countries where 3G

mobile networks are getting surpassed by faster connections.
2. The Testing Server Location Used by PSI Reports Is Unknown

This is a major point!
Suppose your server is in Atlanta, closest to your target audience, while the test
server used by PageSpeed Insights is, let’s say, in Los Angeles.
You’ll get results that don’t represent a real-world scenario in which a visitor
located in Atlanta would experience lower loading time, being geographically
closer to your server.
That’s why we always suggest completing your performance audit using tools
like Pingdom and GTMetrix, which allow you to choose different server locations
(for GTMetrix, you need to create an account to access the server locations list).

3. The 1
Mobile Device (Or the Emulator of Mobile Device) Used by PSI
Is a Mid-Tier Moto G4
Mobile devices vary significantly in processing power/characteristics, and this

can have a huge impact on page load time.
The latest technology smartphone would take significantly less time to load a
page compared, under the same network conditions, to one that is even just a
couple of years older.
With these three key points in mind, you’re now ready to

interpret PageSpeed results in the best way. Keep reading
to discover how to address its recommendations.
Ok :)

CHAPTER 5
How to Address Google 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.
During this chapter, 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
Example of the Opportunity section: removing unused CSS could reduce this pages
load time by 0.45 seconds.
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

• Reduce Server Response Time
• Minify CSS and Minify JavaScript
• Multiple Page Redirects
• Enable Text Compression
• Preconnect to Required Origins
• Preload Key Requests
• Defer Offscreen Images
• Properly Size Images
• Efficiently Encode Images and Optimize Images
• Serve Images in Next-Gen Format
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.

HOW TO ADDRESS GOOGLE PAGESPEED INSIGHTS RECOMMENDATIONS
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:
• Optimize CSS Delivery

• Load JavaScript deferred
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 of 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.
The first thing to consider when approaching web performance optimization, is

that a fast server is a fundamental element of it.
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:
• Manually
• Automatically, with a plugin
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:
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’s Tools for Web Developers guide explains:
“Text compression minimizes the byte size of network responses that include text
content. Less bytes downloaded means faster page loads.”
(Source: Lighthouse section of Google’s Tools for Web Developers)
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.
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.”
(Source: Preload, Prefetch, Preconnect: How to Speed Up Your Site With Browser Resource Hints)
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:

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:
Prefetching DNS requests
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.

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.
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:
• Our standalone free LazyLoad plugin, which you can find on the WordPress.
org repository:

• WP Rocket, which includes the option to lazyload your images:
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 lazy loaded 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:
• Choose the right image format
• Reduce their file size
• Compress them carefully

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!
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.
All the recommendations included in the Diagnostics section focus on

performance and on the best practices that can help improve it.
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

• Minimize Main-Thread Work and Reduce JavaScript Execution Time
• Serve Static Assets With an Efficient Cache Policy
• Avoid Enormous Network Payloads
• Avoid Excessive DOM Size
• Minimize Critical Requests Depth

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 to 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 is completely downloaded it will be
visible to the user; nobody will have to wait staring at 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.
Basic Settings
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 on
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:
• Plugin Organizer, by Jeff Sterup

• Asset CleanUp, by Gabriel Livan
• Gonzales plugin, by Tomasz Dobrzyńsk
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.
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:
• Has less than 1500 nodes total.
• Has a maximum depth of 32 nodes.
• Has no parent node with more than 60 child nodes.
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 from 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:
• Optimize CSS Delivery
• Load JavaScript deferred
• Combine JavaScript files

CHAPTER 6
How to Use WP Rocket to Improve

Your PageSpeed Insights Score
Learning how to use performance testing tools to assess the health of your site
is a crucial asset. Once you understand how to read their reports, improving
scores, and fixing their recommendations will become a lot easier.
WP Rocket is one of the tools that will help you achieve this goal efficiently and
without stressing too much on configuration settings.
Our plugin is all about caching and optimization. After

installing it, your website will immediately, and automatically
benefit from 80% of web performance best practices
including:
• Page caching
• Browser caching
• GZIP compression
PageSpeed Insights will love this and reward your site immediately, improving its
performance score.
Then, you have WP Rocket’s optional settings. They’re not mandatory since your
website will be faster already, even if you don’t try them.
Proper use of these settings will not only make your site blazing fast, but will also
boost its performance. You’ll achieve faster page speeds, better SEO rankings,
and the best scores in PageSpeed Insights (or other performance tools).
Most of the WP Rocket’s options that will make PageSpeed Insights fall in love
with your site are included in the File Optimization tab.

HOW TO USE WP ROCKET TO IMPROVE YOUR PAGESPEED INSIGHTS SCORE
These options have to do with minification, combination, and deferred loading of

CSS and JavaScript files.
PageSpeed Insights is particularly sensitive to the way files are loading on a

page. A couple of its trickiest recommendations are called Eliminate Render-
Blocking Resources, and Defer Unused CSS.
These refer to the fact that it’s recommended to delay (defer) the loading of non-
critical files until the browser is done rendering the page.
WP Rocket helps you to solve this puzzle thanks to the options labeled as
Optimize CSS Delivery:

For JavaScript files, you can use the option Load JavaScript deferred:
On the other hand, the Media tab contains the options that will fix PSI
recommendations related to images like Defer offscreen images.

HOW TO USE WP ROCKET TO IMPROVE YOUR PAGESPEED INSIGHTS SCORE
With WP Rocket, we’re striving to make the web a more

sustainable place with faster, and better performing web
pages.
Have a look at its features, and pricing plans, and see how your site
speed can reach the stars!
We hope that this PageSpeed Insights guide was helpful and that you
were able to take away interesting insights to know better how your site
is performing.
Thank you for reading!

Want a blazing fast website,
and a higher PageSpeed score?
Discover WP Rocket!
wp-rocket.me

PageSpeed Insights Guide PDF

Uploaded by

Copyright:

Available Formats

PageSpeed Insights Guide PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PageSpeed Insights Guide PDF

Uploaded by

Copyright:

Available Formats

PAGESPEED INSIGHTS

Check out our two main plugins:

2 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

Nonetheless, it’s undeniable that most of the people approaching page

In this book, we’re going to focus on this super popular tool.

At WP Rocket, we firmly believe

4 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

PageSpeed Insights by Google:

What is PageSpeed Insights?

PageSpeed Insights Scores: How to Read and Understand

• The green check means that everything is okay.

PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE 5

How to Fix the Most Common PageSpeed Recommendations

In the chapter dedicated to Google PageSpeed Insights recommendations

6 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

What is PageSpeed Insights and

There’s no doubt that PageSpeed Insights by Google is one of the most

At the moment, we can count on the following performance

• PageSpeed Insights, which analyzes your pages then generates suggestions

PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE 7

What is PageSpeed Insights by Google?

Lab data is collected in a controlled environment, that is with a set of predefined

What Kind of Information Does PageSpeed Provide About Your Site?

8 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

Lab data is based on a Lighthouse analysis on an emulated mobile device and

PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE 9

The Opportunities section includes recommendations about performance metrics

10 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

How Is PageSpeed Insight Score Calculated?

Google’s documentation about Lighthouse scoring is very precise and helps a

“Lighthouse returns a Performance score between 0 and 100. 0 is the lowest

Source: Google Tools for Web Developers

The Performance audit in Lighthouse consists of six metrics:

• First Contentful Paint • First CPU Idle

Each of them has its own score.

PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE 11

Lighthouse weights those scores to generate the final

What Is a Good PageSpeed Score?

Mobile-first indexing also adds to the challenge.

12 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

But that won’t be sufficient.

So, PageSpeed Insights and SEO: are they related?

But, there’s a but.

Given that Lighthouse scoring system rewards websites reaching satisfactory

A faster website has higher chances of being loved by Google.

PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE 13

Why You Shouldn’t Care About

You’ll be presented with a grade and a list of recommendations from Google

Your Google PageSpeed score does not matter.

That’s right, we said it doesn’t matter.

14 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

We like to use Pingdom Tools to measure the load time.

Think back to your school days.

PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE 15

PageSpeed for desktop

PageSpeed for mobile

Loading time: 881 ms

16 PAGESPEED INSIGHTS BY GOOGLE: THE 2020 GUIDE

PageSpeed for desktop

•  PageSpeed Insights, which analyzes your pages then generates suggestions