The separate Performance insights panel no longer exists. Google deprecated it and removed it from DevTools, and its insights now live in the Insights tab of the regular Performance panel. The steps below use the Performance panel.
Understanding the Chrome Performance Insights Panel
The old Performance insights panel gave a simplified view of a page load, focusing on loading behavior and Core Web Vitals. The Performance panel now does the same job: it shows live Core Web Vitals as soon as you open it, and lists insights next to each recording.
Accessing Performance Insights
- Open Chrome and navigate to the webpage you wish to analyze.
- Press Ctrl + Shift + I on Windows/Linux or Cmd + Option + I on macOS to open Chrome DevTools.
- Click the Performance tab. It immediately shows your local Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), and adds Interaction to Next Paint (INP) once you interact with the page.
Recording and Analyzing Page Loads
- In the Performance panel, click Record and reload.
- Wait for the page to reload, and Chrome will record the performance data.
- In the left sidebar, open the Insights tab. Expand each insight and hover over or click its items to highlight the matching events in the recording.
Understanding Core Web Vitals in Context
Core Web Vitals are a set of metrics that reflect the real-world experience of a user loading a webpage. These metrics are crucial for SEO and user satisfaction.
- Largest Contentful Paint (LCP): Measures loading performance. Aim for an LCP of 2.5 seconds or less.
- Interaction to Next Paint (INP): Measures interactivity. Aim for an INP of 200 milliseconds or less. INP replaced First Input Delay (FID) as a Core Web Vital in 2024.
- Cumulative Layout Shift (CLS): Measures visual stability. Aim for a CLS of 0.1 or less.
Identifying Render-Blocking Resources
Render-blocking resources can delay the display of page content. After a recording, check the Render-blocking requests insight in the Performance panel’s Insights tab to identify these resources and optimize them for faster loading.
- In the recorded trace, look for scripts and stylesheets that block the main thread.
- Consider techniques like deferring non-critical JavaScript or using asynchronous loading for CSS.
- Implement lazy loading for images and videos to speed up initial page rendering.
Performance Insights vs Performance Panel
The Performance insights panel was an experiment to make the Performance panel easier to use. Google has since folded it into the Performance panel: the live metrics view covers Core Web Vitals, and the Insights tab lists the same kind of guided findings next to the full recording. There is no longer a separate panel to choose.
Frequently Asked Questions
Why is my Chrome running slow despite using the Performance Insights panel?
The panel only measures pages; it does not speed Chrome up. If Chrome itself is slow, update Chrome, turn off extensions you do not need and clear your cache.
How do I enable experimental features in Chrome?
Type chrome://flags in the address bar, then search and enable the desired experimental features. Remember, these may affect browser stability. See our Chrome flags guide.
Can I access the Performance Insights panel on mobile?
DevTools runs in desktop Chrome. To analyze a page on an Android phone, connect it to your computer with remote debugging and use the Performance panel from there.
What are some common render-blocking resources?
Common render-blocking resources include CSS files and synchronous JavaScript. Optimize these to improve page load times.
What is the difference between LCP and CLS?
LCP measures loading performance, focusing on the time it takes to load the largest visible content. CLS measures the visual stability of the page, focusing on unexpected layout shifts.
Conclusion
The Performance panel and its Insights tab, which replaced the Performance Insights panel, are invaluable tools for web developers seeking to optimize their sites for speed and user experience. By understanding Core Web Vitals and identifying render-blocking resources, you can significantly enhance your site’s performance. Regularly using these insights will ensure your website remains fast and responsive, meeting both user expectations and SEO requirements.