Мы рады сообщить, что добавили поддержку отложенной загрузки в нашу библиотеку pixboost.js.
Что такое отложенная загрузка?
Очень часто на странице довольно много изображений. Когда пользователь загружает страницу, он не видит всех изображений, но браузер загружает их все, что излишне увеличит время загрузки и количество переданных байтов.
Таким образом, если мы можем загружать только изображения, которые видит пользователь, это может улучшить производительность веб-приложения или веб-сайта. Когда пользователь будет прокручивать или открывать другие изображения, мы загружаем их. Ниже представлена основная идея:
Это относится не только к прокрутке, но и к любым невидимым изображениям. Например, изображения в меню или изображения предварительного просмотра, которые появляются при нажатии.
Пошаговое руководство
Очевидно, вам понадобится отложенная загрузка в случае, если у вас есть изображения, которые не отображаются при начальной загрузке веб-страницы. Мы рекомендуем использовать расширение Lighthouse для Chrome, чтобы протестировать свою страницу на изображениях вне экрана. Ниже приведено пошаговое руководство о том, как это сделать:
- Установите расширение Lighthouse в Chrome.
- После установки вы должны увидеть значок маяка на панели инструментов Chrome.
3. Загрузите страницу, которую хотите протестировать. Мы создали небольшую демонстрационную страницу с отложенной загрузкой и без нее. URL-адрес исходной демонстрационной страницы: www.midday.coffee/original/cups.html.
4. После загрузки щелкните значок маяка и нажмите кнопку «Создать отчет».
5. После того, как Lighthouse завершит сканирование, вы увидите отчет, в котором найдете раздел «Неэкранные изображения». Это список изображений, которые можно загружать «лениво», что повысит производительность.
Мы также создали оптимизированную версию демонстрационной страницы с отложенной загрузкой. Если вы запустите Lighthouse на нем, вы увидите, что Неэкранные изображения теперь находятся в разделе Прошедший аудит:
Включение быстрой загрузки в Pixboost
Чтобы включить отложенную загрузку, необходимо выполнить два простых шага. Первый - включить библиотеку, которую мы используем до скрипта pixboost.js:
Затем вам нужно будет добавить атрибут data-lazy для элементов, которые вы хотите загружать с отложенной загрузкой. Ниже приведены примеры адаптивных изображений и стандартного тега ‹img›:
Мы используем библиотеку под названием lozad для ленивой загрузки. Он использует функцию браузера под названием Intersection Observer. Практически все современные браузеры, кроме Safari, поддерживают его. Если вы хотите, чтобы все браузеры поддерживали его, вам также необходимо включить polyfill:
Однако мы настоятельно рекомендуем провести тщательное тестирование, так как у нас возникли некоторые проблемы с полифиллом. Мы обнаружили некоторые проблемы в Safari, когда на странице есть элементы с абсолютным позиционированием. Кроме того, IE 9 и IE10 не работали должным образом в некоторых сложных случаях.
Под капотом
Ленивая загрузка - не новость. Это было довольно давно. В первые дни реализация отложенной загрузки была довольно сложной задачей. Он использовал функцию Element.getBoundingClientRect () и проверял видимость элементов при каждом событии прокрутки. Конечно, запуск такого количества слушателей и тестов в основном потоке вызывал проблемы с производительностью.
W3C знал о потребностях разработчиков и придумал новый API под названием Intersection Observer. API довольно прост и дает вам возможность добавлять слушателей для событий, когда целевой элемент пересекается с другим элементом. Вот простой пример:
В этом примере мы создали нового наблюдателя, который обнаружит пересечение с элементом #scrollArea. Если вы не укажете параметр root, будет использоваться window.document.
Параметр «rootMargin» используется для указания поля вокруг корневого элемента. Значения могут быть указаны в пикселях или процентах. По умолчанию 0 пикселей.
«Порог» - это число в диапазоне 0,0–1,0. Он указывает, какая часть целевого элемента должна пересекаться перед запуском обратного вызова. Вы также можете установить массив значений. Например, [0,1, 0,5] вызывает обратный вызов, когда 10 и 50 процентов целевого элемента находятся внутри корневого элемента. Порог по умолчанию установлен на 0.
Обратный вызов - это функция, которая вызывается с аргументами (записи, наблюдатель). Записи - это массив изменений для каждого целевого элемента.
Поскольку загрузка изображения может занять некоторое время, имеет смысл предварительно загрузить их до того, как пользователь действительно увидит элемент. Для этого мы устанавливаем маржу в библиотеке pixboost.js:
Это означает, что когда 1% изображения будет на 40 пикселей ниже области просмотра, мы должны начать его загрузку.
На момент написания статьи все основные браузеры, кроме Safari, поддерживали Intersection Observer API. Вы всегда можете проверить обновленную поддержку на caniuse.com.
Заключение
Мы заметили действительно хороший прирост производительности на страницах, на которых используется отложенная загрузка. Мы действительно поощряем наших клиентов попробовать новую функцию. Если у вас есть вопросы, не стесняйтесь обращаться ко мне по адресу d [email protected].
