Максимально содержательно про Lazy Loading! Пора внедрять отложенную загрузку для изображений и iFrame

В июле Google Chrome, начиная с 76 версии, начал поддерживать отложенную загрузку изображений и фреймов с помощью простого добавления атрибута loading="lazy", без использования дополнительных скриптов.

Максимально коротко разбираемся, как это работает.

Поддержка Lazy Loading

Lazy Loading позволяет подгружать элементы на страницы только в момент, когда они фактически появляются в видимой пользователю части страницы, то есть при скролле.

Метод позволяет существенно оптимизировать скорость загрузки страницы, сокращая время первой отрисовки контента (FCP) и задержка после первого ввода (FID).

Ранее реализация требовала дополнительных JS-скриптов. Теперь для картинок и фрейм-элементов (например, видео) можно просто добавить атрибут loading="lazy".

Атрибут уже поддерживается популярными браузерами на основе Chromium (Chrome, Edge, Opera) и Firefox.

Как использовать атрибут loading?

Для атрибута мы можем выбрать одно из 3 значений:

1. loading="lazy" — отложенная загрузка по умолчанию (рекомендуемое значение).

2. loading="eager" — загрузить сразу (не рекомендуется).

3. loading="auto" — браузер сам определит как именно загружать элемент.

Пример кода для изображений:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Пример кода для iFrame-элементов:

    
<iframe src="https://example.com"
	loading="lazy"
	width="600"
	height="400"
</iframe>

Обратите внимание, чтобы избежать смещения макета при отрисовке (CLS), для элементов рекомендуется задавать высоту (height) и ширину (width). В таком случае под каждый элемент заранее отводится необходимое место и вёрстка не пострадает, даже при отложенной загрузке.

Это важно в условиях нового фактора ранжирования Google Page Experience.

Пороги срабатывания

Здесь всё автоматизировано и зависит от скорости соединения. Так, в случае Chrome, для 4G-соединений порог уменьшился с 3000px до 1250px, для 3G чуть больше — с 4000px до 2500px.

В будущем обещают поддержку кастомных значений threshold и приоритет загрузки элементов. Кроме того, в режиме Lite Mode (пока доступен только на Android), Lazy Loading активируется автоматически, даже если не прописан соответствующий атрибут.

Проблемы с индексацией контента?

Googlebot не умеет скроллить страницы, но видимая часть для краулера значительно больше, чем в случае реальных пользователей. Для мобильных устройств страница загружается с высотой 12140px, для десктопа — 9307px. Если важный для индексации контент находится в этих пределах, при использовании loading="lazy" проблем не возникнет.

В случае Яндекса реализация отложенной загрузки с помощью JS могла привести к проблемам с индексацией, если изображение дополнительно не размещалось в контейнере <noscript>. Атрибут loading="lazy" должен решить и эту проблему, устраняя необходимость подгружать картинки с помощью скриптов и отдавая чистый HTML-код поисковым роботам.

Что ещё поможет ускорить загрузку страниц?

• Оптимизация JavaScript.

• Подготовка к новому фактору ранжирования Page Experience.

• 4 нестандартных способа ускорить загрузку страниц сайта.

• Что влияет на PageSpeed?

• 12 технических советов для разгона скорости страниц.