Debugging Fetch Priority

Ғылым және технология

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

Пікірлер: 21

  • @leonardodeslf
    @leonardodeslf7 ай бұрын

    7 minutes felt like 3 with you guys, good job as always 🚀

  • @SeanHenri
    @SeanHenri7 ай бұрын

    I’ve been using fetchpriority for a long time, but this helped me see some things that I was definitely overlooking. Super helpful! Thank you!

  • @patricknelson
    @patricknelson5 ай бұрын

    Love these videos about core web vitals!

  • @TheHenry0127
    @TheHenry0127Ай бұрын

    very helpful! thank you!

  • @EddieCheng174
    @EddieCheng1747 ай бұрын

    amazing content!

  • @kirillzlobin7135
    @kirillzlobin71356 ай бұрын

    Nice info

  • @Yoshi-t5hKm
    @Yoshi-t5hKm7 ай бұрын

    Nice

  • @ChandeshwarKumarTiwari
    @ChandeshwarKumarTiwari7 ай бұрын

    Good

  • @anasfateh1831
    @anasfateh18314 ай бұрын

    is theis attribute can be added to a div?? because in my case i am adding the image as a background prop in CSS ab=nd apply it to the div holding this image

  • @markogartnar5658
    @markogartnar56584 ай бұрын

    Why is the fetchpriority property not also on the svg use tag?

  • @ackieu3277
    @ackieu32777 ай бұрын

    Chào same as goodbye in Vietnamese🇻🇳

  • @yogeshkad6928
    @yogeshkad69287 ай бұрын

    You are doing very great job I am requesting to you why you don't make a whole playlist to development means from scratch to advanced level like front end and back end and all the fundamentals of programming I am happy to learn from you I know you are consistently making video but if you make like this kind of playlist then it will help us or if you provide me any trustable resource or I will follow it and along with it keep in mind of accessibility because I am a screen reader user visually impaired that's why I am pointing this point and I am accessibility tester thank you

  • @firiasu
    @firiasu7 ай бұрын

    I started to panic when Jecelyn's voice appeared but the picture didn't!

  • @user-jd2kx9nb1t
    @user-jd2kx9nb1t7 ай бұрын

    У меня тоже страшная рожа, возьмите и меня актёром в ваши ролики!

  • @Black1991Star
    @Black1991Star7 ай бұрын

    Why do you use such a long name for an attribute? fetchpriority for each img on a page...It's a terrible name

  • @wobsoriano

    @wobsoriano

    7 ай бұрын

    Long but readable is king

  • @tunetheweb

    @tunetheweb

    7 ай бұрын

    Oh there was SOOO much discussion on the name. Check it out here: github.com/whatwg/html/issues/7150. One of the keypoints we make in the video is it should NOT be used on each img on a page. It should be used sparingly on important images. So the length doesn't really matter that much and clarity if better than shorter but unclear. See here: github.com/WICG/priority-hints/issues/35

  • @Black1991Star

    @Black1991Star

    7 ай бұрын

    @@tunetheweb "Striving to be better, oft we mar what's well." You provide a fine-tuning tool and at the same time immediately limit its use. It doesn't work like that. I constantly come across hundreds of plugins that use enhancement attributes that are used incorrectly and the developers do not want to fix it. For example, plugins for WordPress that insert loading="lazy" for each image in page. (For top logo too) But if you're a backend developer and want to solve this problem, you'll need to create a task tracker that checks every image before showing... so where's the optimization? Long HTML attributes bring global warming closer

  • @tunetheweb

    @tunetheweb

    7 ай бұрын

    I'm not sure exactly what the point you're trying to make@@Black1991Star ? Yes it's a fine-tuning tool, no it's not limited, but it's advised to self-limit it (it's a fine tuning tool after all!). It's an interesting idea to ignore fetchpriority attributes after the first X elements that contain it to reduce it's potential incorrect usage, but even then it would likely still be incorrect to use on those first few elements. Giving appropriate guidance (like this video) is one way to try to help developers use new features appropriately. As stated in the video, if unsure whether to use it or not, the advice is not to use it and the browser is pretty good to manage the priorities in a reasonably optimal way, but this fine tuning attribute definitely does help for those wanting an extra boost.

  • @Black1991Star

    @Black1991Star

    7 ай бұрын

    @@tunetheweb Imagine that this attribute is like candy. As a developer, you might say, "I'm offering you a piece of candy that can enhance your life, but be mindful not to indulge too much, as it could affect your figure and upset your stomach." Despite being a delightful treat, it's crucial for confectioners to ensure that consuming 10-30 candies at a time wouldn't pose a health risk. Moreover, they should take measures to ensure that candy wrappers (in this case, the length of the HTML attribute) don't contribute to environmental pollution, regardless of whether the candy is consumed or not.

Келесі