Проверка lazy loading онлайн

Lazy loading (отложенная загрузка) — это техника, при которой изображения загружаются только когда пользователь прокручивает страницу до них. Без lazy loading браузер загружает все изображения сразу, даже те, что находятся далеко внизу страницы. Это замедляет первоначальную загрузку и ухудшает показатели Core Web Vitals.

Что проверяет этот инструмент

• Атрибут loading="lazy" — наличие нативного lazy loading у изображений
• Изображения выше fold — первые изображения не должны быть «ленивыми» (они нужны сразу)
• Количество изображений — сколько изображений на странице и у скольких настроен lazy loading
• Iframe — проверка lazy loading для встроенных видео и виджетов
• JavaScript-библиотеки — обнаружение сторонних решений для отложенной загрузки

Как работает lazy loading

• Нативный способ — атрибут loading="lazy" в теге <img>, поддерживается всеми современными браузерами
• Intersection Observer — JavaScript API для отслеживания появления элементов в зоне видимости
• Библиотеки — lazysizes, lozad.js и другие решения для расширенного контроля
• Для первого экрана — изображения в видимой области при загрузке не должны быть «ленивыми», иначе замедлится LCP

Частые ошибки при настройке lazy loading

• Lazy loading на изображениях первого экрана — замедляет отрисовку LCP-элемента
• Отсутствие width и height у изображений — вызывает сдвиги макета (CLS) при загрузке
• Lazy loading только через JavaScript без fallback — если скрипт не загрузился, изображения не появятся
• Не настроен lazy loading для iframe — встроенные видео и виджеты тоже нужно загружать отложенно