Performance 2024: image prioritization and discoverability #3960
Conversation
Co-authored-by: Barry Pollard <[email protected]>
src/content/en/2024/performance.md
Outdated
|
|
||
| Overall, lazy-loading images is a helpful performance technique that should be used to postpone loading of non-critical resources until they are near the viewport. However, using lazy-loading on the LCP image will delay the browser from loading it quickly. That is why lazy-loading should not be used on LCP elements. In this section, we explore how many sites use this performance anti-pattern. | ||
| As we'll explore in the following sections, there are three primary ways that websites prevent their LCP resources from being statically discoverable: lazy-loading, CSS background images, and client-side rendering. |
There was a problem hiding this comment.
If an LCP image is lazy loaded (natively) then it is still statically discoverable. Only custom approaches (6.7% of sites) are included in the 35%. Might be worth clarifying.
There was a problem hiding this comment.
If an LCP image is lazy loaded (natively) then it is still statically discoverable
Effectively not. It's not discoverable by the preload scanner, and needs CSS to run layout to know if it's in viewport. Which effectively means it's not statically discoverable (i.e. it's the same as if it was hidden in CSS background image, or within JS that needs to run).
There was a problem hiding this comment.
Fair enough, but the custom metric definition of is_statically_discoverable doesn't take this into consideration.
The image is considered statically discoverable if it is preloaded or available in the image src or srcset:
const rawLcpElement = Array.from(rawDoc.querySelectorAll('picture source, img, svg image')).find(i => {
let src = i.src;
if (i.hasAttribute('srcset')) {
src = splitSrcSet(i.srcset).find(src => src == lcpUrl);
} else if (i.hasAttribute('href')) {
src = i.getAttribute('href');
}
return new URL(src, location.href).href == lcpUrl;
});There was a problem hiding this comment.
Good point @kevinfarrugia, I think it's at least worth mentioning that native lazy loading isn't included in the static discoverability stat. We might want to consider looking at a different high-level metric in the future that captures all of the causes of resource load delay.
|
OK let's merge this before the live stream. We can make further adjustments as needed. |
Updates the prioritization and discoverability queries and includes their results in the chapter, also adds a figure for % of unsized images
I did a bit of editorializing so definitely want @ines-akrap and @imeugenia's LGTM
Once published, I'll update the corresponding links in https://web.dev/articles/top-cwv to point to the 2024 results