Debugging Fetch Priority #DevToolsTips

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 → Optimize LCP → Optimizing resource loading with the Fetch Priority API → Override web content and HTTP response headers locally → Questions? Tweet to us: Jecelyn Yeen → Barry Pollard → Chrome DevTools → Catch more DevTools Tips → Subscribe to Google Chrome Developers → #DevToolsTips #ChromeForDevelopers