Lazy Load

Определение: Lazy Load (ленивая загрузка) — это подход, когда тяжёлые ресурсы (чаще всего изображения, видео или части JavaScript) загружаются не сразу, а только когда они действительно нужны: например, когда пользователь докрутил страницу до нужного блока. Это снижает вес первой загрузки и делает сайт быстрее “на старте”.

Зачем это нужно

• Ускорять первую загрузку страницы: не тянуть сразу всё, что находится “ниже первого экрана”.
• Экономить трафик пользователя: ресурсы загружаются только при необходимости.
• Снижать нагрузку на сервер/CDN: меньше одновременных запросов при заходе на страницу.
• Улучшать пользовательский опыт: страница становится быстрее интерактивной.
• Помогать метрикам производительности (в том числе LCP/INP), когда оптимизируется критический путь загрузки.
• Делать большие страницы (каталоги, ленты) более “лёгкими” и управляемыми.

Пример

Пример кода:

// Находим все изображения с ленивой загрузкой
const images = document.querySelectorAll('img[data-src]');

// Когда картинка близко к экрану — подставляем реальный src
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
const img = entry.target;
img.src = img.dataset.src;
io.unobserve(img);
});
});

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

Скриншот

Подпись к скриншоту: DevTools “Network”: показать, что изображения “ниже первого экрана” подгружаются только после скролла

Частые ошибки

• Ставить Lazy Load на изображения первого экрана: это может ухудшить LCP и визуальную скорость.
• Не задавать размеры изображений (width/height или через CSS), из-за чего появляется “прыжок” верстки (CLS).
• Не показывать плейсхолдер/скелетон, из-за чего пользователь видит пустые зоны и думает, что сайт сломан.
• Подгружать слишком поздно: пользователь докрутил, а контент ещё не появился.
• Забывать про фолбэк: не везде уместны сложные скрипты, иногда достаточно стандартного loading="lazy".

Связанные термины

• IntersectionObserver
• WebP
• AVIF
• CLS
• LCP
• Минификация (minify)
• Core Web Vitals

Наши услуги

• Доработка сайтов — внедрим Lazy Load для изображений и тяжёлых блоков без потери качества и SEO.
• Техническая поддержка сайта — следим за скоростью и исправляем проблемы загрузки после обновлений.
• SEO-продвижение сайтов — улучшаем технические показатели страниц, включая скорость и стабильность отображения.