Lazy Loading: что это и как реализовать

Что такое Lazy Loading

Lazy Loading (ленивая загрузка) — техника веб-оптимизации, при которой ресурсы (изображения, видео, компоненты) загружаются только в момент, когда они нужны пользователю — обычно когда элемент входит в область просмотра (viewport).

Противоположность — eager loading (загрузка всего сразу при открытии страницы).

Зачем нужен Lazy Loading

Преимущества ленивой загрузки:

• Скорость — страница загружается быстрее, так как загружаются только видимые изображения
• Трафик — экономия данных: пользователи не загружают изображения которые не увидят
• LCP — улучшение Largest Contentful Paint для первого экрана
• Память — браузер хранит меньше данных в памяти

Нативный Lazy Loading в HTML

С 2019 года браузеры поддерживают нативный lazy loading через атрибут loading:

<!-- Ленивая загрузка изображения -->
<img src="photo.jpg" loading="lazy" alt="Photo" width="800" height="600" />

<!-- Ленивая загрузка iframe -->
<iframe src="map.html" loading="lazy" width="600" height="400"></iframe>

Значения атрибута loading

| Значение | Поведение | |----------|-----------| | lazy | Загружается при приближении к viewport | | eager | Загружается немедленно (по умолчанию) | | auto | Браузер решает сам |

Важно: отключите lazy loading для hero-изображений

<!-- Главное изображение — загружать немедленно! -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="Hero" />

<!-- Все остальные изображения — lazy -->
<img src="photo2.jpg" loading="lazy" alt="Photo 2" />

Hero-изображение влияет на LCP — атрибут loading="lazy" задержит его и ухудшит метрику.

JavaScript Intersection Observer

Для более тонкого контроля используйте Intersection Observer API:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '200px' // загружать за 200px до появления
});

images.forEach(img => observer.observe(img));

<!-- HTML для JS lazy loading -->
<img data-src="photo.jpg" src="placeholder.jpg" alt="Photo" />

Lazy Loading компонентов в React / Next.js

import dynamic from 'next/dynamic';

// Компонент загружается только при необходимости
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <div>Загрузка...</div>,
  ssr: false
});

// Маршруты автоматически lazy-loaded в Next.js App Router

Lazy Loading видео

<video loading="lazy" preload="none" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4" />
</video>

preload="none" предотвращает предзагрузку видео.

Проверка изображений на reChecker

Используйте Проверку изображений для анализа изображений на вашем сайте. Инструмент покажет:

• Изображения без атрибута loading
• Размеры изображений и рекомендации по оптимизации
• Отсутствующие alt тексты
• Изображения без явных размеров (влияют на CLS)

FAQ

Lazy Loading влияет на SEO? Нативный lazy loading безопасен для SEO — Google поддерживает его. JavaScript lazy loading может быть проблемой если Googlebot не выполняет скрипты. Используйте нативный атрибут loading="lazy" для SEO-безопасного подхода.

Когда именно начинается загрузка lazy-изображений? Браузеры начинают загрузку за несколько сотен пикселей до появления в viewport (зависит от браузера и скорости соединения). Это предотвращает заметную задержку при скролле.

Стоит ли использовать плейсхолдеры (LQIP)? LQIP (Low-Quality Image Placeholder) — техника показа размытой версии изображения до загрузки полной. Улучшает восприятие загрузки, но требует дополнительного кода. Next.js Image компонент поддерживает LQIP из коробки.