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

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

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

Поддержка Lazy Loading

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.

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

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

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

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

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

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

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

Рейтинг новости
5 (44 оценки)
Задайте вопрос или оставьте комментарий

Читайте также

11 новых блоков по Яндекс.Директу в SEO-отчётах
11 новых блоков по Яндекс.Директу в SEO-отчётах
В отчёты добавили 11 новых блоков по Яндекс.Директу. Детальная аналитика кампаний, конверсий, аудитории. Экономьте часы на отчётах и доказывайте эффективность клиентам.
30 Сентября 2025
Пиксель Подкаст #11 — Как страх сцены мешает личному бренду и росту бизнеса? Дмитрий Першин
Пиксель Подкаст #11 — Как страх сцены мешает личному бренду и росту бизнеса? Дмитрий Першин
Новый выпуск Пиксель Подкаста: Дмитрий Першин о том, как прокачать личный бренд, справиться со страхом сцены и использовать публичные выступления для роста в карьере и бизнесе.
30 Сентября 2025
ElevenLabs + Suno в ИИ-генераторе аудио
ElevenLabs + Suno в ИИ-генераторе аудио
Озвучка текстов голосами ElevenLabs, точная транскрибация и песни с Suno. Экономия до 70% на продакшн. Попробуйте ИИ-генератор аудио онлайн.
18 Сентября 2025
Новый раздел «Источники» в AI SEO проектах
Новый раздел «Источники» в AI SEO проектах
Запустили анализ источников из 3 нейросетей: Яндекс Алиса, Google AI Overview, Perplexity. Узнайте, где вас упоминают и увеличьте трафик на 50%+. Начните использовать новый инструмент аналитики прямо сейчас!
11 Сентября 2025
Анонс вебинара «Всё, что мы знаем о AI SEO (GEO) прямо сейчас»
Анонс вебинара «Всё, что мы знаем о AI SEO (GEO) прямо сейчас»
9 сентября в 11:00 (МСК) проведём вебинар с Дмитрием Севальневым. Поговорим о роли AI SEO в стратегии, KPI, рынке и практических действиях на 2025 год. За активность и лучшие вопросы разыграем тариф «Профессионал» в Пиксель Тулс и доступ к нашим курсам.
4 Сентября 2025

ТОП-4 популярных инструментов

Список URL в ТОП
Сервис для быстрой выгрузки ТОП-10 до ТОП-200 сайтов по заданным поисковым запросам в Яндекс и Google. Получение списка URL в ТОПе с выбором региона по заданной глубине проверки
ИИ-генератор изображений
Онлайн-генерация картинок из текста на русском языке нейросетями Midjourney, Dall-E 3, Leonardo AI. Просто введите описание и искусственный интеллект (ИИ) создаст красивое и уникальное изображение.

Узнайте, как увеличить SEO‑трафик сайта в 3+ раза?

Укажите домен + регион продвижения, получите текущие позиции проекта в выдаче и первые 25 рекомендаций для роста трафика и заказов.
1
Выберите ваш сайт
Укажите сайт, регион и близких вам конкурентов
2
Магия поисковой оптимизации
25 персональных рекомендаций ждут вас
3
Отслеживайте прогресс
Получайте регулярные советы, рост трафика и продаж
0%
Подбираем семантику,
это займёт около 20-30 секунд
Открыть справку Написать в поддержку
Обратная связь и помощь
Если у вас есть идеи, как улучшить данный инструмент или остались вопросы по работе с ним, напишите в нашу службу поддержки, мы обязательно вам поможем.