Ленивая загрузка: как она сокращает время загрузки и увеличивает вовлеченность

Независимо от цели вашего веб-сайта, медленные веб-страницы сразу же отвратят посетителей.

Быстрая загрузка, также известная как “производительность сайта”, необходима для удобного взаимодействия с пользователем в Интернете. В 2019 году индекс средней скорости (или сколько времени в среднем требуется веб-странице для отображения видимых элементов) составлял около шести секунд. И даже этот промежуток времени проверяет наше терпение. На мобильных устройствах время загрузки увеличивается с одной до шести секунд, что более чем вдвое увеличивает показатель отказов.

Почему веб-страница может загружаться долго? Одна из возможных причин – размер страницы, точнее, количество содержимого на веб-странице и размеры файлов каждого фрагмента содержимого. Множество изображений, видео и других материалов могут снизить скорость страницы и отправить разочарованных посетителей в другое место.

К счастью, есть решение, которое не требует вырезания контента. Это называется отложенной загрузкой. Ленивая загрузка улучшает производительность вашего сайта, ограничивает использование полосы пропускания и даже повышает SEO вашего сайта .

В этом посте я объясню ленивую загрузку и ее аналог – нетерпеливую загрузку. Мы также обсудим, почему отложенная загрузка может быть отличной функцией на вашем веб-сайте и как добавить ее на свои страницы.

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

Ленивая загрузка – это метод, используемый веб-страницами для оптимизации времени загрузки. При отложенной загрузке веб-страница сначала загружает только необходимый контент и ожидает загрузки оставшегося содержимого страницы, пока оно не понадобится пользователю. Ленивая загрузка сокращает время, необходимое для открытия веб-страницы, потому что браузер загружает только часть содержимого страницы за раз.

Процесс называется «ленивым», потому что он откладывает загрузку до тех пор, пока она не понадобится – так же, как кто-то может отложить задачу. Но в этом случае лень – прекрасное дело.

Вероятно, вы уже видели ленивую загрузку. Для примера обратимся к Google Images. Если я буду искать фотографии такс (что я делаю регулярно), Google предложит мне несколько изображений на одной странице результатов.

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

Вместо этого в Google Images реализована отложенная загрузка. Для скрытого содержимого он загружает изображения-заполнители, чтобы заменить фактические изображения. Эти заполнители загружаются гораздо меньше времени, чем полностью визуализированный контент. Реальные изображения загружаются быстро, когда появляется их заполнитель (например, когда я прокручиваю страницу вниз).

Источник

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

Что такое нетерпеливая загрузка?

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

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

Источник

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

Ленивая загрузка против нетерпеливой загрузки

При ускоренной загрузке все содержимое веб-страницы создается как можно скорее, а при отложенной загрузке отображение несущественного содержимого задерживается. Ленивая загрузка – отличный вариант для больших файлов страниц с большим количеством контента. Однако на более простых страницах с заданным объемом текста и небольшим количеством изображений и / или видео должна применяться активная загрузка.

Когда использовать отложенную загрузку

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

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

Применение отложенной загрузки к содержимому вашей страницы имеет много потенциальных преимуществ:

• Это помогает вашей странице загружаться быстрее. Это улучшает впечатление посетителей, увеличивает количество вовлеченных посетителей и конверсий и помогает вашему SEO.
• Это сокращает использование данных, поскольку браузер загружает часть общего содержимого страницы за посещение. Это сокращает расходы на передачу данных как для вас, так и для ваших посетителей: вы будете платить меньше за загрузку меньшего количества элементов, и вашим пользователям не потребуется столько данных для загрузки ваших веб-страниц.
• Это экономит энергию, необходимую для загрузки контента, что продлевает срок службы батареи. Это также предохраняет компьютеры от перегрева и работы реактивных двигателей.
• Он удерживает посетителей на вашей странице, если вы продолжаете предлагать релевантный контент. Ярким примером этого является бесконечная прокрутка. Социальные сети постоянно делают это, чтобы привлечь наше внимание.

Когда использовать активную загрузку

Ленивая загрузка может дать вашему сайту некоторые важные преимущества, но не всегда. Иногда лучше выбрать старый подход к загрузке «все и сразу», а именно активную загрузку. Эти случаи включают:

Все содержимое отображается «над сгибом»

Сгиб – это нижняя часть окна веб-браузера. Поскольку пространство над сгибом отображается при загрузке страницы, контент в этой области должен быть немедленно виден пользователям. Сгиб расположен в разных местах для разных размеров экрана и окон, поэтому просматривайте свой веб-сайт на разных устройствах и используйте свой здравый смысл, чтобы определить, где на странице начать ленивую загрузку контента.

Когда ресурсы нужно загружать в фоновом режиме

Любой специальный код или носители, работающие в фоновом режиме вашей страницы, должны быстро загружаться. Примером этого являются веб-приложения, которым перед запуском необходимо полностью загрузить большую часть или все функции.

Если на вашей веб-странице минимально тяжелый контент

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

• Слишком большая динамическая загрузка на вашей странице вызывает прерывания и мешает работе посетителей.
• Скрытие большого количества контента на самом деле может работать против SEO. Если определенный контент не отображается, есть вероятность, что он не будет проиндексирован поисковыми системами. Чтобы убедиться, что ваш сайт правильно читается Google, см. Их руководство по ленивой загрузке контента.
• Ленивая загрузка предполагает изменение кода вашего сайта. Вам потребуются ресурсы и / или время, чтобы внести эти изменения и протестировать их.

Подводя итог, если страница короткая и / или содержит в основном легкий контент (то есть с преобладанием текста с минимальным количеством изображений / видео), лучше избегать чрезмерной инженерии с ленивой загрузкой. Мой блог о собаках-сосисках будет прекрасно работать и без него.

Как реализовать отложенную загрузку изображений

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

Используйте надстройку

Если вам нужен простой и быстрый вариант, найдите надежное и хорошо обслуживаемое дополнение для вашей системы управления контентом или конструктора веб-сайтов. Например, в WordPress есть несколько плагинов для отложенной загрузки изображений, которые сделают большую часть работы за вас. Другие платформы CMS предлагают плагины / модули / расширения для той же цели.

Используйте HTML-атрибут “загрузка”

Вы можете переключать процедуры загрузки с каждым изображением на веб-странице с помощью атрибута «загрузка». Чтобы указать настройку загрузки

// lazy-loads an image
<img src="image.png" loading="lazy" alt="..." />
 
// eager-loads an image
<img src="image.png" loading="eager" alt="..." />
 
// defers to the loading behavior of the browser (the same has having no "load" attribute)
<img src="image.png" loading="eager" alt="..." />

Дополнительные практические методы реализации отложенной загрузки см. В руководстве по отложенной загрузке Mozilla и подробном руководстве по ImageKit.

Ленивая загрузка – отличный вариант для повышения производительности страницы и удержания посетителей на вашем сайте. Если вы выбрали отложенную загрузку, обязательно протестируйте свой сайт с помощью этой новой функции перед его запуском. Любые ошибки могут вообще помешать отображению вашего скрытого контента, и нет контента хуже, чем медленный контент. Однако, если все сделано правильно, ленивая загрузка переведет ваши страницы из состояния задержки в состояние хвастовства.

Источник записи: https://blog.hubspot.com