Отложенная загрузка
Отложенная загрузка (lazy loading) откладывает загрузку некритически важных ресурсов, таких как изображения или видео, до момента, когда они понадобятся. Это сокращает время начальной загрузки страницы и улучшает воспринимаемую производительность.
Отложенная загрузка позволяет браузерам в первую очередь сосредоточиться на контенте в верхней части страницы (above-the-fold), что улучшает как пользовательский опыт, так и показатели производительности.
В блоге с длинными статьями была внедрена нативная отложенная загрузка изображений. Время начальной загрузки сократилось на 35%, при этом прокрутка осталась плавной.
Что стоит подвергать отложенной загрузке
- Изображения, находящиеся вне первого экрана (below-the-fold)
- Внедренные видео
- Сторонние виджеты
Избегайте отложенной загрузки элементов, влияющих на LCP, таких как главные изображения на первом экране (hero images).
Рекомендации
- По возможности используйте нативную отложенную загрузку (loading="lazy")
- Обеспечьте доступность контента для индексации
- Тестируйте работу на различных устройствах и в разных браузерах
Отложенная загрузка должна повышать скорость, а не скрывать контент от пользователей или поисковых роботов.
Распространенные проблемы отложенной загрузки
- Отложенная загрузка изображений в верхней части страницы
- Блокировка отрисовки контента
- Использование JavaScript-библиотек для отложенной загрузки, которые не распознаются поисковыми системами