8 (8212) 55 18 12

Ускорение загрузки ресурсов для сайта с помощью: preconnect, prefetch, prerender, preloading.

Приступить к чтению

Для начала, давайте разберемся, для чего вообще нам нужно что-то ускорять. Выделю две причины и первая из них - сильно страдающая конверсия из-за долгой загрузки страницы. Статистика показывает, что в среднем пользователь готов ждать загрузку страницы около 2-3 секунд, прежде чем закроет страницу и продолжит поиск необходимой информации, услуги или сервиса. В редких случаях – дольше, но только в том случае, если ресурс ему знаком, и он уверен, что ожидает именно ту информацию, в которой он нуждается. Вторая причина связана с особенностями работы поисковых систем и роботов. Из-за долгого отклика сервера страницы начинают хуже индексироваться поисковыми роботами и ранжироваться поисковыми системами. Это может привести к тому, что ваш сайт будет терять место в поисковой выборке и вся деятельность по продвижению пойдет насмарку.

К оптимизации работы веб-приложения можно подходить с нескольких сторон и сегодня мы взглянем на эту проблему с позиции оптимизации загрузки ресурсов.

Обычно, когда заходит разговор об оптимизации фронтенда, мы говорим о различных видах компрессии ресурсов, что необходимо для ускорения загрузки страницы. Мы помним, пользователь должен получать информацию максимально быстро.

Существует и другой способ оптимизации: предварительная загрузка контента. В свое время W3C добавили набор новых функций в link, так называемые Resource Hints, с помощью которых можно указать браузеру, какие именно ресурсы могут понадобиться пользователю в следующий момент. Как разработчики, мы знаем свои приложения лучше браузеров и эти инструменты помогают нам донести до них информацию о приоритете и востребованности ресурсов в будущем.

DNS-prefetch

Чтобы загрузить что-либо со стороннего сайта, браузеру нужно установить его IP адрес, используя DNS. Конечно, это занимает какое-то время. С помощью dns-prefetch можно установить IP адрес указанного домена в фоне браузера. Например:

Пример кода

<link href="//example.com" rel="dns-prefetch" />
 
Prefeth

Сообщите браузеру по каким адресам могут находиться ресурсы Вашей страницы

 

Preconnect

Работает так же, как dns-prefetch, только шире. Кроме DNS устанавливает TCP/TLS связь:

Пример кода

<link rel="preconnect" href="http://example.com">
 

Prefetch

Если мы знаем, что какой-то конкретный ресурс будет нужен в будущем, мы можем указать браузеру запросить его и сохранить в кэш для дальнейшего использования. Это может быть картинка или скрипт, вообще что угодно что можно поместить в кэш браузера:

Пример кода

<link rel="prefetch" href="image.png">

 

Subresource

Инструмент, аналогичный prefetch, только используется для того чтобы задать ресурсу самый высокий приоритет предварительной загрузки. Например, может использоваться для ресурса, который будет нужен на текущей странице и должен быть доступен максимально быстро.

К тому же существует общая распространенная практика для ускорения загрузки страницы: вынесение некритичных для первоначального отображения страницы ресурсов из тега <head> в тег <body>. Дело в том, что браузер не начинает выстраивать DOM страницы, пока не скачает все ресурсы, указанные в <head>. Поэтому обычно в <head> оставляют ресурсы, ответственные за непосредственное отображение страницы, а все остальные - в <body>, где они скачиваются параллельно, после построения DOM.

 

Prerender

Этот инструмент позволяет загрузить всё содержимое указанной страницы в фоне. Работает, как если бы мы открыли страницу в скрытой вкладке. Все ресурсы будут скачены, DOM построен, CSS применен, JS исполнен. И когда пользователь перейдет по ссылке, то эта страница откроет моментально и встанет вместо текущей.

Пример кода

<link rel="prerender" href="http://example.com">
 

Этот инструмент должен использовать при 100% уверенности что пользователь перейдет по ссылке, иначе вы излишне нагружаете фронтенд, заставляя браузера скачивать и рендерить ненужный контент.

 

Preloading

Эта возможность еще не работает, но уже добавления в спецификацию. Работает как prefetch, только срабатывает в любом случае, нравится это браузеру или нет.

Пример кода

<link rel="preload" href="image.png">

 

В дополнение

Перед заключением хочу привести несколько распространенных приемов предварительной загрузки ресурсов с помощью CSS, JavaScript и Ajax. Подход у этих приемов один: заставить браузер выполнить загрузку ресурса, для того, чтобы при повторном обращении к этому ресурсу он уже был готов.

Чтобы выполнить предварительную загрузку картинки с помощью CSS, можно воспользоваться таким приемом:

#preloaded-pic { background: url(http://example.com/image.png) no-repeat -9999px -9999px; }

Тем самым мы добавляем выбранную картинку в бэкграунд некоего (любого) элемента и сдвигаем его, чтобы картинка не отображалась пользователю.

Для предварительной загрузки опять же картинок с помощью JavaScript есть простейший прием:

<script> 
    img= new Image(); 
    img.src="http://example.com/image.png"; 
</script>

Здесь, вместо использования CSS свойства мы используем JS-элемент.

С помощью Ajax можно выполнять предварительную загрузку не только изображений:

<script> 
	window.onload = function() {
		setTimeout(function() {
			var xhr = new XMLHttpRequest();
			xhr.open('GET', 'http://example.com/preload.js');
			xhr.send('');
			xhr = new XMLHttpRequest();
			xhr.open('GET', 'http://example.com/preload.css');
			xhr.send('');
			new Image().src = "http://example.com/preload.png";
		}, 1000);
	}; 
</script>

Файлы предзагружены, осталось только правильно их обернуть и добавить в <head>:

<script> 
	window.onload = function() {
		setTimeout(function() {
			var head = document.getElementsByTagName('head')[0];
			var css = document.createElement('link');
			var js  = document.createElement("script");

			css.type = "text/css";
			css.rel  = "stylesheet";
			css.href = "http://example.com/preload.css";

			js.type = "text/javascript";
			js.src  = "http://example.com/preload.js";

			head.appendChild(css);
			head.appendChild(js);

			new Image().src = "http://example.com/preload.png";
		}, 1000);
	};
</script>

 

Заключение

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

Время прочтения:
Время прочтения 5.8 мин

Для авторов

Хотите стать со-автором блога, рассказать аудитории о новинках в мире веб и все что с ним связано? Тогда присылайте ваши материалы и мы опубликуем их.

Стать автором

Обсуждение

comments powered by HyperComments