Что такое 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 из коробки.