Subscribe to THE LATEST

Lighthouse Bringing Better Recommendations to Google PageSpeed Insights

Lighthouse Bringing Better Recommendations to Google PageSpeed Insights Blog Feature

Melissa Smith

Sr. Front-end Developer, 8+ Years of Web Development Expertise, 2x Recipient of IMPACT's Helpfulness Core Value Award

November 16th, 2018 min read

We all care about how fast our website loads.

At least, we should by now.

A fast website on any device or browser not only provides a better user experience but is rewarded by search engines with more authority, helping to improve your search rank.

If you really don’t know the importance of website load time, check out Christine and Marcus talk about it here, but before you do, let me tell you about this new update from Google that may give put it into perspective for you.


PageSpeed Insight & Lighthouse Unite!

PSI now uses Lighthouse as its analysis engine.

Why is this a big deal? Well, as you may know, Google provides a variety of tools (like PSI and Lighthouse) to help you understand the performance of a single page or even your entire site.

While this is seemingly a good thing, recently, it was realized that having such a variety of tools caused some issues because they all had different recommendations, which could ultimately confuse the user.

Google decided to fix that and have PageSpeed Insights and Lighthouse (two long-offered tools) work together to bridge the gap.

PageSpeed Insight (PSI), for those of you not familiar with it, is a tool that analyzes the performance of a page on both desktop and mobile devices and provides you suggestions on how to improve your page.

Lighthouse, meanwhile, is an open-source, automated tool used for helping you improve your page. According to Google, it “gives you personalized advice on how to improve your website across performance, accessibility, PWA, SEO, and other best practices.”

Google states, by now working together, “... developers [will] get the same performance audits and recommendations everywhere: on the web, from the command line, and in Chrome DevTools.”

In other words, recommendations and data between the tools will now be consistent, reducing confusion and mixed messages.

What insights will users now get their hands on? Let’s start with each individual tool.

What Information Does PSI Provide?

With PageSpeed Insight, you are provided with the following information.

  1. Lab Data. Using LightHouse, PSI simulates how a mobile device loads your page. Once completed, it summarizes the performance metrics, such as First Contentful Paint and Time to Interactive, and gives you a performance score from 0-100. Scores are categorized into three levels, a score of 90 or above is considered fast, and 50 to 90 is considered average, and below 50 is considered to be slow. …

  2. Field Data. These are real-world performance metrics, First Contentful Paint and First Input Delay, for a page and its origin. The strengths of this report is it captures true real-world user experience and enables correlation to business key performance indicators. (Note that not all site may have field data available for display)

  3. Opportunities. These are the suggestions that PSI provides on how to improve a page’s performance metrics and estimate how much faster the page will load, if you were to follow through with them.

  4. Diagnostics. Provides additional information about how a page follows best practices for web development.

What Information Does Lighthouse Provide?

If you wanted to use Lighthouse as a solo website speed test, outside of PageSpeed Insights, the audit reports on a few key factors for each web page. They are:

  1. Overall Performance. Included metrics are First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive, Estimated Input Latency.

  2. Progressive Web App. These checks validate the aspects of a Progressive Web App, as specified by the baseline PWA Checklist.

  3. Best Practices. Some of these best practices include Uses HTTPS, Page has the HTML doctype, Avoids deprecated APIs, No browser errors logged to the console, etc.

  4. Accessibility. These checks highlight opportunities to improve the accessibility of your web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.

  5. SEO. These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. Learn more.

Here is a guide that explains how Lighthouse calculates the scores.

In the Lighthouse report, audit has a reference doc explaining why the audit is important, as well as how to fix it.

What Does This Mean for You?

Your audits between all the different Google Performance tools will be less confusing and more cohesive!

As marketers, these types of tools you and your developers should truly care about as they help to make sure your site is optimal, and help improve your search engine ranking.

Whether you are making constant updates to your site or not, you should be checking on your performance to ensure you’re in-line with what search engines are looking for.

If PSI or Lighthouse tells you your site is running slow, and you want a few more recommendations, here are 5 ways you and your team can improve page load time on your website.

So, How Do I Get Started using Lighthouse or PSI?

You can run Lighthouse in ChromeDev Tools, and for more technical developers or marketers who like to tap into development, from the command line or a Node module.

Here you can find step by step directions for running Lighthouse.

For PSI, just go to https://developers.google.com/speed/pagespeed/insights/, enter your URL and hit the analyze button, to see your results.

Inbound Marketing Strategy Template & Example
Here Are Some Related Articles You May Find Interesting

Want to Contribute Content to impactplus.com? Click Here.