Что такое ленивая загрузка и как она улучшает взаимодействие с пользователем?

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

Исследования показывают, что с каждой дополнительной секундой загрузки вашего сайта вероятность превращения посетителя в клиента снижается. По данным Portent , вероятность конверсии составляет 40% за одну секунду загрузки, при этом падает до 34% за следующую и 29% за три секунды. Вы можете задаться вопросом: «Каково же тогда решение?»

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

В этой статье мы рассмотрим отложенную загрузку, зачем ее использовать и как она сочетается с другими методами. Давайте займемся этим!

Оглавление

• Что такое ленивая загрузка?
• Важность ленивой загрузки
• Нетерпеливая загрузка против ленивой загрузки
• Как работает ленивая загрузка
• Реализация ленивой загрузки

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

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

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

Вместо того, чтобы ждать, пока все загрузится, вы можете сразу увидеть то, что уже есть на экране.

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

Важность ленивой загрузки

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

Оптимизация производительности

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

Уменьшите пропускную способность и нагрузку на сервер

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

Улучшите SEO

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

Что такое стремительная загрузка?

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

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

Хотя это легко реализовать, нетерпеливая загрузка стала менее актуальной из-за нескольких факторов, в том числе:

Увеличенный размер веб-страницы

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

Негативное влияние на производительность

Более длительное время загрузки страницы может повлиять на важные показатели производительности веб-сайта , такие как первая отрисовка контента (FCP) и наибольшая отрисовка контента (LCP). Это ключ к SEO и пользовательскому опыту.

Рост числа мобильных пользователей

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

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

Вот краткое сравнение Eager Loading и Lazy Loading:

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

Как работает ленивая загрузка

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

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

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

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

Реализация ленивой загрузки

В этой части мы покажем вам различные способы реализации отложенной загрузки на вашем веб-сайте.

Способ 1. Реализация отложенной загрузки вручную.

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

Для этого вы в основном будете использовать HTML и JavaScript. Прежде чем начать, убедитесь, что у вас есть доступ к файлам тем вашего сайта WordPress и вы можете уверенно редактировать HTML и JavaScript.

Вот подробное руководство, которое поможет вам в этом процессе:

Шаг 1. Сделайте резервную копию вашего сайта.

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

Шаг 2. Отредактируйте файл function.php темы.

• Получите доступ к файлам вашего сайта WordPress (с помощью FTP-клиента или файлового менеджера в панели управления хостингом).
• Перейдите в /wp-content/themes/your-theme/ и найдите файл function.php .
• Откройте файл function.php для редактирования.

Шаг 3. Добавьте сценарий отложенной загрузки.

В файле function.php добавьте функцию для постановки файла JavaScript в очередь для отложенной загрузки. Вот базовый пример:

функция add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

В этом коде предполагается, что у вас есть файл JavaScript с именем lazy-load.js в папке js внутри каталога вашей темы.

Шаг 4. Создайте файл JavaScript.

• Создайте новый файл с именем lazy-load.js в папке js каталога вашей темы.
• Добавьте JavaScript для обработки отложенной загрузки. Вот базовый пример использования IntersectionObserver :

document.addEventListener("DOMContentLoaded", function() {

let lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if («IntersectionObserver» в окне) {

let lazyImageObserver = новый IntersectionObserver (функция (записи, наблюдатель) {

записи.forEach(функция(запись) {

если (entry.isIntersecting) {

пусть lazyImage = вход.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove («ленивый»);

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(function(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

});

Шаг 5. Обновите теги изображений в WordPress.

Измените теги изображений для поддержки отложенной загрузки. В ваших шаблонах PHP или непосредственно в ваших сообщениях/страницах измените теги изображений следующим образом:

<img class="lazy" src="placeholder-image.jpg" data-src="original-image.jpg" alt="описание изображения">

Замените Placeholder-image.jpg изображением с низким разрешением или графикой загрузки, а original-image.jpg фактическим URL-адресом изображения.

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

Шаг 6. Проверьте изменения.

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

Примечания

• Обязательно всегда сначала тестируйте в среде разработки, прежде чем делать это на своем работающем веб-сайте.
• При этом рассмотрите возможность создания дочерней темы. Обновления темы могут перезаписать ваши изменения.
• Для других типов контента, таких как видео или iframe, можно использовать аналогичный подход, когда атрибут src заменяется атрибутом data-src и загружается через JavaScript в области просмотра.

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

Способ 2. Использование плагина WordPress для реализации отложенной загрузки.

Это самый простой из двух методов, поскольку вы можете использовать плагин WordPress для безопасного включения отложенной загрузки. Это можно сделать с помощью нескольких плагинов, но в этом примере мы будем использоватьWP-Optimize .WP-Optimize — мощный плагин WordPress, который помогает повысить скорость вашего сайта и улучшить взаимодействие с пользователем.

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

Чтобы включить эту функцию:

• Откройте вкладкуWP-Optimize > Изображения на панели администратора WordPress.
• Откройте подвкладку «Отложенная загрузка изображений».
• Отсюда вы можете включить отложенную загрузку как для изображений, так и для видео/iframe.

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

До и после

Мы протестировали скорость примера веб-сайта до и после внедрения Lazy Load. По данным GTMetrix , веб-сайт уже работал довольно быстро: время загрузки First Contentful Paint (FCP) составляло 1,5 секунды.

После включения отложенной загрузки время FCP стало 344 мс, что намного быстрее, чем было раньше. Результаты могут различаться в зависимости от количества контента на вашей странице, но в большинстве случаев ваш показатель FCP улучшится.

Готовы ускорить загрузку страницы?

Итак, вот оно! Мы поговорили о том, что такое Lazy Loading, и о важной роли Lazy Loading для современных сайтов. Откладывая загрузку вещей до тех пор, пока они вам не понадобятся, страницы загружаются быстрее, экономятся интернет-данные и делает просмотр более плавным, особенно на телефонах с ограниченным объемом данных.

Мы также дали несколько полезных советов о том, как использовать отложенную загрузку в WordPress. Мы охватываем все: от самостоятельного выполнения кода с помощью плагина, такого как WP-Optimize.

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

Часто задаваемые вопросы

Ленивая загрузка — это хорошо или плохо?

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

Что такое отложенная загрузка в пользовательском интерфейсе?

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

Влияет ли отложенная загрузка на SEO?

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

Стоит ли лениво загружать все изображения?

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

Какие проблемы с отложенной загрузкой?

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