> The accepted practice is to not add lazy-loading to images above the fold, especially the LCP image.
I didn't know that. Apparently (at least according to Claude) you shouldn't use loading="lazy" on images that you expect to always display because doing so causes them to not be loaded until the browser has determined they are definitely in the viewport, which is a minor performance regression.
LCP = Largest Contentful Paint, the Core Web Vitals metric for when the largest visual element finishes rendering. That's usually the largest above-the-fold image.
> Not documented anywhere (but seems to work fine in major browsers)
Which part of it is not documented? Putting device width dependent preloading in HTTP header? MDN says that the HTTP link header works the same way as the link element, and also that the link element a has media attribute : https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
I like this solution, it looks very simple and should’ve been consider as part of best practices if it works technically. However, I also think that this whole trade off is broken from the beginning, it should be part of browser’s set of rules to either decide or not it should render the image or not by default, and the decision of eagerly load an image should just an hint given by the developer as a scape hatch. The current approach forces the decision to be forcefully deferred to the application which needs to guess what’s the best approach for the current set of devices in the market which also adds a constant maintenance burden.
I guess it depends highly on what you value. I dislike site that eagerly load all their images below the fold, since on my mobile phone I have a metered data plan. Unlimited data is still uncommon or very expensive in many countries. For example I pay $13/mo for 650Mb of data, which is one of the best value plans (under $40/mo) from any provider.
8 comments
[ 5.3 ms ] story [ 37.1 ms ] threadI didn't know that. Apparently (at least according to Claude) you shouldn't use loading="lazy" on images that you expect to always display because doing so causes them to not be loaded until the browser has determined they are definitely in the viewport, which is a minor performance regression.
LCP = Largest Contentful Paint, the Core Web Vitals metric for when the largest visual element finishes rendering. That's usually the largest above-the-fold image.
Which part of it is not documented? Putting device width dependent preloading in HTTP header? MDN says that the HTTP link header works the same way as the link element, and also that the link element a has media attribute : https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
I just tested on Chrome Android via remote inspect using developer tools. It loaded the image even when the image was below the fold.