Матвей Земсков

Заметки веб-мастера

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

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

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

 
Суббота, 24 апреля 2021 15:01

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

Оцените материал
(0 голосов)

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

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

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

На момент написания этой статьи около 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 будет выглядеть примерно так:

HTML

	<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.

HTML

	<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.

JavaScript

	if ("loading" in HTMLImageElement.prototype){
		  /* Нативная загрузка lazy loading поддерживается */
	}else{
		  /* Нативная загрузка lazy loading не поддерживается */
	}

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

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

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

Итак, окончательный код JavaScript будет выглядеть примерно так:

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

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

Прочитано 313 раз

Добавить комментарий


Свежие заметки
Последние комментарии
Наверх