PageSpeed Insights vs Lighthouse

Posted on Dec 23, 2019

Share

PageSpeed Insights and Lighthouse are Google tools to measure performance of web pages. Trying to decide which one you should audit your site with can be confusing. This guide explains the background to both tools, the differences between them and when to use each one. 

The main differences are that PageSpeed Insights focuses on performance metrics and uses lab data complemented with real-world data experienced by users on your website to support the analysis. Lighthouse measures additional things on top of performance but only uses lab data without any real world examples to correlate the findings.

Read on to find out more.

Contents

Background

Historically, PageSpeed Insights used an analysis engine that was different from other tools provided by Google. This led to inconsistent results because the scores in PageSpeed Insights vs Lighthouse vs TestMySite were always different. Confusion made it hard for developers to understand the data and the optimizations they needed to make.


 Lighthouse is an open-source automated tool for analyzing various aspects of a web page like Performance but also additional items like SEO and Accessibility. As Lighthouse audits performance, Google decided to make Lighthouse the performance analysis engine of PageSpeed Insights. This means developers can get the same recommendations from all of the Google tools they use and will be better placed to action the items slowing their sites down.

How are they different?

PageSpeed Insights
Lighthouse
  • Lab data only
  • Meaures more than performance data
  • Accessed through developer tools in Chrome

As mentioned , PageSpeed Insights focuses entirely on performance and uses a mix of lab and real world data to build a comprehensive report on the speed of a website. Lighthouse measures other things on top of performance but can only do so with lab data under consistent conditions so may not be a true reflection on the speed of your site because no two users ever experience the same conditions.

The real-world data used by PageSpeed Insights comes from the Chrome User Experience Report.

Chrome User Experience Report

crux.jpg

The CrUX is a public dataset of real user experience data on millions of websites and contains qualitative dimensions about the user experience like device and connection types. CrUX collects its data from people who have opted-in to syncing their browsing history and have usage statistic reporting enabled. These settings are enabled by default so if you use Chrome, then your browsing is contributing to the CrUX dataset, which means right now you are feeding information to Google about PageSpeedPlus.com.


 The data is then made available via PageSpeed Insights and Google BigQuery.


 Developers building websites on big screens often overlook how their site will load on mobile. Such a rich source of knowledge as the CrUX can be utilized to fine-tune your site for your audience on all devices and improve speeds across the board. 


When to use PageSpeed Insights

  • When focusing on performance
  • To get a true understanding of loading times users experience on your site
  • If you don’t like opening Chrome developer tools to run audits
  • If you need to share a link to a report

PageSpeed Insights is the best source of information for how people are actually experiencing your site. A URL could score highly in other tools like Lighthouse or WebPageTest that only run synthetic analysis but the reality is people access the internet on lots of device types, with different speeds and inconsistent network conditions. Getting a top score in Lighthouse doesn’t necessarily mean a user commuting home from work with a 3G connection will experience fast loading times.  


If you want to tailor your website for real users instead of machines then PageSpeed Insights is the tool you should make your decisions around.

Running a test is straightforward. 


  1. Go to https://developers.google.com/speed/pagespeed/insights/
  2. Paste the URL
  3. Analyse the results

psi-example.jpg Sample PageSpeed Insights Result for nytimes.com

Pay close attention to the section at the top called Field Data. These are the details from CrUX that explains how users experience your site.

field-data.jpg Field data in PageSpeed Insights

A hidden feature is Origin Summary which can be shown by clicking a checkbox. This provides the CrUX assessment of the entire domain rather than the single page that was tested. 


origin-summary.jpg Origins summary in PageSpeed Insights

Your site may not have enough information logged in the CrUX to give any feedback here. If that’s the case you will see a message like this:

no-data.jpg


 There is nothing you can do about this except wait until CrUX does have enough data.

Quick Tip
Pasting individual URLs isn’t feasible for a site with with any sort of size. This problem can be sovled by running Automated Google PageSpeed Tests with PageSpeedPlus. It scans the entire site for you every week and provides the results in a nice report.

When to use Lighthouse

  • When analysing other things alongside performance
  • If you need to run tests programatically

Lighthouse provides more metrics about the overall SEO health of a website like Performance, Accessibility, Best Practices, etc. If you want to get a rounded view then Lighthouse is a better tool to run your analysis with. For example, there is no point having a 90+ score on Pagespeed if it introduces bad code that pushes your Accessibility score below 20. Lighthouse will identify issues like this and display all relevant SEO metrics in a balanced way.  
 Running a test with Lighthouse is very easy:

  1. In Chrome, visit the URL you want to test
  2. Open the developer tools in the same browser tab
  3. Go to the audits tab
  4. Choose the audits you want to run (tick everything)
  5. Click Run Audits

lighthouse-example.jpg Sample Lighthouse result for nytimes.com

Lighthouse will reload the page and measure with its analysis engine. You will get a nice report in the developer tools panel with your scores displayed at the top.


 There is also a Chrome extension if you don’t like opening the developer tools panel every time.


 Another great use of Lighthouse is integrating the API into your own systems to run the audits programmatically. For example, if you wanted to block releases that don’t meet SEO and Performance thresholds, you could use the Lighthouse to run the tests on demand.

Conclusion

This article explains the differences between PageSpeed Insights and Lighthouse. You should now understand that they are different tools but that PageSpeed Insights actually uses Lighthouse data and then complements it that with real-world information to give a comprehensive snapshot into the performance of a webpage.


 And remember that getting good PageSpeed Scores is only half the battle. You need to monitor them to make sure they don't drop at a later date. PageSpeedPlus is great for this and also allows you to run bulk pagespeed scans across your entire site so you can get the full picture on what your scores are.

Try PageSpeedPlus Now