11–20 of 23 posts
> 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 could not find this hack documented or discussed anywhere, that's what I meant.
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…
Not a fan of lazy loading. My time is more valuable than bandwidth.
Is it the “min-width=1024px” in the link that causes it to not load on smaller devices?
> 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 could not find this hack documented or discussed anywhere, that's what I meant.
I just tested on Chrome Android via remote inspect using developer tools. It loaded the image even when the image was below the fold.
I dont think this works. I just tested on Chrome Android via remote inspect using developer tools. It loaded the image even when the image was below the fold.
> 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 Content…
Lazy-loading is an effective technique we can use to delay non-critical resources at the beginning of the page load. However, a considerable problem occurs when we apply this technique to an LCP image. Lazy-loading prevents the browser from loading the image immediately because it takes time for it to realize that the image is in the viewport and needs to be loaded. According to some lab tests, this could cause a 15% regression in LCP performance. This might sound obvious for someone working on web performance, but the fact that nearly one in five web pages are doing it is a sign that it’s not very well understood by most other web developers.
[1]: https://calendar.perfplanet.com/2022/lazy-loading-lcp-images...
Not a fan of lazy loading. My time is more valuable than bandwidth.