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 → https://goo.gle/3RywUHH
Optimize LCP → https://goo.gle/3RQFYZS
Optimizing resource loading with the Fetch Priority API → https://goo.gle/3NACvfG
Override web content and HTTP response headers locally → https://goo.gle/devtools-overrides
Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Barry Pollard → https://goo.gle/tunetheweb
Chrome DevTools → https://goo.gle/chromedevtools
Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#DevToolsTips #ChromeForDevelopers