От автора: отложенная загрузка важна для оптимизации загрузки изображений и, следовательно, повышения производительности в Интернете. В этой статье рассказывается, как реализовать нативную отложенную загрузку с откатом для неподдерживающих браузеров.
Отложенная загрузка изображений — один из наиболее популярных подходов к оптимизации веб-сайтов из-за относительно простой реализации и большого прироста производительности. При отложенной загрузке мы загружаем изображения асинхронно, что означает, что мы загружаем изображения только тогда, когда они появляются в области просмотра браузера.
Почти год назад для Chrome и других основных браузеров была выпущена нативная отложенная загрузка изображений и окон iframe. Смысл этой функции в том, чтобы дать браузерам контроль, когда запрашивать изображение или ресурс iframe, что немного упрощает работу разработчика. До этого момента единственным вариантом было использование различных плагинов JavaScript, которые отслеживали изменения области просмотра и загружали ресурсы динамически. Теперь браузеры могут делать это нативно!
На момент написания этой статьи около 73% используемых в настоящее время браузеров поддерживают эту функцию, что неплохо, но мы не хотим, чтобы контент изображений веб-сайта был недоступен и непригоден для 27% потенциальных пользователей.
Это ставит нас в интересную ситуацию:
Мы хотим использовать преимущества нативной отложенной загрузки для браузеров, которые ее поддерживают.
Мы хотим использовать JS-плагин в качестве запасного варианта для отложенной загрузки браузеров, которые его не поддерживают.
Мы не хотим загружать JS-плагин с отложенной загрузкой, если браузер поддерживает встроенную отложенную загрузку.
Поддержка элементов img и source является обязательной.
Атрибут «loading»
У нас есть три возможных значения, которые мы можем использовать для атрибута loading.
Auto — значение по умолчанию. То же, что и без установки атрибута.
eager — сразу загрузить ресурс.
lazy — загрузить ресурс, когда он окажется в области просмотра.
Хотя это зависит от варианта использования, обычно мы хотим использовать значение eager для ресурсов выше первого сгиба и значение lazy для ресурсов ниже первого сгиба.
Современный подход
Нам нужно написать скрипт, который будет запускаться после загрузки HTML-документа. Я использовал Jekyll и добавил скрипт как включение, которое было добавлено в конец элемента HTML body. Это наиболее эффективный способ запуска функций JavaScript, позволяющий избежать блокировки рендеринга.
Разметка изображения
Мы хотим, чтобы наша функция JavaScript запускала процесс загрузки изображения на основе встроенной поддержки функции отложенной загрузки. Для этого мы добавим путь к изображениям в data-src вместо src. Но мы не должны оставлять src пустым, поэтому мы будем использовать прозрачный заполнитель изображения 1x1px. Наша разметка для элементов img будет выглядеть примерно так:
<img src="/path/to/placeholder/image.png" data-src="/path/to/full/image.jpg" alt="Image description" class="lazyload" loading="lazy" />
Обратите внимание, что class=»lazyload» используется резервным плагином lazyload. Я использовал lazysize, который использует это конкретное имя класса. Кроме того, мы хотим поддерживать элемент picture, содержащий несколько элемент source элемент и резервный элемент img.
<picture> <source data-srcset="path/to/image.webp" type="image/webp" /> <source data-srcset="path/to/image.jpg" /> <img loading="lazy" class="lazyload" src="path/to/placeholder/image.png" data-src="path/to/image.jpg" alt="Image description" /> </picture>
Определение функции
Нам нужно определить, поддерживает ли браузер пользователя нативную отложенную загрузку. К счастью, мы можем сделать это напрямую с помощью JavaScript.
if ("loading" in HTMLImageElement.prototype) { /* Native lazy loading is supported */ } else { /* Native lazy loading is not supported */ }Окончательный код JavaScript
Для нативной отложенной загрузки нам нужно только присвоить значение data-src значению src элементов img и source и позволить браузеру обрабатывать все остальное.
Для неподдерживающих браузеров нам нужно только загрузить плагин JavaScript и, при желании, запустить его (если это не делается автоматически). Я использовал lazysize, но любой плагин будет работать, просто убедитесь, что разметка правильная (имена классов, элементы данных и т. д.).
Итак, окончательный код JavaScript будет выглядеть примерно так:
<script> if ("loading" in HTMLImageElement.prototype) { var images = document.querySelectorAll('img[loading="lazy"]'); var sources = document.querySelectorAll("source[data-srcset]"); sources.forEach(function (source) { source.srcset = source.dataset.srcset; }); images.forEach(function (img) { img.src = img.dataset.src; }); } else { var script = document.createElement("script"); script.src = "/link/to/lazyload.js"; document.body.appendChild(script); }
</script>Повышенная производительность и оценка Lighthouse
На своем личном веб-сайте я использовал плагин JavaScript для отложенной загрузки изображений для всех браузеров. После внедрения этого современного подхода я удалил один файл JavaScript, который загружался и анализировался при загрузке веб-сайта, что, в свою очередь, увеличило мой рейтинг Lighthouse и общую производительность!
Спасибо, что нашли время прочитать этот пост.
Автор: Adrian Bece
Источник: https://blog.prototyp.digital
Редакция: Команда webformyself.