Предсказывающие страницы: Использование dns-prefetch, preconnect, prefetch, preload и prerender для повышения производительности страницы

Разработчики постоянно пытаются повысить производительность глобальной сети, начиная с браузеров, заблаговременно загружающих страницы еще до того, как будет введен поисковой критерий, до приоритизации контента на видимой части страницы. HTML уже сделал несколько шагов в сторону упрощения этого процесса с помощью rel=«next» и rel=«previous» для создания подсказок для браузера, который сможет с их помощью заранее скрыто загружать страницы еще до совершения какого-либо действия со стороны пользователя.

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

Кто стучится в дверь ко мне

Поиск DNS – процесс поиска доменного имени в сети и его перевода в IP-адрес – может занимать от десяток до сотен миллисекунд. Если пользователь уже на вашем сайте, его браузер уже знает его положение… но если вы загружаете ресурсы с других сайтов на свой страницу, браузеру нужно время на обработку информации DNS по каждому из них, так как он находит их в HTML. Вы можете предвосхитить этот процесс, поместив dns-prefetch для внешних сайтов в своей страницы.

Пример использования dns-prefetch

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

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)   })(window,document,'script','http://google-analytics.com/analytics.js','ga');   ga('create', 'UA-9896842-2', 'auto');   ga('send', 'pageview'); </script> 

Мы видим, что скрипт обращается к google-analytics.com. Вместо того, чтобы пытаться получить это доменное имя в момент обнаружения скрипта, мы можем дать браузеру подсказку, что будет использоваться URL, и что он должен проверить, знает ли он, как связаться с этим сайтом, пока остальная часть страницы будет отрисовываться. Добавьте в вашего документа следующее:

<link rel="dns-prefetch" href="//google-analytics.com/"> 

Обратите внимание, что значение href не содержит протокола, т.е. оно не начинается с http: или https:. Это отличный вариант для нашей цели. Это значение эффективно в данном случае, так как оно обеспечивает максимальную гибкость для получения доступа к сервису Google Analytics.

Потенциально это ускоряет загрузку страницы по частям для каждого URL, указанного в dns-prefetch, так как браузер уже «знает», куда ему нужно пойти, чтобы достать ресурс, пока до него дойдет парсер.

Открываем дверь

preconnect помогает продвинуться еще дальше. Он делает все то же, что и dns-prefetch, но при этом добавляет несколько дополнительных согласований в отношении интернет-соединения; если dns-prefetch «стучится», чтобы проверить расположение сайта, то preconnect открывает дверь.

Пример использования preconnect

Статьи на сайте оригинала иногда используют ресурсы, сохраненные на сервере Amazon S3, вызываемые в ситуациях, когда в страницу встраивается демо CodePen. Чтобы ускорить поиск этих файлов, в добавляется preconnect:

<link rel="preconnect" href="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> 

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

Реализуем выборку

Еще один шаг вперед – это prefetch (предварительная выборка), предназначенная для загрузки ресурса, который, скорее всего, будет использоваться в следующей навигации пользователя. Как правило, это страница, на которую, скорее всего, перейдет пользователь после той, на которую он смотрит в данный момент.

Пример использования prefetch

prefetch наиболее похож на rel=«previous» и next, и в большинстве случаев будет использоваться таким же образом. В случае, описанном в данной статье, наиболее вероятной целью для пользователя будет предыдущая страница:

<link rel="prefetch" href="/190/Using-link-rel-to-preload-web-content-and-aid-accessibility"> 

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

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

Спецификация Resource Hints предлагает вариант добавления статистической вероятности того, что пользователь перейдет к определенному ресурсу, позволяя вам настроить поведение предварительной выборки; насколько я знаю, на данный момент ни один браузер не поддерживает эту функцию.

Загрузка без блокировки

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

Пример использования preload

Хорошим примером использования preload являются веб-шрифты: как правило, шрифты загружаются только тогда, когда они будут определены в CSS, что зачастую приводит к страшному «сборищу контента без оформления», так как страница отрисовывается сначала с помощью стандартных типов шрифтов, и только потом, при загрузке, перерисовывает страницу с помощью веб-шрифта. Чтобы избежать этого, мы можем указать, чтобы шрифт загружался до того, как мы достигнем CSS. В случае с данным сайтом, это будет шрифт Libertad, используемый для оформления текста тела страницы:

<link rel="preload" href="libertad.woff2" as="font"> 

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

Отрисовка

И последний способ – запросить браузер одновременно найти и полностью отрисовать страницу «за кулисами», делая ее доступной в момент, когда пользователь нажимает на связанную с ней ссылку. Понятно, что такой подход следует использовать крайне редко. Он может подойти для посадочной страницы, на которой кнопка открывает полноэкранный опыт, создающий полный эффект присутствия.

Пример использования Prerender

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

<link rel="prerender" href="/samples/polina.html"> 

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

Такой вид поведения, как правило, достигался за счет использования предзагрузчиков JavaScript, а для сложных сайтов до сих пор может потребоваться код JS. Но для более простых случаев достаточно эффективным будет и prerender.

Подсказки по ресурсам как инвестиция

Крайне важно понимать, что все это просто подсказки для браузера, а не точные указания. Браузер может последовать или не последовать таким подсказкам, основываясь на пропускной способности сети, использовании памяти, поддержке поставщика и прочих факторах. Как таковые, их следует рассматривать как инвестиции, а не как гарантию повышения эффективности, и, конечно же, не как «панацею» от всех проблем сайта или низкой скорости загрузки страницы.

Учитывая все это, существует несколько факторов, которые могут улучшить поведение страницы в процессе предзагрузки:

• Эффективные подсказки по ресурсам полагаются на внимательный учет показателей страницы. Нет ничего плохого в угадывании, куда пользователи могут перейти после посещения страницы на вашем сайте, но ожидания сильно отличаются от фактических данных. Если вы запускаете новый или обновленный сайт, догадки будут работать хорошо; но после недели или более сборов данных, аналитические данные по сайту необходимо использовать для: (а) формирования действий пользователя за счет изменения дизайна сайта, чтобы направлять посетителей туда, куда вы хотите (и куда направлены ваши подсказки по ресурсам) или (b) изменения подсказок, чтобы они точно отражали поведение пользователя.
• Не только для браузеров. Вместе с <link rel=«next» …> и rel=«previous», подсказки по ресурсам предоставляют поисковым движкам дополнительные возможности оценивать и связывать контент. Например, Google может использовать next и previous, чтобы помочь определить организационную структуру сайта и приоритизировать результаты для первой страницы связанными рядами.

Заключение

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

---

ссылка на оригинал статьи http://habrahabr.ru/post/266495/