Lazy Loading — что это
Lazy loading применяют для оптимизации работы сайтов. Этот инструмент ответственен за прогрузку файлов. Обычно, когда человек переходит на сайт, браузер тут же пытается загрузить все ресурсы (картинки, скрипты, таблицы стилей). Из-за этого увеличивается время прогрузки: особенно если страница содержит много больших файлов.
Lazy loading решает эту проблему. Определенный контент помечается как неблокирующий или некритичный. Браузер загружает его только в том случае, если он нужен. Метод особенно эффективен для элементов, которые не видно сразу при начальной прогрузке сайта.
Плюсы инструмента:
- быстрая прогрузка начальной страницы — благодаря приоритетному содержанию сайт становится быстрым и отзывчивым. Это сразу привлекает пользователей;
- улучшенный пользовательский интерфейс (UX) — не будет неудобных переходов по компоновке при запоздалой загрузке картинок;
- плавная прокрутка содержимого — оно отображается постепенно;
- экономия трафика — lazy loading снижает нагрузку как на тарифный план пользователя, так и на ресурсы сервера;
- потенциал SEO — хоть lazy loading и не относится к прямым фактором ранжирования, она способствует увеличению скорости прогрузки страниц. Это считается ключевым аспектом веб-показателей Google среди набора факторов, влияющих на рейтинг в поисковых системах.
При этом он может привести к проблемам:
- использование lazy loading над файлами (логотипы, картинки) может негативно сказаться на производительности. Это связано с тем, что самый объемный элемент Paint, скорее всего, находится над сгибом: он должен загружаться как можно быстрее;
- оптимизация при неправильной реализации может помешать поисковым системам индексировать изображения;
- изменение макета без определения размера изображений, которые загружаются с задержкой, может привести к изменению макета сайта. Это негативно сказывается на общем внешнем виде;
- может не работать функциональность некоторых плагинов.
Как установить и настроить lazy loading
Реализовать функцию можно несколькими способами. Самый понятный из них — применение встроенного атрибута.
Атрибут загрузки HTML
Рассмотрите два варианта:
- JavaScript — нужно написать пользовательский код. Специальный инструмент, называемый Intersection Observer API, помогает сайту определять, когда файлы, находящиеся за пределами экрана, собираются попасть в видимую часть браузера (область просмотра). Затем он запускает процесс загрузки;
- встроенный атрибут ”loading” — практически во все браузеры добавлен атрибут loading="lazy" в тегах. Добавьте этот атрибут к своему файлу или коду iframe, и браузер автоматически задержит их загрузку, пока пользователь не прокрутит страницу рядом.
Атрибут принимает два значения:
- lazy — переносит картинки или элементы iframe;
- eager — стандартный режим загрузки. Ресурс запрашивается тут же, независимо от его местоположения.
Библиотеки
Если нужно сэкономить время и воспользоваться расширенными возможностями, хороший вариант — специальная библиотека. Популярные варианты:
- Lozad.js— простая в освоении библиотека;
- Lazysizes — многофункциональная, предлагает расширенную настройку и адаптивную обработку изображений;
- Vanilla Lazyload — библиотека без зависимостей, отлично подходит для небольших проектов.
Еще один вариант для React — это react-lazyload. Его применяют для отложенной прогрузки любого типа компонентов в приложении React. Это одна из самых популярных библиотек отложенной загрузки в сообществе React. Поддерживает декораторы и рендеринг на стороне сервера. Плюсы:
- обладает набором свойств, позволяющих пользователям настраивать функциональные возможности компонента;
- предоставляет принудительную проверку для отображения скрытого содержимого, которое становится видимым без изменения размера или прокрутки;
- реализует только два прослушивателя событий для всех лениво загружаемых компонентов, что еще больше оптимизирует работу сервиса.
Wordpress
В WordPress легче настроить lazy loading. Чтобы добавить инструмент, часто требуется настройка плагина. Популярные опции:
- WP Rocket— плагин премиум-класса для работы с кэшем и оптимизации с ленивой загрузкой;
- Smush — подходящий формат для оптимизации изображений, в нем также есть ленивая загрузка;
- оптимизация — необходима для lazy loading вместе с другими улучшениями производительности.
Популярные браузеры Chrome, Firefox и Opera поддерживают встроенную функцию отложенной загрузки файлов. Необходимо приложить атрибут к выбранным изображениям и видео, чтобы включить его автоматически.
В популярной функции lazy loading WordPress формат поддерживает три значения:
- Auto —включает инструмент;
- Lazy — распределяет загрузку файлов, пока каждый из них не достигнет указанного расстояния от окна просмотра;
- Eager — загружает все ресурсы, как только загружается страница, независимо от их местоположения.
Пример:
<img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>
Этот вариант используют для отложенной работы с выбранными изображениями, поскольку каждому из них присваивается тип загрузки. Он ищет время их появления в окне просмотра. Однако для ленивой загрузки конкретных изображений может потребоваться больше времени.
Советы при работе с WordPress.
- Не загружайте изображения с задержкой в верхней части страницы. Картинки, размещенные вверху страницы, видны при загрузке.
- Выберите подходящие заполнители. Рекомендуется использовать однотонный, доминирующий цвет или изображение низкого качества в качестве заполнителя для всех изображений.
- Увеличьте время загрузки изображений в буфере. Так изображения будут готовы прямо перед входом в поле зрения посетителей, что сократит время ожидания.
- Определите размеры контейнеров с изображениями. Это поможет избежать внезапных изменений в макете, придаст странице аккуратный вид.
- Реализуйте отложенную загрузку только для длинных страниц. К длинным страницам относятся такие, для просмотра которых требуется более двух прокруток, а под сгибом находится более пяти изображений.
Возможные ошибки и проблемы
Задержка загрузки изображений. Скрипт отложенной загрузки не ожидает инициализации всех изображений перед загрузкой страницы. Этот процесс помогает значительно ускорить загрузку страниц пользователей, но может привести к задержкам в прогрузке важных снимков. Например, пользователь может перейти к изображению-заполнителю. Тогда он будет вынужден подождать несколько секунд или миллисекунд, прежде чем изображение загрузится.
Решение. Используйте API Intersection Observer для обнаружения изображений, попадающих в область просмотра. Добавьте отступы к картинкам: можно определить отступы, установив ограничивающую рамку с помощью параметра root Margin. Начните загрузку изображения, когда оно будет расположено на расстоянии нескольких сотен пикселей от области просмотра. Этот процесс дает браузеру больше времени для загрузки и отображения изображения в окне просмотра.
Задержки при декодировании изображений. Когда большие файлы загружаются в JavaScript и помещаются в объектную модель документа (DOM), перегружается основной поток. При декодировании картинок требуется больше времени. Это может привести к тому, что интерфейсы пользователей на пару секунд перестанут отвечать на запросы.
Решение. Можно асинхронно декодировать файлы, прежде чем загружать их в DOM. Это поможет предотвратить или уменьшить задержки при декодировании картинок. Однако асинхронное декодирование доступно не для всех браузеров и устройств. Оно может усложнить логику отложенной загрузки.
Перемещение содержимого. При загрузке картинок браузеры должны отображать содержимое с учетом размера. Важно, чтобы оно соответствовало макету. Для этого браузеру необходимо знать размер изображения. Однако сценарии отложенной загрузки откладывают отображение файлов, не позволяя браузеру определить размер содержимого. Поскольку конфигурация контейнеров по умолчанию равна 0x0 пикселей, браузерам необходимо изменять размер контейнеров в соответствии с размером картинок. Этот процесс изменяет макет страницы. В результате другие элементы смещаются.
Решение. Укажите высоту и ширину контейнеров, чтобы помочь браузерам создать контейнер заранее. Когда контейнер загружен заранее, картинка может быть быстро загружена в соответствии с размером контейнера, не вызывая смещения содержимого.
Выводы
Преимущества этого инструмента, такие как оптимизация использования ресурсов и улучшение пользовательского опыта, делают его ценным методом современной веб-разработки. Тщательно внедряя lazy loading, веб-разработчики могут создавать более быстрые и эффективные сайты. Так они сводят к минимуму ненужное потребление ресурсов.