Мы в социальных сетях
Я здесь, потому что хочу:

Оптимизация скорости загрузки сайта с помощью Lazy loading

3 мин. 06-05-2019

Скорость загрузки страниц сайта имеет большое влияние на раскрутку в Google. Она влияет на:

  • позиции в поисковой выдаче;
  • время нахождения пользователей на сайте;
  • процент отказов;
  • стоимость клика в контекстной рекламе.

“Тяжелые” изображения и видео являются главными факторами, которые замедляют загрузку страниц. 

Что такое Lazy loading (ленивая загрузка)?

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

Загрузку такого вида лучше применять для медиафайлов, которые расположены за полем видимости экрана (ниже сгиба). 

Below the fold

Согласитесь, вполне логично не загружать сразу закадровые изображения. Использование данного способа загрузки увеличивает время загрузки для взаимодействия (Time to Intersctive), что является одним из главных показателей при оценке скорости загрузки сайта на мобильных устройствах. 

Кому нужна “ленивая загрузка”?

Советуем применять ленивую загрузку для следующих сайтов:

  • которые имеют большие фотогалереи и статьи с большим количеством изображений;
  • которые имеют конкурентов с “быстрыми” сайтами;
  • которые имеют оценку в PageSpeed Insights ниже 50;
  • у которых слабый сервер;
  • у которых преобладает мобильный трафик;
  • у которых появляется рекомендация в PageSpeed Insights: “Отложите закадровые изображения”.

Закадровые изображения 

Почему стоит внедрить отложенную загрузку?

  • при быстрой загрузке сайта снижается вероятность, что посетители покинут его;
  • экономия трафика, особенно при использовании мобильного интернета.

Виды отображения контента при “ленивой загрузки”

  1. Скроллинг

    Медиаконтент подгружается лишь тогда, когда попадает в видимую для пользователя зону. Такой вид используют для: сайтов СМИ с большим количеством статей, каталогах интернет-магазинов и т.д.

    Вот как это выглядит:


    Lazy loading при скроллинге
    Lazy loading подгрузка фото товаров
  2. Клик

    Контент подгружает только после того, как пользователь нажмёт на “Подробнее” или на миниатюру изображения.

  3. Фоновый режим

    Такой вид загрузки полезный для изображений и видео, которые нужны пользователю для последующей работы (например, образцы заполнения документов и т.д.). Перед тем как внедрять такую загрузки — проведите А/В тестирование и проверьте действительно ли это необходимо. 

Реализация “ленивой загрузки” для изображений

Рекомендации Google по реализации Lazy loading отличаются в зависимости от того, какой способ реализации используется для картинок: встроенные или в CSS. Для встроенных изображений лучше использовать обработчик событий (resize, scroll и т.д.) или API. Первый совместимый со всеми браузерами, в отличие от второго.

Изображения реализованные через CSS загружаются с большим количеством предположений. Перед запрашиванием внешних ресурсов браузер проверяет применимость CSS к документу. 

Это и используется для отсрочки загрузки изображений в CSS. Java Script поможет определить, когда элемент находится в области просмотра, и загрузит фоновое изображение. 

Существует 5 готовых решений для реализации Lazy loading:

  1. От разработчика David Walsh

    Скрипт заменяет атрибут src на data-src в теге img:

    Изображения с атрибутом data-src находятся в CSS. После загрузки картинок они будут плавно отображаться с переходами:

    Lazy Loading by David Walsh 

    Потом Java Script передаст всем изображениям атрибут src и они получат значение атрибута data-src. После загрузки всех img, data-src убирается. 

    Скрипт Lazy loading от разработчика David Walsh
  2. От разработчика Robin Osborne

    Робин Осборн предложил Lazy loading загрузку с прогрессивным улучшением. “Ленивая загрузка” на JS — улучшение для HTML и CSS. Она работает от скроллинга и не требует плагинов и фреймворков. Пользователь увидит изображение в любом случае, даже когда скрипт отключён или какая-нибудь ошибка блокирует его работу. 

  3. От разработчика Craig Buckler

    Данный вариант предлагает Lazy loading с эффектом размытости. Для этого не потребуются дополнительные библиотеки или фреймворки. Подробности на GitHub.

  4. Плагин bLazy.js 

    Он выглядит следующим образом:

    Плагин bLazy.js
    Данный скрипт занимает мало места и способен работать с несколькими изображениями одновременно. Это будет способствовать экономии трафика и уменьшит нагрузку на сервер. Поддерживает браузеры разных версий.
  5. Плагин Lazy Load XT jQuery

    Достаточно добавить jQuery-библиотеку перед закрывающимся тегом и прописать jquery.lazyloadxt.js.

    Плагин Lazy Load XT jQuery

Если Lazy loading реализована неправильно — это приведет к скрытию контента от Google и изображения не будут участвовать в поиске по картинкам.

Для проверки того, видит ли Google медиаконтент воспользуйтесь рекомендациями в Справке.

Заключение

Lazy loading является эффективным способом ускорения загрузки сайта, что позитивно влияет и на поведенческие факторы, и на ранжирование страниц в результатах поиска. Очень важно правильно ее реализовать, дабы не закрыть медиаконтент от поискового робота!

Комментарии
Арсен
29-05-2019
А ви використовуєте технологію Лейзі Лоад?
ответить
WebMaestro
30-05-2019
Так. Ми успішно засвоїли та використовуємо дану технологію для власних проектів. Це значно збільшило час завантаження сторінок.
ответить
Разработка и поддержка
Сергей:
Раскрутка и реклама
Олег:

Разработка, раскрутка и поддержка сайта

Мы вместе создадим лучшее дизайнерское решение для вашего магазина. Оптимальные решения обеспечат уникальный вид Вашему интернет-магазину.

facebook telegram viber smartphone
Бажаєте встановити наш додаток?