search

WordPress / performance

Performance plugin from the WordPress Performance Group, which is a collection of standalone performance modules.
https://wordpress.org/plugins/performance-lab/
GNU General Public License v2.0
338 stars 90 forks source link

Add fetchpriority=low to occluded initial-viewport images #1309

Open westonruter opened 6 days ago

westonruter commented 6 days ago

Feature Description

When an image is in the initial viewport but is hidden, it should get fetchpriority=low. For example, this would apply to images which appear inside of a mega menu or images which are part of hidden carousel slides. Such images should not get loading=lazy since they should still be loaded and ready to go the moment the user interacts with the page to reveal it, but they should not get the same priority as images which are visible when first loading the page.

See https://web.dev/articles/fetch-priority#lower-carousel-priority

devansh016 commented 3 days ago

@westonruter I would like to contribute on this. Can you assign me this issue?

westonruter commented 3 days ago

@devansh016 Actually I don't think it's going to be as simple as what you've proposed in #1320. Namely if I understand correctly, your PR would add fetchpriority=low to every image that is currently also getting loading=lazy. I don't think the URL metrics actually capture the necessary information yet to implement what we need here, and that is to detect images which are not visible while also being "above the fold". These would be non-initial images in a carousel which appears in the initial viewport, or images which appear inside of a mega menu which is not open until clicked. We'll need to think some more about how best to capture this information in detect.js.