How to See Your Website From PageSpeed Insights' Perspective
Last updated on Feb 14th, 2024 | 4 min
TL;DR: Browser user-agents are like identification cards that web browsers carry to tell websites what kind of browser and device they are using. For better overall user experience, developers can use these user-agents to customize content or features based on the user's browser or device.
This will let you easily double-check if there are differences in how PSI and visitors see your site.
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:
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:
And here’s Chrome’s User-Agent:
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.
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.
Click on the small arrow next to the device and select “Edit”.
This lets you create a new simulated device with a custom User-Agent.
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.
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.
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.
