Lazy loading: отложенная загрузка изображений и контента
Что такое lazy loading
Lazy loading (ленивая загрузка) — техника, при которой ресурсы (изображения, видео, iframe) загружаются только когда пользователь прокручивает страницу до них. Всё, что ниже видимой области экрана, не загружается при открытии страницы, что значительно ускоряет начальную загрузку.
Это одна из ключевых техник оптимизации PageSpeed: меньше запросов при загрузке → быстрее LCP → выше оценка Core Web Vitals → лучше позиции в поисковых системах.
Что можно загружать лениво
Изображения
Главный кандидат для lazy loading. Страница с 20 изображениями по 200 КБ загружает 4 МБ при открытии. С lazy loading — только 2–3 изображения первого экрана (~600 КБ).
Видео и iframe
YouTube-видео загружает 500+ КБ скриптов. Embed-карты Яндекс.Карт — ещё больше. Lazy loading iframe экономит ресурсы, пока пользователь не долистал до видео.
Тяжёлые скрипты
Виджеты чатов, скрипты аналитики, социальные виджеты. Загружайте их после основного контента или по взаимодействию пользователя.
Способы реализации
Нативный lazy loading (рекомендуем)
HTML-атрибут loading="lazy" — самый простой способ. Поддерживается всеми современными браузерами.
Для изображений: <img src="photo.webp" loading="lazy" width="800" height="600" alt="Описание">
Для iframe: <iframe src="..." loading="lazy"></iframe>
Важно: не ставьте loading=»lazy» на изображения первого экрана (hero, логотип) — они должны загружаться сразу.
JavaScript-библиотеки
Для более сложных сценариев: lazysizes, lozad.js. Поддерживают фоновые изображения, анимации при появлении. Используйте, только если нативного lazy loading недостаточно.
WordPress-плагины
WordPress 5.5+ включает нативный lazy loading для изображений по умолчанию. Для расширенного контроля: WP Rocket, Perfmatters, Smush. Подробнее о плагинах WordPress.
Лучшие практики
- Указывайте width и height — без размеров изображение вызовет CLS (сдвиг макета)
- Используйте placeholder — цветной прямоугольник или размытое превью (LQIP)
- Не применяйте к LCP-элементу — hero-изображение должно загружаться сразу, используйте
loading="eager"илиfetchpriority="high" - Комбинируйте с WebP — lazy loading + WebP = максимальная экономия трафика
- Тестируйте — проверяйте, что изображения загружаются при скролле (Chrome DevTools → Network)
Lazy loading для YouTube-видео
Вместо embed-iframe показывайте превью видео (картинку). При клике заменяйте на iframe. Это экономит 500+ КБ на каждое видео. Плагин WP YouTube Lyte делает это автоматически. Или используйте атрибут srcdoc с превью.
Влияние на SEO
Google корректно индексирует lazy-loaded контент (и нативный, и JavaScript-based). Но убедитесь, что:
- Все изображения доступны в HTML (src или data-src)
- Alt-теги заполнены
- Контент ниже fold доступен при скролле, не скрыт за кликом
Хотите ускорить загрузку сайта? Обращайтесь в DZ Digital — внедрим lazy loading и другие техники оптимизации.
Lazy loading ломает вёрстку — как исправить?
Обычно причина — отсутствие атрибутов width и height у изображений. Без них браузер не знает размер до загрузки и происходит сдвиг макета (CLS). Всегда указывайте размеры или используйте CSS aspect-ratio.
Нужен ли lazy loading, если у меня мало изображений?
Если на странице 1–3 изображения, выигрыш минимален. Но если есть YouTube-видео, карты или тяжёлые виджеты — lazy loading для iframe даст ощутимый эффект. Для страниц блога и каталога с множеством картинок — обязательно.
WordPress уже включает lazy loading — нужны ли ещё плагины?
WordPress добавляет loading=»lazy» к изображениям в контенте и миниатюрам записей. Этого достаточно для базового случая. Плагины нужны для: lazy loading iframe, фоновых изображений, YouTube-видео и расширенных placeholder (LQIP, blur-up).