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.
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.
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 Performance 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.
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
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.
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.
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.
