Подробный разбор ленивой загрузки изображений в Chrome
Карлес Ньюнез столкнулся с проблемой при использовании нативной ленивой загрузки изображений, разобрался с ней и написал статью "Deep dive into lazy loading images".
Нативная ленивая загрузка изображений, которую можно активировать с помощью атрибута loading="lazy"
, появилась в Chrome 76 и Firefox 75. Браузеры начинают загружать изображения по-разному. В Chrome минимальное расстояние до изображения, при котором начинается его загрузка, составляет 3000 пикселей. Автору статьи это не подходило, и он для ленивой загрузки остановился на библиотеке lazysizes.
В отличие от других подобных библиотек lazysizes дружит с SEO. Google при обходе страниц не использует прокрутку. Библиотека проверяет, может ли user agent использовать прокрутку, и если нет, то сразу загружает все изображения.
Рекомендую почитать статью. Карлес в статье добрался до самых исходников Chromium.
https://dev.to/carlesnunez/deep-dive-into-lazy-loading-images-211f