Debugging Fetch Priority #DevToolsTips
227Barry 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 Chrome for Developers → https://goo.gle/ChromeDevs
#DevToolsTips #ChromeForDevelopers
Other Videos By Chrome for Developers
| 2024-01-17 | Container queries #shorts |
| 2024-01-11 | text-wrap: balance #shorts |
| 2024-01-04 | Building multiple Progressive Web Apps on the same domain |
| 2024-01-03 | What are Private State Tokens? |
| 2024-01-02 | Permission policy violation reports #shorts |
| 2023-12-29 | What is the Protected Audience API? |
| 2023-12-28 | Privacy Sandbox: Preparing for the end of 3rd-party cookies |
| 2023-12-27 | What is the Attribution Reporting API? |
| 2023-12-22 | What are Related Website Sets? |
| 2023-12-21 | Relative color syntax #CSSWrapped2023 |
| 2023-12-21 | Debugging Fetch Priority #DevToolsTips |
| 2023-12-20 | What is Storage Access API? |
| 2023-12-20 | Thinking on ways to solve COMPARE components |
| 2023-12-19 | CloseWatcher API #shorts |
| 2023-12-19 | View Transitions #CSSWrapped |
| 2023-12-18 | What is CHIPS? |
| 2023-12-14 | Container queries #CSSWrapped |
| 2023-12-13 | Test your site without third-party cookies |
| 2023-12-12 | gradient.style #CSSpodcast |
| 2023-12-12 | Unity brings WebGPU to its web player |
| 2023-12-12 | text-wrap: balance & pretty #CSSWrapped2023 |