Debugging Fetch Priority #DevToolsTips

Опубликовано 21 декабря 2023, 18:00

Barry joins Jecelyn again to talk about the Fetch Priority API and how it can be used to improve LCP image load times. Learn how to view priorities in DevTools and see the impact this API can have to improve your Core Web Vitals. All by adding a single attribute to your HTML!

Chapters:
0:00 Intro
0:19 What is LCP
0:48 Find LCP with Performance panel
1:01 Image is expensive to display
1:20 Find fetch priority in Network panel
2:01 Find fetch priority in Performance panel
2:16 Set the image’s fetch priority
2:25 Fetch priority API
2:59 Override and test fetch priority locally
3:32 Difference between “loading” and “fetchpriority” attribute
4:46 When to set low fetch priority
5:33 Use fetch priority API with caution
5:56 Identify candidates for setting fetch priority
6:39 Learn more

Resources:
Largest Contentful Paint → goo.gle/3RywUHH
Optimize LCP → goo.gle/3RQFYZS
Optimizing resource loading with the Fetch Priority API → goo.gle/3NACvfG
Override web content and HTTP response headers locally → goo.gle/devtools-overrides

Questions? Tweet to us:
Jecelyn Yeen → goo.gle/jecfish
Barry Pollard → goo.gle/tunetheweb
Chrome DevTools → goo.gle/chromedevtools

Catch more DevTools Tips → goo.gle/DevToolsTips
Subscribe to Chrome for Developers → goo.gle/ChromeDevs

#DevToolsTips #ChromeForDevelopers