Skip to main content

Performance Insights in Lighthouse and Chrome DevTools

ยท 2 min read
Matt Zeunert

Google is standardizing some of its performance advice between Lighthouse and Chrome DevTools. Find out how you can see these new performance insights in both tools.

Performance insights audits in Lighthouse

What are Lighthouse insights audits?โ€‹

When you run a Lighthouse test, Lighthouse collects information about your page called artifacts. This information is then processed by the performance audits and turned into a series of recommendations to improve your website.

Since the new DevTools performance panel also provides performance suggestions, Google is now working on sharing the code that provides that analysis between Lighthouse and DevTools. Those audits are called Insights audits.

tip

Since PageSpeed Insights is powered by Lighthouse, that means these new insights will eventually be included there as well.

How to view performance insights in Chrome DevToolsโ€‹

To view these recommendations in DevTools, collect a profile in the Performance tab and then expand the Insights sidebar on the left.

Unlike Lighthouse, which mostly just provides a list of issues and recommendations, DevTools can annotate the performance trace and provide more visual reporting. For example, after expanding the insight on render-blocking requests, Chrome highlights these requests in the performance trace.

Performance insights in Chrome DevTools

You can also view insights for specific metrics. For example, if I click on the LCP metric marker in the timeline, Chrome shows me buttons to view two insights:

  • LCP by phase
  • LCP request discovery

LCP marker details

If I click on the LCP by phase insight, Chrome shows a subparts breakdown for the Largest Contentful Paint metric. That can help me better understand what's delaying the LCP the most and where I should optimize.

LCP phase breakdown

How to view performance insights in Lighthouseโ€‹

If you use Chrome Canary to run the Lighthouse test you can click the three dots to open the menu and then select Toggle experimental insights.

Showing Lighthouse insights audits

When using the CLI you can pass the --preset=experimental flag, for example like this:

lighthouse --preset=experimental https://web.dev/

You can then see the insights after enabling them through the toggle mentioned above.

Lighthouse performance insights

Get a monthly email with page speed tips