Ленивая загрузка позволяет загружать изображения и содержимое iframe только тогда, когда они попадают во viewport браузера. Раньше подобный трюк можно было провернуть, используя JavaScript для отслеживания позиции элементов на странице. При ленивой нативной загрузке процесс проверки осуществляется вне главного потока JS. Это более производительно и не приводит к потере кадров при прокрутке страницы.
Энди обкатал ленивую загрузку на небольшом внутреннем продукте BBC (3000 пользователей в день). На странице этого сайта выполняется запрос, который может привести к загрузке 100 изображений. На быстром соединении время загрузки одного изображения снизилось до 50% (с одной секунды до 500 миллисекунд). Также снизилась нагрузка на сервер — для некоторых сессий количество запросов снизилось на треть.
Ленивая загрузка добавляется с помощью атрибута
loading="lazy":<img src="image.png" loading="lazy" width="400" height="400" />
Фича очень полезная. Когда её поддержка появится в других браузерах, будет совсем круто.
P.S. Я уже писал про ленивую загрузку ранее; другой пост можно найти по тегу #lazy.
#lazy #chrome #performance
https://medium.com/bbc-design-engineering/native-lazy-loading-has-arrived-c37a165d70a5
Views before: 567