How To Use PageSpeed Insights On Localhost

Updated on Aug 30, 2024

Quick Summary

Chrome Dev Tools is the quickest and easiest option
For bulk testing on local, use Ngrok

Running PageSpeed Insights on a localhost page is extremely simple using DevTools or Ngrok. This short posts explains how you can do this with a few clicks.

Try PageSpeedPlus Now

The problem
Solution 1 - Chrome Devtools
Solution 2 - Chrome Extension
Solution 3 - Ngrok
Conclusion

The problem

PageSpeed Insights needs a URL to be publicly available on the internet to run its analysis engine and as local environments aren't publicly accessible, another solution is required to get a PagesSpeed Insights score from your development environment.

Solution 1 - Chrome Devtools

Various DevTools are bundled as part of Chrome and one of these is Lighthouse, which allows page speed to be measured on a local environment.

Open the URL you want to test in Chrome such as https://localhost.test/blog
Right click > Inspect
Click the two chevrons in DevTools and then Lighthouse

Click Analyse page load
After about 30 seconds the score PageSpeed Insights score on your local host page will be displayed

When you make a change to your code, simply analyse the page again to see what impact it had.

Lighthouse in Devtools has a few configuration options. The device can be chosen and by default, it is mobile with a throttled connection. The categories of test can also be configured such as Performance, Accessibility, SEO, etc. It’s recommended to leave all of these on to see their scores. The only reason not to measure all categories is if the tests are taking a long time to execute. Each category needs a few seconds to process so removing some will make the test faster.

Strictly speaking this method runs Lighthouse on localhost, not PageSpeed Insights.

However, for the purposes of measuring page seed on localhost, this is fine. Lighthouse shows lab data only while PageSpeed Insights also shows field data, which isn’t relevant for a local environment. We’ve written a detailed post about the differences between PageSpeed Insights and Lighthouse if you want learn more.

Solution 2 - Chrome Extension

Another option to run PageSpeed Insights on local host is to use the Lighthouse Chrome Extension.

Install the Lighthouse Chrome Extension.
Open the URL you want to test in Chrome such as https://localhost.test/blog
Click the Lighthouse icon in your taskbar
Click Generate report
After about 30 seconds the score PageSpeed Insights score on your local host page will be displayed

This is the easiest option but if you don’t like adding rarely used extensions to your browser, Devtools is a better method.

Solution 3 - Ngrok

It’s possible to make your localhost temporarily available on a public URL using Ngrok. This is commonly used by developers who want to demo something they are working on without deploying it to a staging environment. Ngrok creates a tunnel to your local environment and a short-lived URL that opens it to the internet. The tunnel and URL are destroyed when the session ends.

By using Ngrok on your local, PageSpeed Insights will then have a public URL that it can access to perform its analysis on.

The easiest way to set up Ngrok is with Laravel Herd, which is a lightweight local development environment that works with all PHP applications including WordPress (so isn’t limited to Laravel projects only).

Install Herd
Navigate to the website directory in your terminal
Run valet share
Copy the URL that is output in the terminal
Paste it into PageSpeed Insights to trigger a scan

Using this method opens the door for more advanced PageSpeed Insights local testing across lots of pages. With a public URL, it’s then possible to Automate PageSpeed Insights scans or run a bulk page speed test across your entire site before deploying it.

Conclusion

Devtools and the Chrome extension are straightforward methods of running PageSpeed Insights on Localhost. They are both ideal for testing single pages and iterating quickly during development. We prefer the Devtools method so our browsers aren’t bloated with rarely used plugins.

If you need to test pages in bulk, using Ngrok will make that possible.

All three of these methods allows you to test PageSpeed Insights locally instead of having to deploy pages to production to test on your live site or opening up staging environments so that PageSpeed Insights can access them.

Of course, testing page speed locally is only the first step and it’s the score on production that really matters. That’s where PageSpeedPlus can help so if you want to measure your scores in bulk, start a trial by clicking the link below.