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.