Согласно статистике HTTP Archive средний размер страниц стремится к 1 МБ, в то время как огромное количество статических ресурсов вынуждает браузеры совершать в среднем до 90 запросов для каждой страницы.

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

Записи DNS
Если снова обратиться к HTTP Archive, то можно увидеть, что неизменно увеличивается и количество хостов, с которых осуществляется загрузка ресурсов. Так на сегодняшний день браузеры совершают порядка 13 DNS запросов. Связано это как с техниками по оптимизации быстродействия (доменный шардинг, загрузка популярных JavaScript библиотек посредством специальных CDN провайдеров), так и с большим количеством сторонних ресурсов.

Статистика HTTP Archive

Минимизировать данную проблему можно с помощью предварительного разрешения доменных записей:

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//ajax.googleapis.com">

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

Такой подход будет надёжно работать в следующих браузерах:

  • Firefox 3.5+
  • Chrome
  • Safari 5+

Судя по всему, в Opera данный механизм пока не реализован. Internet Explorer поддерживает предварительное разрешение доменные записей начиная с 9-ой версии, но для этого используются иные атрибуты, речь о которых пойдет в следующем разделе.

Статические ресурсы
Уже давно Firefox поддерживает возможность предварительной загрузки ресурсов. Для этого необходимо либо воспользоваться HTML тэгом link

<link rel="prefetch" href="/images/next.png">

либо HTTP заголовком вида

Link: </images/next.png>; rel=prefetch

Наравне с атрибутом prefetch можно использовать свойство next, что в общем случае нежелательно из-за наличие у него иной функции.

При этом начиная с версии 3.5 возможна предварительная загрузка даже для HTTPS соединений. Отсутствует ограничение и на загрузку ресурсов со сторонних хостов.

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

Internet Explorer 9 также поддерживает данный элемент тэга link, но в данном случае это приведёт только к предварительному разрешению доменного имени.

Chrome в свою очередь идёт дальше и реализует не только загрузку, но и предварительный рендеринг целых страниц. По сути это равнозначно фоновой загрузке. В случае браузера Chrome сделать это можно только через тэг link:

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

Изменяется также значение атрибута отношения на prerender. В отличии от Firefox данный механизм работает только для одного объекта или страницы.

Это далеко не полный список ограничений. Пререндеринг прерывается, если:

  • имеются HTML элементы Audio или Video на странице;
  • совершаются POST, PUT и DELETE Ajax-запросы;
  • требуется HTTP аутентификация;
  • используются HTTPS соединения;
  • возникают всплывающие окна;
  • страница является опасной для пользователя;
  • рендеринг является требовательным к системным ресурсам;
  • открыты инструменты разработчика.

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

Информация о пререндеринге в Chrome

Универсальный подход
Решения, представленные в предыдущем разделе, сравнительно эффективно работают
лишь в контексте отдельно взятых браузеров. Универсальный подход можно реализовать с помощью следующей JavaScript функции:

(function () { 
	var	o = document.createElement('object'), 
		url = "/style/next.css";

	if (navigator.appName.indexOf('Microsoft') === 0) { 
		new Image().src = url; 
	} else { 
		o.data = url; 
		o.width  = 0; 
		o.height = 0; 

		document.body.appendChild(o); 
	} 
})();

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

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

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

Источники:
DNS Prefetching
Internet Explorer 9 Network Performance Improvements
Link prefetching FAQ
Web Developer’s Guide to Prerendering in Chrome
Preload CSS/JavaScript without execution

Метки: