How To Improve Your PageSpeed Insights Score: The Hard & The Easy Way

Oct 22, 2020 | 6 min

Your PageSpeed Insights (PSI) score measures three web performance aspects - Load Time, Responsiveness and Visual Stability.

Each of these aspects is important to your visitors.

Even if they don’t realize it.

That’s why fixing page speed issues also tends to result in lower bounce rates and more conversions.

Now, before you get worried:

You don’t need to score a perfect 100.

NitroPack PageSpeed Insights Score

(Although it’s a nice brag)

A good PageSpeed score is anything in the green zone (90+) or slightly below it.

And in this article, I’ll show you how to get there.

Here’s what you’ll learn in the next few minutes:

  • How page speed affects SEO

  • How PageSpeed Insights works

  • Field Data and Lab Data (PageSpeed Insights vs. Lighthouse)

  • The six metrics that make up your PSI score

  • Manual techniques for improving your score

  • How to fix your PSI score the easy way (NitroPack)

Since PSI is Google’s product, we should start with the link between page speed and SEO.

Does PageSpeed Insights Affect SEO?

The short answer - yes.

The right answer - it doesn’t matter.

Here’s what I mean:

Google has repeatedly said that page speed is a ranking factor.

Most recently, they confirmed that in an episode of SEO Mythbusting. And we don’t have a reason to doubt them on this one.

At the same time, some of the best SEOs in the game don’t find a connection between organic rankings and page speed.

So, what’s the deal here?

Well, two quotes from the episode of SEO Mythbusting sum it up better than I can:

“For us (Google), it makes sense to consider fast websites a little more helpful to the users than very slow websites….”

But...

“If you’re the fastest website out there, but the content isn’t great that (page speed) is not helping you.”

Put simply, page speed is a ranking factor but not a major one. If your goal is improving your website’s organic rankings, speed isn’t the place to start.

Satisfying search intent, having solid on-page SEO fundamentals and quality backlinks is way more important.

At the same time, research has always shown that users prefer to browse, read and buy from fast websites

So, if fast websites make visitors happy, isn’t that enough reason to speed up yours?

Fixing page speed won't be the biggest SEO improvement you can make. But for most websites, it can be a massive UX advantage.

In short:

It’s better to think of page speed as a way to delight your visitors, not as a SEO booster.

How PageSpeed Insights Works

PSI reports are separated into four main sections:

  • Field Data (CrUX)

  • Lab Data (Lighthouse)

  • Opportunities

  • Diagnostics

The Field and Lab Data sections are composed of different metrics.

Each metric represents one of the three aspects of web performance.

3 Page Speed Aspects With Their Metrics

We’ll go over each metric in a bit.

For now, let’s go through the four sections of the PSI report.

Field Data

The Chrome User Experience Report (CrUX) provides information for the Field Data section.

Field Data Example in PSI

The CrUX is a massive data set filled with anonymous data collected from Chrome users. It tracks web performance across millions of websites.

This report compares your website’s performance to other real-world websites.

Based on the CrUX analysis, PSI classifies performance into three categories - Good, Needs Improvement and Poor.

Field Metrics Results

While important, the Field Data doesn't affect your PSI score.

The Lab Data report does.

Lab Data

Lab data are provided by Lighthouse - an open-source tool used to audit performance, accessibility, SEO and more.

Lighthouse UI in DevTools

As opposed to the CrUX, Lighthouse collects data in a controlled environment on a predetermined device and network settings.

This makes it great for testing and debugging.

This report also includes six metrics instead of four.

Lab Data Example in PSI

Again, these Lab Data metrics determine your overall PSI score.

Lab Data PSI Score

Opportunities and Diagnostics

Both of these sections contain suggestions for improving your website’s performance.

Here are some of the most common Opportunities:

Common PSI Opportunities

And some of the most common Diagnostics:

Common PSI Diagnostics

These sections are great places to start analyzing performance issues with your site.

And by implementing their suggestions, you’ll improve your PSI score indirectly.

The Six PageSpeed Metrics & How To Improve Them

Your performance score in PSI is a weighted average of the six lab metrics.

Metrics that have a larger impact on performance and user experience contribute more to the score and vice versa.

This is the weight of each metric in the latest version of Lighthouse (v6):

Pie Chart Metric Weight Lighthouse v6

Now, let’s look at these metrics in pairs (except CLS) and suggest what you can do to improve them.

First Contentful Paint (FCP) and Largest Contentful Paint (LCP)

FCP measures the time it takes for the browser to visualize the first piece of DOM content on a page.

For example, a loading animation can trigger FCP:

Loading Animation Triggering FCP Mobile

Or your company logo:

Company logo triggers lcp on laptop

According to PSI, FCP should occur in under 2 seconds.

On the other hand, LCP measures the time it takes for the largest above the fold content element to load.

Items that appear only when a user taps the screen or scrolls down don't affect LCP.

The largest element triggers lcp metric

Your LCP should occur within 2.5 seconds.

Put simply:

FCP measures the beginning of the loading experience, while LCP measures its culmination.

Both metrics are crucial for making a great first impression.

How To Diagnose Issues With Your FCP and LCP

Chrome’s DevTools can help you diagnose FCP and LCP problems.

Here’s how:

Open a page you want to examine in Chrome. Right-click and select "Inspect."

From there, go to "Performance."

Performance panel in DevTools

Click the “Reload” button.

Reload Button in DevTools

Chrome will analyze the page for a few seconds and give you a report.

In the "Timings" section, you can see two small FCP and LCP icons.

FCP and LCP icons Timings section

If you hover over the LCP icon, it will highlight the largest visible element in blue.

Largest Element Highlighted

Source: Yahoo News

This is the element that triggers the LCP metric.

You can also scroll into the other icon to see when your FCP occurs.

FCP Audit in DevTools

Now, let’s look at a few common ways to improve these two metrics.

How To Improve Your FCP and LCP

Before we begin:

The techniques below will help most websites improve their PSI score.

They’re good practices that everyone can implement.

But:

You should always analyze your specific performance issues. Each site is different and no article can provide a general solution to all individual problems.

Don’t look at guides like this one as a one-size-fits-all fix.

There’s a small chance your performance is affected by factors that aren’t even included here.

Optimize Your Images

Image optimization is one of the best things you can do for site speed.

Unfortunately, it’s also quite complicated.

It includes things like compressing images and choosing the right image type.

The latter is a great place to start.

In general, you want to use WebP. It’s smaller, faster and overall better for web performance than the other options.

The only drawback is that it doesn’t have 100% browser support yet. That’s why you also need a fallback type - usually JPEG or PNG.

Next, you should also remove all unnecessary images from your website. Trust me, they’re there.

For a complete breakdown of all this topic, check out our image optimization guide.

Reduce server response times

A few factors can cause a slow server response time.

Most commonly, these are your:

  • Hosting plan

  • Caching policy (or lack of)

  • Bloated webpage

First, you should start with your hosting.

If you’re using a cheap, shared hosting plan, you need to upgrade. There’s no way around that.

In fact, upgrading your hosting plan can contribute more to your website’s performance than any other optimization.

Here’s a list of the top hosting companies you can choose from.

Only once the hosting is taken care of should you move to other potential problems.

Check out this article by KeyCDN for other tips on server response time.

Eliminate render-blocking CSS and JavaScript

Browsers must load, parse and execute all CSS and JS files referenced in a page’s head tag before rendering it.

That’s why these resources are render-blocking.

They stop the entire page from being visualized, even when the user only needs to see above the fold content.

A good way to solve this issue is to implement Critical CSS.

This means extracting the CSS needed to load above the fold elements and inlining it in the head tag.

External vs Inline CSS

Check out our article on the topic to see how you can do that.

Minify and combine CSS/JavaScript files

Minification means removing all the unnecessary parts of your code.

These include things like whitespace, line breaks and comments.

Minified vs Non-minified CSS Code

On the other hand, combining CSS/JavaScript into just one CSS/JavaScript file reduces the number of HTTP requests a browser has to make for your website.

Combine CSS and JS

There are tons of tools that can help you with both tasks. Some get the job done automatically and others require a bit of manual work.

Find one that fits your budget and use it. There’s no point in doing it by hand.

Now, let’s move on to the responsiveness metrics.

Total Blocking Time (TBT) and Time To Interactive (TTI)

TTI is the time it takes for a page to become fully interactive after a user arrives on it.

PSI considers a page fully interactive when:

  • The page displays useful content

  • Event handlers are registered for most visible page elements

  • The page responds to user interactions within 50 milliseconds

TBT is the amount of time during which Long Tasks (all tasks longer than 50ms) block the main thread and affect page usability.

It shows how unresponsive a page is before it becomes fully interactive.

Put simply:

  • TTI tells you when a page became interactive

  • TBT tells you how severely page interactivity was affected by long tasks.

Because they’re so similar, both metrics are plagued by the same problems.

How To Diagnose Issues With Your TBT and TTI

TBT and TTI get seriously hurt by Long Tasks.

These tasks clog up the main thread and stop it from responding to user input in time (among other things).

To find Long Tasks, open Chrome and go to a page you want to analyze.

Right-click and select “Inspect”.

From there, go to "Performance."

Performance panel in DevTools

Click the “Reload” button.

Reload Button in DevTools

You’ll get a detailed analysis of how the page performed.

In the “Main” section, you’ll see tasks painted in different colors. If you see a gray task with a small red overlay, you’ve found a Long Task.

When you hover over it, you’ll see how much time it takes up on the main thread.

Long Task on main thread

You can also click on “Bottom-Up” to see a detailed description of each task.

Bottom-Up Report In DevTools

From here, you can break down each activity and see what causes delays.

How To Improve Your TTI and TBT

The main villain here is JavaScript.

That’s why improving your TTI and TBT requires more tech skills.

We won’t cover each technique in detail. However there are links to other useful resources below if you’re interested in digging around your website’s code.

Here’s what you can do to optimize your website’s JS:

Code Splitting. This means sending only the code that your visitors need at the very beginning, instead of overloading the browser with all the JS at once.

Preload Critical Assets. With preloading you tell the browser which resources to find and load first. You can do that by adding the link rel="preload" element.

Implement the PRPL Pattern. PRPL is a collection of techniques that involve strategically Pushing, Rendering, Pre-loading and Lazy loading specific resources.

Remove Unused Code. Pretty self-explanatory. Find and remove the code files (or their parts) that aren’t used and remove them.

Some of the tips we talked about in the last paragraph (like minification) also help with JS optimization.

Cumulative Layout Shift (CLS)

CLS measures how much unexpected layout shifts affect the user experience on a page.

Unexpected layout shifts occur when content on the page moves around without user input or prior notification.

For example, when an ad inserts itself over a button, you were trying to click.

Bad Layout Shift Example

CLS also marks an important shift (pun intended) in the way Google thinks about web performance. It’s the first PSI metric that has nothing to do with speed.

To fix your CLS score, you must first find out where layout shifts occur.

How To Diagnose CLS Issues

Again, we’re using Chrome's DevTools.

Right-click on a page you want to analyze and select “Inspect.”

Go to “More Tools” and select “Rendering.”

Redering Button in DevTools

At the bottom, you’ll see a “Layout Shift Regions” option with a checkbox next to it. Select it.

Layout Shift Regions Button in DevTools

Now every time a layout shift occurs, the shifted area will be highlighted.

CLS Example From Forbes

Source: forbes.com

This won’t tell you if a layout shift is “good” or “bad”.

But it will help you find a few shifts you might’ve missed otherwise.

How To Improve Your CLS

Again, the specifics here depend on your individual case.

Here we’ll cover a few good practices that work well in general.

Include width and height attributes for images

Width and height attributes help the browser allocate the correct space on the page for each image.

Width Height Attributes For HTML Image

This minimizes layout shifts by making the browser reserve enough space for the images.

Avoid placing ads near the top of the viewport

Ads inserted near the top push a lot of other content down, meaning they cause larger layout shifts.

Here’s an example from Forbes.com:

CLS Example From Forbes

Avoid inserting content above other content

The same idea from the last paragraph applies here.

Unless a user initiates it, avoid inserting content above already existing content. This pushes a lot of elements down, resulting in a large layout shift.

For example, elements that often cause this issue are banners, forms and cookie consent pop-ups.

Optimize web fonts

Fonts are a bit tricky to get right.

The two main font problems lead to a bad CLS score are flash of unstyled text (FOUT) and flash of invisible text (FOIT).

The FOIT issue can be resolved by using the font-display: swap property.

This property tells the browser to use a fallback (swap) font until the custom font is ready.

Customer and System Font Swap Example

The problem with this approach is that it can lead to other layout shifts.

A way to get around the issue is to use a combination of link rel="preload" and font-display: optional.

Check out this article for more information on how you can do that.

Speed Index

“Speed Index measures how quickly content is visually displayed during page load.”

That's the official definition of this metric.

It’s more broad and abstract than the other ones. That’s why most of the techniques I already discussed will also boost your Speed Index.

So, focus on implementing the tips from this article. As you do that, your Speed Index problems will go away.

How To Massively Improve Your PSI Score In Less Than 5 Minutes

All of the optimizations we just covered require time and effort to carry out manually.

But here’s the good news:

You don’t have to implement them on your own.

NitroPack can take care of everything we talked about for you.

With no coding and no complex setups, NitroPack can skyrocket your PageSpeed Insights score in less than 5 minutes.

PSI Score Before/After NitroPack

To achieve these results, NitroPack uses tons of built-in features like:

  • Advanced Caching

  • Global CDN

  • Complete Image Optimization Stack

  • HTML, CSS and JavaScript Minification

  • Critical CSS and more

If you’re interested in solving all of your site speed issues once and for all, check out NitroPack. Our free plan doesn’t expire or require a credit card, so you can test it out risk-free.