LAZY LOADING IMAGES AND MEDIA: HOW FAR AHEAD BROWSERS FETCH

Summary from the TLDR Dev newsletter

Browsers fetch lazy-loaded media at different distances, with Chrome adjusting its margin based on connection speed, Firefox using a fixed 600-pixel threshold, and Safari applying a viewport-based threshold to images. The article explains why the largest contentful paint image should load eagerly and why media dimensions should be reserved to prevent layout shifts. Its practical takeaway is to use native lazy loading selectively, based on how far ahead each browser fetches.