Updated on Aug 30, 2024
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.
Solution 1 - Chrome DevtoolsPageSpeed 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.
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.
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.
Another option to run PageSpeed Insights on local host is to use the Lighthouse Chrome Extension.
This is the easiest option but if you don’t like adding rarely used extensions to your browser, Devtools is a better method.
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).
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.
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.