How to See Your Website From PageSpeed Insights' Perspective

Last updated on Jun 4th, 2021 | 4 min

In this article, you’ll learn how to see your website through the “eyes” of Google’s PageSpeed Insights (PSI).
 
This will let you easily double-check if there are differences in how PSI and visitors see your site.
 
To do that, you’ll need a basic understanding of what User-Agents are. If you’re already familiar with that, feel free to skip to the second part of this article.
 
Also, don’t worry if all of this sounds too technical. You only need to understand a few basic concepts and follow a simple process.
 
We also have a video guide for this process. Check it out below if you prefer that format:
 
 

What are User-Agents?

When you try to load a website, your browser sends an HTTP request to the server that hosts the site.
 
This request has a few parts, one of which is called an HTTP header.
 
The browser uses the header section to provide information to the server. This information helps the server understand the request and give a tailored response.
 
Here’s how a typical HTTP header looks:
 
HTTP request header
 
As you can see, the User-Agent is a line of text inside the HTTP header. Its job is to tell the server what type of browser, device and operating system the client is using.
 
For example, here’s Mozilla’s User-Agent on a Mac OS version 10.15:
 
Mozilla User Agent
 
And here’s Chrome’s User-Agent:
 
Chrome User Agent
 
There are a lot more User-Agents out there. If you want a deeper dive, check out this list.
 
For now, the important thing to remember is this:
 
User-Agents are strings of characters that browsers pass to servers. Servers use these strings to provide personalized experiences, like serving a mobile version of a page to mobile devices.
 
Browsers and internet bots (like Googlebot) have unique User-Agents. PSI also has one. We can use that to see our website the same way PSI does.
 
Here’s how you can do that in Chrome.
 

Emulating a Device with PageSpeed Insights' User-Agent via DevTools

First, open the page you want to test, right-click and select Inspect.
 
Inspect website with Chrome
 
This will bring up Chrome’s DevTools, which you can use to emulate different devices and User-Agents.
 
Once opened, we have to click on the small “Toggle device toolbar” button. This gives us the option to emulate different devices, like an iPhone 6 or a Pixel 2.
 
Chrome DevTools
 
Click on the small arrow next to the device and select “Edit”.
 
Create Custom Device
 
This lets you create a new simulated device with a custom User-Agent.
 
Custom Device DevTools
 
From here, you can simply copy and paste one of the following strings, depending on the type of device (desktop or mobile) you choose.
 
For a custom mobile device, use this User-Agent:
 
Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.175 Mobile Safari/537.36 Chrome-Lighthouse
 
For a custom desktop device, use this one:
 
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.175 Safari/537.36 Chrome-Lighthouse
 
Lastly, save the custom device and voila - you now have a way to see your website exactly as PSI sees it!
 

Using the Custom Device to Test Different Pages

To make this process easier, we created a simple way for validating that you’re using the correct User-Agent.
 
If you go to https://nitropack.io/page/userAgentDebugger, the page will display your device type. The page should also detect that you’re using the Lighthouse User-Agent, provided you’ve set up the custom device by following the steps above.
 
Lighthouse Bot
 
By the way, it says “Lighthouse Bot”, because Lighthouse is the technology that powers PSI.
 
If you test this page with PSI, you’ll see that it displays the same message. In other words, the page correctly detects that it was visited by the Lighthouse bot.
 
PageSpeed Insights Test Page
 
Once you have the custom device ready and you’ve made sure it works correctly, open any page and reload it. You can scroll, click, look at network requests and really - see anything from PageSpeed Insights’ perspective.
 
Just remember that this process works only on the tab where DevTools was opened. If you switch to another tab, you’ll have to open DevTools separately and refresh the page with the same emulated device.
 
Emulated Device GIF