Lazy Loading

Что такое Lazy Loading?

Если точнее, lazy loading — это техника, шаблон проектирования в программировании, применяемый к сайтам, при котором элементы и ресурсы загружаются не целиком, а выполняются на лету, по запросу, в зависимости от того, как пользователь работает со страницей. Получается «отложенная загрузка» содержимого.

Так ресурсы используются эффективнее, а контент — тексты, видео, изображения и другие материалы — загружается только тогда, когда он нужен, что улучшает скорость, потребление памяти и процессора, отзывчивость и время загрузки. Это противоположность полной загрузке, когда сайт или страница загружается целиком, даже если пользователь так и не воспользуется всеми элементами.

Общие преимущества lazy loading

Поскольку главная задача lazy loading — оптимизировать загрузку элементов и подгружать их только при использовании, преимуществ здесь много, и их можно свести к следующему:

• ›Скорость отображения основных элементов сайта.
• ›Заметное улучшение пользовательского опыта на сайте (UX).
• ›Более высокая производительность на мобильных устройствах, особенно при ограниченных ресурсах сетевого соединения: включённый Lazy Loading позволит просматривать страницы, которые при таком плохом покрытии иначе просто не открылись бы.
• ›Общая и полная оптимизация ресурсов: CPU, RAM и заряда батареи на мобильных устройствах.
• ›Рост времени пребывания на наших страницах за счёт отсутствия проблем с загрузкой косвенно выливается в улучшение позиций.
• ›Снижение показателя отказов.

Точно так же у подхода lazy loading есть преимущества и новшества с более технической точки зрения, например:

• ›Lazy loading полностью совместим с JS-фреймворками вроде React и Angular, а также с CMS-платформами вроде WordPress. Более того, недавно сообщили, что отложенная загрузка изображений будет включена по умолчанию в WordPress версии 5.5.
• ›Благодаря API IntersectionObserver он не скрывает изображения от поисковых систем.
• ›Поддержка разных типов контента, в том числе изображений и ресурсов класса responsive.
• ›Он позволяет индексировать изображения сайта, что критично для SEO.
• ›Это на 100% SEO Friendly решение, поскольку оно прямо и косвенно улучшает множество ключевых для SEO моментов.

Как внедрить lazy loading в WordPress?

Если наш сайт работает на WordPress, у нас есть большое преимущество: существует множество решений, позволяющих внедрить lazy loading на страницах, чтобы они загружались значительно быстрее. На скриншоте ниже показаны некоторые из возможных решений в репозитории плагинов:

Обзор самых заметных плагинов WordPress для внедрения lazy loading.

Для такого внедрения у нас есть несколько вариантов:

• ›Выбрать отдельный плагин для lazy loading, например «Lazy loader», «a3 lazy load»…
• ›Выбрать плагин для оптимизации сайта вроде «WP Rocket», где эта опция уже включена по умолчанию вместе с другими улучшениями.

SEO-аспекты, связанные с Lazy Loading

Мы уже знаем главную задачу отложенной загрузки и её ключевые преимущества, а также то, как она влияет на производительность страницы, UX и SEO.

Однако отложенную загрузку нужно использовать с умом, чтобы выжать из неё максимум: при неправильном применении эффект может оказаться обратным.

Например, lazy loading использует кэш для повышения скорости, поэтому, если там хранится слишком много контента, при некорректном внедрении возможны замедления или ошибки — вплоть до того, что Google не сможет проиндексировать страницы и элементы, а это серьёзно скажется на ранжировании сайта. Вот несколько советов:

• ›Оптимизируйте кэш и используйте его разумно.
• ›Используйте Google Search Console, чтобы проверять, какой контент Google сканирует на сайте.
• ›Добавляйте ALT-тексты, чтобы каждое изображение могло быть проиндексировано Google.
• ›Всегда используйте API IntersectionObserver.
• ›Добавляйте атрибут loading к iframe или встроенному контенту с других страниц и источников — благодаря функции Blink LazyLoad браузера Chrome. Работает для изображений, фотографий, видео, текста и другого контента.

Lazy loading и UX

Когда речь идёт о сайте, техническая и общая оптимизация ради хорошего пользовательского опыта (UX) обязательна: это касается времени загрузки, отзывчивости, потребления ресурсов и общего поведения. Если сайт не слишком отзывчив, его показатель отказов будет высоким, а плохой пользовательский опыт скажется на трафике, видимости и даже на SEO.

Смысл отложенной загрузки в том, чтобы одним шагом резко улучшить UX сайта: контент подгружается постепенно и тогда, когда он нужен пользователю при прокрутке страницы, будь то изображения или текст. Это экономит ресурсы по сравнению с загрузкой всей платформы целиком, при которой, вероятно, показываются элементы, не важные для пользователя.

Нативный lazy loading (HTML) в Chrome

Насколько важен для Google пользовательский опыт, видно и по тому, что с 2020 года, начиная с версии 75 браузера Chrome, можно добавлять нативный lazy loading к HTML-тегам страницы и их мультимедийному содержимому: фотографиям, видео и прочему.

Таким образом, когда HTML-атрибут lazy loading добавлен автоматически, браузер Chrome понимает, что контент страницы будет загружаться по мере навигации пользователя, а не весь сразу, — это повышает скорость и отзывчивость. Чтобы его использовать, к каждому тегу визуальных и мультимедийных ресурсов, а также к iframe добавляется атрибут loading со значением lazy:

<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

Это решение можно применять как к изображениям, на которые приходится значительная часть данных, скачиваемых браузером, так и к iframe — напомним, что через них мы встраиваем внешние ресурсы в свой сайт.

Особенно стоит подчеркнуть применение к iframe, поскольку они могут быть критическими точками загрузки на нашем сайте.

Из минусов: нативный lazy loading поддерживается только в Chrome, хотя его можно реализовать и в других браузерах с помощью совместимых библиотек — на случай, если поддержки нет, как в Mozilla Firefox.

Где применяют Lazy loading

Как мы уже говорили, lazy loading нужен для того, чтобы откладывать загрузку элементов страницы и тем самым оптимизировать её отклик. В этом смысле применение инструмента сосредоточено на всех визуальных ресурсах, но особый акцент делается на изображениях, видео и iframe, которые могут содержать документы и другие файлы. Всё это делается через изменение тегов и добавление атрибута loading со значением lazy, что оптимизирует общую скорость сайта, даже если на нём есть тяжёлые элементы или крупный мультимедийный контент.

Остались вопросы по lazy loading или хотите внедрить его в своём проекте? Мы к вашим услугам!

Документация и источники:

• ›Lazy loading for images
• ›Lazy loading for videos
• ›Native lazy loading