Ленивая загрузка изображений для максимальной производительности

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

Возникает интересная ситуация:

• Мы хотим использовать преимущества нативной отложенной загрузки (lazy load) для браузеров, которые ее поддерживают.
• Мы хотим использовать JS-плагин в качестве запасного варианта для отложенной загрузки для браузеров, которые его не поддерживают.
• Мы не хотим загружать JS-плагин для отложенной загрузки, если браузер поддерживает встроенную отложенную загрузку.
• Поддержка элементов img и source обязательна

Атрибут loading

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

• auto - значение по умолчанию. То же, что и без установки атрибута
• eager - немедленно загрузить ресурс
• lazy - загрузить ресурс, как только он окажется в области просмотра

Обычно используются значения eager для ресурсов которым не нужен lazy load и значение lazy для ресурсов, которым это необходимо.

Современный подход

Нам нужно написать скрипт, который будет запускаться после загрузки HTML-документа. Автор использовал скрипт Jekyll, который подключил перед закрывающимся тегом body. Это наиболее эффективный способ подключения JavaScript кода, позволяющий избежать блокировки рендеринга страницы.

Разметка изображения

Мы хотим, чтобы наша функция JavaScript запускала процесс загрузки изображения на основе встроенной поддержки функции отложенной загрузки. Для корректной работы скрипта мы укажем путь к нашим изображениям в атрибуте data-src вместо src.

Но мы не должны оставлять src пустым, поэтому мы будем использовать заполнитель прозрачного изображения 1px x 1px. Наша разметка для элементов 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){
		  /* Нативная загрузка lazy loading поддерживается */
	}else{
		  /* Нативная загрузка lazy loading не поддерживается */
	}

Окончательный JavaScript код

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

Для браузеров, неподдерживающих lazy load, нам нужно загрузить плагин JavaScript и запустить его (если это не делается автоматически). Автор использовал lazysize, но можно использовать любой другой плагин. Главное убедитесь, что ваша разметка корректная (содержит правильные имена классов и data-атрибуты у элементов).

Итак, окончательный код 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 и общую производительность!

Дополнительные методы оптимизации изображений для максимальной производительности

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

• Optimizing images for the web - an in-depth guide
• Improving website performance by eliminating render-blocking CSS and JavaScript

Оригинал статьи: Best way to lazy load images for maximum performance

Автор статьи: Adrian Bece

Перевод: Земсков Матвей