Performance insights panel

Published: 10 May 2022
on channel: Chrome for Developers
45,164
617

Learn how to use the Performance insights panel to get actionable and use-case-driven insights on your website's performance.

Chapters:
0:00 - Intro
0:10 - Record page load performance
0:40 - Panel overview
0:52 - Replay the recording
1:19 - Zoom and navigate the recording
1:51 - Customize the UI with settings
2:04 - Get actionable performance insights
2:42 - Understand page load performance metrics
3:27 - View Web Vitals in the panel
3:39 - Understand layout shifts
5:01 - Identify layout shifts
5:23 - Understand layout shift score
6:17 - Understand Cumulative Layout Shifts (CLS)
6:37 - Identify potential root causes of the layout shift
6:52 - Identify impacted elements of the layout shift
7:07 - Send us feedback
7:20 - Outro

Links:
Performance insights panel → https://goo.gle/devtools-performance
Understand Web Vitals → https://goo.gle/3gKe8cw

Questions? Tweet to us:
Jecelyn Yeen →   / jecfish  
Chrome DevTools →   / chromedevtools  

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer


Watch video Performance insights panel online without registration, duration hours minute second in high quality. This video was added by user Chrome for Developers 10 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 45,164 once and liked it 617 people.