Лучшие способы настроить собственную ленивую загрузку для веб-сайтов
Опубликовано: 2019-07-29Отложенная загрузка используется для отсрочки загрузки некоторых изображений или элементов веб-страницы на более позднее время, когда пользователь посещает веб-страницу. Обычно это делается для изображений и элементов веб-сайта в нижней части страницы. Идея состоит в том, что вместо того, чтобы загружать всю веб-страницу за один раз, вы загружаете некоторые части веб-страницы, когда пользователь продолжает прокручивать страницу вниз.
Основное преимущество отложенной загрузки заключается в том, что она сокращает время загрузки всего веб-сайта. Отложенная загрузка повышает производительность веб-сайта и обеспечивает лучший пользовательский интерфейс, загружая сначала верхнюю часть, которую посетители могут сразу же начать просматривать или читать. Когда посетители заходят на вашу веб-страницу и вынуждены долго ждать, они теряют интерес и могут уйти. Однако, если вы дадите им что-то посмотреть или прочитать сразу же, пока вы загружаете остальную часть веб-страницы, вы можете удержать их на своем веб-сайте. Второе преимущество ленивой загрузки — снижение затрат. Изображения загружаются только в том случае, если посетитель веб-сайта посещает определенный раздел веб-сайта. Следовательно, если посетитель не прокручивает страницу вниз, на его устройство загружается меньше данных, что позволяет сэкономить деньги.
Благодаря этим преимуществам отложенная загрузка — отличный способ улучшить взаимодействие с пользователем и эффективность вашего веб-сайта.
Вы можете настроить ленивую загрузку для своего веб-сайта двумя способами — с помощью свойства фона CSS или с помощью тега <img>. Однако метод тега <img> является более распространенным из двух, поскольку этот метод прост в использовании.
свойство тега <img>:
Когда используется тег <img>, браузер использует атрибут src для запуска загрузки изображения. Неважно, первое это изображение или сотое в вашем коде. Если браузер получает атрибут src, он инициирует загрузку изображения. Поэтому, чтобы лениво загружать эти изображения, добавьте URL-адрес изображения к атрибуту, отличному от src. Например, если вы поместите URL-адрес изображения в атрибут data-src, браузер не инициирует загрузку изображения, поскольку атрибут src пуст.
Теперь, когда предварительная загрузка остановлена, нам нужно сообщить браузеру, когда изображение должно быть загружено. Мы хотим инициировать загрузку изображения, как только оно появится в окне просмотра. Есть два способа проверить время появления изображения в окне просмотра:
1. Использование событий JavaScript:
В этом методе прослушиватели событий используются для изменения размера, изменения ориентации и событий прокрутки в браузере. Событие прокрутки является наиболее очевидным. Он используется для проверки того, когда пользователь прокручивает веб-страницу. События orientationChange и resize одинаково важны для ленивой загрузки. Событие изменения размера запускается при изменении размера окна браузера. Событие orientationChange происходит, когда устройство поворачивается из портретного режима в ландшафтный или наоборот. В этих случаях количество изображений, видимых на экране, будет меняться, поэтому нам нужно будет инициировать загрузку изображения.
Когда происходит одно из этих событий, мы ищем все изображения, присутствующие на странице, которые еще не были загружены. Проверив все незагруженные изображения, присутствующие на веб-странице, которые сейчас находятся в области просмотра, мы узнаем те, которые должны быть загружены мгновенно. Это делается с использованием верхней части прокрутки текущего документа, высоты окна и верхнего смещения изображения.
Если изображение вошло в область просмотра, мы берем URL-адрес изображения из атрибута data-src и помещаем его в атрибут src, который запускает загрузку изображения. Затем мы должны удалить класс lazy из изображения, так как этот класс заставляет изображения загружаться лениво. Когда все изображения загружены, прослушиватели событий удаляются.
В случае прокрутки событие прокрутки срабатывает постоянно. Таким образом, для повышения производительности мы можем добавить небольшой тайм-аут, который будет ограничивать ленивую загрузку.
2. Используя API-интерфейс наблюдателя за перекрестком:
Intersection Observer API — сравнительно новый API в браузерах. Этот метод позволяет очень просто определить время входа элемента в окно просмотра. Этот метод обеспечивает превосходную производительность без использования сложных математических операций по сравнению с предыдущим методом.
Во-первых, мы должны прикрепить наблюдателя ко всем изображениям, требующим ленивой загрузки. Когда API обнаруживает, что изображение вошло в область просмотра, он выбирает URL-адрес из data-src и помещает его в атрибут src, используя метод isIntersecting, чтобы вызвать загрузку изображения. После этого ленивый класс удаляется вместе с удалением наблюдателя.
Intersection Observer API работает быстро, не замедляя прокрутку сайта по сравнению с использованием событий JavaScript. С помощью метода прослушивания событий нам пришлось добавить тайм-аут, который добавляет небольшую задержку. Однако Intersection Observer API поддерживается не всеми браузерами. Следовательно, прослушиватель событий стал популярным выбором для пользователей.
Свойство фона CSS:
Для загрузки фоновых изображений CSS браузер должен создать объектную модель CSS (CSSOM) вместе с объектной моделью документа (DOM), чтобы решить, будет ли стиль CSS применяться к модели DOM, присутствующей в существующем документе. Если правило CSS не применяется к элементу, браузер не загрузит фоновое изображение.
С помощью этой техники мы применяем свойство CSS background-image, когда элемент появляется в области просмотра. В CSS есть элемент с идентификатором bg-image (фоновое изображение). Как только класс lazy добавлен к изображению, в технике CSS мы переопределяем свойство bg-image и делаем его пустым.
Добавление класса .lazy к #bg-image предпочтительнее в CSS, чем использование одного #bg-image. Изначально браузер применяет к элементу background-image: none. Как только мы прокручиваем веб-страницу, прослушиватели событий или Intersection Observer обнаруживают изображение, присутствующее в области просмотра, и удаляют класс .lazy. Это неприменимо в технике CSS, поскольку свойство bg-image применяется к элементу, вызывающему загрузку фонового изображения.
Итак, вот два способа настроить собственный веб-сайт с отложенной загрузкой. Обе эти методики дают исключительные результаты. Однако, если вам нужна простая техника, вам следует использовать тег <img>. Для пользователей WordPress доступно множество плагинов для настройки ленивой загрузки изображений на их веб-сайтах WordPress. Оптимизация изображений для вашего веб-сайта WordPress с помощью этих плагинов, наряду с отложенной загрузкой, улучшит производительность вашего веб-сайта, улучшит работу и поможет с SEO.