Атрибут loading="lazy" откладывает загрузку изображения, пока оно не приблизится к видимой области страницы. Применяйте его к контентным изображениям ниже первого экрана, но не к главному изображению, логотипу и другим важным элементам начальной отрисовки. Так отложенная загрузка изображений HTML помогает экономить сетевые ресурсы, не задерживая появление содержимого, которое пользователь должен увидеть сразу.
Что проверить перед включением lazy loading
- Выберите изображения, которые находятся ниже первого экрана и не нужны для первоначальной отрисовки.
- Не откладывайте загрузку главного изображения страницы и других вероятных элементов LCP.
- Убедитесь, что у изображений заданы размеры или соотношение сторон, чтобы избежать скачков макета.
- Проверьте, не добавляет ли lazy loading система управления контентом или плагин автоматически.
- После изменений проверьте загрузку страницы на мобильном устройстве и в браузере.
Каким изображениям подходит loading="lazy"
Атрибут подходит для изображений, которые пользователь увидит после прокрутки: иллюстраций в длинных статьях, фотографий в галереях и изображений в нижних блоках страницы. Браузер сам определяет момент загрузки по мере приближения изображения к области просмотра.
Не применяйте отложенную загрузку без разбора ко всем изображениям. Если картинка видна сразу или является важной частью первого экрана, задержка может ухудшить воспринимаемую скорость и показатели загрузки. Атрибут также не заменяет сжатие файлов и выбор подходящего размера изображения - эти меры нужны для оптимизации скорости загрузки сайта.
Как добавить атрибут в HTML и шаблоны сайта
Для отдельного изображения добавьте атрибут к тегу <img>:
<img src="/images/article-example.webp"
alt="Иллюстрация к статье"
width="800"
height="600"
loading="lazy">В шаблоне сайта добавляйте атрибут только к тем изображениям, для которых он уместен. Проверьте условия вывода: одно и то же поле шаблона может использоваться и для главного изображения, и для картинок внизу страницы. В проектах с CMS или компонентами перед правкой убедитесь, что разметка не формируется автоматически.
Перед изменениями подготовьте:
- доступ к шаблону, компоненту или редактору, который формирует HTML изображений;
- список изображений первого экрана и расположенных ниже него;
- резервную копию изменяемого шаблона или возможность быстро отменить публикацию;
- инструменты разработчика браузера для проверки разметки и сетевых запросов.
Когда изображение должно загружаться сразу
Если важная картинка оказывается на первом экране, оставьте её без loading="lazy". Чтобы внести изменение безопасно, пройдите шаги ниже.
-
Найдите изображение, которое важно показать сразу.
Проверьте верхнюю часть страницы на типичном экране телефона и компьютера. Отметьте главный баннер, обложку статьи и другие изображения, необходимые для первичной отрисовки. -
Проверьте, какое изображение связано с LCP.
В инструментах разработчика или отчёте о производительности посмотрите, какой элемент определён как Largest Contentful Paint. Если это изображение, не откладывайте его загрузку. -
Уберите lazy loading только у критичных изображений.
Удалите атрибут из соответствующего тега или измените условие в шаблоне. Остальные изображения ниже первого экрана можно оставить сloading="lazy". -
Проверьте загрузку после публикации.
Откройте страницу с чистой загрузкой и убедитесь, что важное изображение запрашивается сразу, а нижние изображения загружаются при прокрутке. Если результат неверен, откатите изменение и проверьте шаблон или скрипт, который меняет атрибуты.
Как учесть LCP, размеры и адаптивные источники
После настройки проверьте страницу по этому списку:
- Главное изображение не получает
loading="lazy", если оно находится в первом экране. - Атрибут не добавлен автоматически ко всем тегам
<img>, включая логотип и обложку. - Для изображений заданы
widthиheightлибо зарезервировано место с помощью CSS. - Для адаптивных изображений корректно работают
srcsetиsizes, если они используются. - Каждый вариант изображения имеет подходящие размеры и не загружает чрезмерно большой файл на узком экране.
- В консоли нет ошибок загрузки, а в сетевых запросах видны ожидаемые файлы.
- Показатели LCP и визуальная стабильность не ухудшились после изменения.
Размеры в разметке помогают браузеру заранее выделить место под изображение. Это снижает вероятность смещения соседнего текста при загрузке. Для более широкой оптимизации и понимания, как ускорить загрузку изображений на сайте, проверьте также формат, вес файлов и соответствие размеров изображения его отображаемой области.
Как проверить отложенную загрузку в браузере
Откройте инструменты разработчика, выберите вкладку с сетевыми запросами и перезагрузите страницу. Проследите, какие изображения загружаются сразу, затем прокрутите страницу и проверьте, появляются ли запросы к изображениям в нижних блоках.
При диагностике обратите внимание на частые ошибки:
- Lazy loading назначен главному изображению, поэтому оно появляется позже содержимого.
- Атрибут установлен только в одном шаблоне, а другие компоненты продолжают выводить изображения без него.
- Скрипт или плагин заменяет стандартное поведение и управляет загрузкой отдельно.
- У изображения нет размеров, поэтому страница смещается после его появления.
- Для изображения выбран неподходящий файл или адаптивный источник не срабатывает.
- Проверка выполняется только после прокрутки: чтобы увидеть исходное поведение, сначала перезагрузите страницу.
- Результат оценивается только визуально, без проверки запросов и показателей производительности.
Где провести границу: сравнение сценариев загрузки
| Сценарий | Рекомендуемое поведение | Когда подходит |
|---|---|---|
| Изображение первого экрана | Загружать сразу, не устанавливать loading="lazy" |
Главный баннер, обложка или важная иллюстрация, видимая при открытии страницы |
| Изображение ниже первого экрана | Использовать loading="lazy" |
Иллюстрации в статье, нижние секции страницы, фотографии в галерее |
| Изображение, управляемое JavaScript | Проверить поведение скрипта и сетевые запросы отдельно | Компонент сам загружает или подменяет источник изображения |
Если после настройки оптимизация скорости не дала ожидаемого результата, проверьте и другие причины: вес изображений, кеширование, шрифты и скрипты. При оценке работ по запросу "ускорение загрузки сайта цена" сравнивайте состав диагностики и изменений, а не только перечень обещанных улучшений. Если требуется веб-разработка заказать для действующего проекта, передайте специалисту список критичных изображений и результаты проверки браузера.
Разбор спорных случаев отложенной загрузки изображений
Можно ли ставить loading="lazy" на все изображения?
Не рекомендуется: изображения первого экрана могут загрузиться позже и повлиять на отображение важного содержимого. Отложенную загрузку назначайте выборочно, с учётом расположения и назначения картинки.
Нужно ли добавлять loading="lazy" к фоновому изображению в CSS?
Атрибут применяется к элементам <img> и не управляет загрузкой CSS-фонов напрямую. Для фонового изображения нужно отдельно оценить способ загрузки и его влияние на первый экран.
Может ли браузер проигнорировать loading="lazy"?
Момент загрузки определяет браузер, поэтому нельзя рассчитывать на точный порог срабатывания. Проверяйте фактические запросы и не используйте lazy loading для изображения, которое должно появиться немедленно.
Нужен ли loading="lazy" для изображения в галерее?
Для изображений, расположенных ниже видимой области, он обычно уместен. Первое изображение галереи следует оценить отдельно, особенно если оно отображается сразу после открытия страницы.
Нужно ли указывать размеры вместе с loading="lazy"?
Да, задайте размеры в HTML или зарезервируйте место средствами CSS. Это помогает избежать смещения макета, когда изображение загрузится.
Как понять, что отложенная загрузка настроена правильно?
Проверьте сетевые запросы при загрузке страницы и во время прокрутки, а затем оцените LCP и стабильность макета. Важное изображение должно загружаться вовремя, а нижние - по мере приближения к области просмотра.
Автор: Наталья Орлова