Coding

How to use PageSpeed Insigths in localhost

posted on by - 68 views

PageSpeed Insigths is a powerful tool by Google that allows us to analyze a web page to check loading times and a lot of other useful informations. It can scan our pages both for mobile and desktop browsers, and give us scores and detailed reports accordingly.
As my fellow web developers will already know, we often do one thing when starting a project: working locally on our beloved localhost. So here’s the question: what to do if we have to analyze a local webpage? Of course, if we give the tool our local page to analyze, it has no way to access it, because it’s stored in our machine and not publicly accessible. So is it possible to use PageSpeed locally?
Short answer: yes.

Long answer: yes, it is actually possible using Google Chrome.
Let’s see what we have to do in detail.

Localhost: how to use PageSpeed Insights

Luckily, Google gave us all the tools needed to analyze our pages within a local environment. The only thing we have to do is to right click anywhere in our page, and select Inspector. There, we can choose the Lighthouse tab, that will work almost exactly like the web version of the PageSpeed Insights. There, we can choose which categories to include in our report (performance, progressive web app, accessibility, best practices…), and if we want to analyze the page for mobile or desktop users.

At this point, the only thing left to do is clicking on Generate report and wait a few seconds – maybe a minute.

Here we go! Now we have all the data we need to improve our local pages, work on them, and make them go online with that beautiful green, green score. Speaking of which, this is one of the thing we may have to work on.