Improving PageSpeed Insights Ranking

Google’s PageSpeed Insights is a tool that helps rank how well a web page does in terms of performance, accessibility, SEO, and user experience.

Lighthouse Ranking

Google uses Lighthouse to rank how pages perform. Lighthouse is an open-source tool that generates reports with weighted averages based on different factors.

The weight distribution for Lighthouse version 8 is:

  • Total Blocking Time 30% – TBT is the time that a page is blocked from responding to a user
  • Largest Contentful Paint 25% – LCP measures the time that it takes for the main content of a page to be available
  • Cumulative Layout Shift 15% – CLS measures how much a layout changes after the initial load. Think about those times when you are a couple of seconds into reading an article and suddenly something that just finished loading pops up and blocks the view
  • First Contentful Paint 10% – FCP is how long a browser takes to be able to display the first content of a page
  • Speed Index 10% – How long does it take for content to be displayed. Below 3.4 seconds is fast, ver 5.8 is slow and in between is average
  • Time to Interactive 10% – TTI measures how long it takes between a page to display content and become fully interactive.

How to find out the PageSpeed rank

There are a number of ways to find out the current rank of a page, each has its pros and cons therefore finding out the best depends on the context in which they are used.

Testing PageSpeed rank online

This is the easiest way to generate, and the one which has zero setup requirements.

  1. Browse to https://pagespeed.web.dev/
  2. Enter the URL of a web page
  3. Hit the Analyse button
  4. Have a cup of your favorite beverage until the report is generated

The main limitation is that it won’t work for URLs that are not publicly accessible, like if you are testing improvements in a development environment.

Testing on a browser

If you are trying to test a page that is not yet public, then you can run the tests directly from your browser. The Lighthouse extension is pre-installed by default on Google Chrome which makes it nice and easy.

  1. Open the page you want to test in Google Chrome
  2. Click the three vertical dots in the right-hand corner of the browser and select “More Tools > Developer Tools”
  3. Select the “Lighthouse” tab
  4. Click the “Generate Report” button

Make sure to execute the report from an Incognito window so any installed plugins don’t interfere with the analysis.

Check PageSpeed Insights rank with automation

Page speed insights can also be invoked via an API call. This is particularly useful to run as an automated test, which can be used as a quality gate before pushing a change to production, or as a scheduled check to notify if a page rank drops below the desired value.

Here is an example on how to check page speed insights rank from a GitHub actions workflow:

name: Page Speed Insights

on:
  # Run daily at 8am
  schedule:
    - cron: 0 8 * * *
  # This enables to workflow to also be invoked on demand
  workflow_dispatch:


jobs:
  psi:
    runs-on: ubuntu-latest

    steps:
      # Imports the PSI action
      - uses: jakepartusch/[email protected]
        with:
          # The URL of the page to test (required)
          url: https://www.example.com
          # A minimum value to pass the test (non-mandatory)
          threshold: 70
          # The strategy to analyze the page (mobile or desktop)
          strategy: mobile
          # An API key to use when performing the test (not required)
          key: ${{ secrets.PAGESPEEDINSIGHTS_APIKEY }}

Using an API key is not required but is highly recommended, this ensures that the scans are less likely to hit on API rate limits which will cause false negatives.

To generate a PageSpeed Insights API key:

  1. Go to https://developers.google.com/speed/docs/insights/v5/get-started
  2. Click the “Get a Key” button
  3. Create or select a project
  4. Click the “Show Key” button
  5. Copy the generated key
  6. Paste the key in the Actions secrets, or in the appropriate tool for managing keys for the automation you are using

Reference