Performance insights panel | DevTools Tips

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=5PFmGeCZDvw


Duration: 7:43
28,503 views
448

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 → https://twitter.com/jecfish
Chrome DevTools → https://twitter.com/chromedevtools

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

#DevToolsTips #Chrome #Developer



Other Videos By Chrome for Developers


2022-05-12How to take full advantage of a PWA install
2022-05-12Bringing page transitions to the web
2022-05-12A path to a world without passwords
2022-05-12How to speed up Largest Contentful Paint (LCP) with cross-site prefetching
2022-05-11Introduction to Angular
2022-05-11What's new in Chrome OS I/O 2022
2022-05-11Measure performance with web-vitals.js, Google Analytics, and BigQuery
2022-05-11Creating instant and seamless web apps with Chrome
2022-05-11What's new for the web platform
2022-05-11Build more accessible apps in Angular
2022-05-10Performance insights panel | DevTools Tips
2022-05-03Is .css a bad idea? Is inlining the way forward? | HTTP 203
2022-04-27Adaptive frosted glass #Shorts
2022-04-21Chrome 101 - What’s New in DevTools
2022-04-13Thinking on ways to solve DIALOG
2022-03-304 lines of CSS for a vertical responsive slideshow #Shorts
2022-03-29New in Chrome 100: User Agent string updates, Multi-screen window placement API, and more!
2022-03-29What key was pressed? (You won't believe how keyboard events work) | HTTP 203
2022-03-24Chrome 100 - What’s New in DevTools
2022-03-23Cache your fonts, images & pages - Unpacking the Workbox
2022-03-18FLEDGE demo walkthrough | What is the Privacy Sandbox?


Tags:
Chrome Devtools
chrome developer tools
intro to devtools tips
what are devtools tips
how to use devtools tips
devtools tips tutorial
devtools
chrome
developer
developers
google developer
google developers
google chrome developers
chrome developer
chrome developers
google chrome
Jecelyn Yeen