Максимально содержательно про 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 оценки)

Задайте вопрос или оставьте комментарий

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

Новый сервис для тех, кто хочет отслеживать видимость бренда в нейросетях от Пиксель Тулс
Новый сервис для тех, кто хочет отслеживать видимость бренда в нейросетях от Пиксель Тулс
Новый сервис от Пиксель Тулс — мониторинг видимости бренда в популярных нейросетях (ChatGPT, DeepSeek, Claude, YandexGPT и др.) с аналитикой и рекомендациями. Проверьте свой бренд прямо сейчас!
2 Июля 2025
Анонс вебинара «Региональное SEO: как продвигать бизнес в городах до 500 тыс. человек»
Анонс вебинара «Региональное SEO: как продвигать бизнес в городах до 500 тыс. человек»
24 июня в 11:00 (МСК) на нашем YouTube-канале пройдёт вебинар с Романом Калининым (KeyCraft). Узнаете, как эффективно продвигать бизнес в городах до 500 тыс. человек: особенности локального SEO, что работает в 2025, разбор ключевых кейсов. Регистрируйтесь
19 Июня 2025
Добавили GPT-Image-1 в ИИ-генератор изображений
Добавили GPT-Image-1 в ИИ-генератор изображений
В Пиксель Тулс появилась GPT-Image-1 — новая модель от OpenAI для создания изображений. Она понимает русский язык и пишет на нём. Генерируйте логотипы, инфографику, баннеры и иллюстрации. Попробуйте GPT-Image-1 прямо сейчас!
9 Июня 2025
С Днём SEO-специалиста
С Днём SEO-специалиста
Команда Пиксель Тулс поздравляет SEO-специалистов с профессиональным праздником! Желаем топовых позиций, стабильного трафика и понятных апдейтов. Спасибо, что делаете интернет лучше!
28 Мая 2025
Анонс вебинара «SEO для ECOM 2025: 2 исследования + тренды + всё что нужно знать, чтобы выжать максимум»
Анонс вебинара «SEO для ECOM 2025: 2 исследования + тренды + всё что нужно знать, чтобы выжать максимум»
5 июня в 11:00 (по МСК) на YouTube-канале проведём вебинар с Дмитрием Севальневым. Обсудим: SEO мертво или нет? Тренды 2025; Какие работы дают результат, а какие нет; Кейсы. Подпишитесь, чтобы не пропустить.
23 Мая 2025
Проверка UpTime сайта стала платной
Проверка UpTime сайта стала платной
Проверка UpTime сайта теперь платная для снижения нагрузки на инфраструктуру сервиса. Включите её в настройках проекта, если она вам действительно нужна. Стоимость 1 лимит за 1 запрос (96 лимитов в сутки).
16 Мая 2025

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

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

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

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