Функция прогнозирования (Foreseeing) в браузерах – это будущее высокоскоростного интернет-серфинга. Уже сегодня браузеры сами способны ускорять загрузку страниц, основываясь на поведении пользователя. Фактически они загружают контент, который пользователь хочет, еще до того, как он понял, что хочет его.
Мы можем в разы увеличить эффективность этой техники, ведь как разработчики, мы неплохо представляем, как юзер перемещается по нашему сайту. Зная, какие ресурсы запрашиваются чаще всего, мы могли бы сообщать браузеру о том, что их необходимо загрузить заранее. И здесь нам на помощь приходят теги links. С помощью специальных атрибутов они сообщают обозревателю, что нужно скачивать и зачем.
HTTP-запросы
Прежде чем приступать к оптимизации, освежим в памяти, как происходит типичный HTTP-запрос.
Джо хочет посетить какой-то веб-сайт.
- Он вспоминает его человекопонятный адрес, вводит в адресную строку браузера и нажимает
Enter. - Браузер обращается к DNS-серверу, чтобы получить соответствующий адресу IP.
- Получив IP, браузер отправляет TCP-сообщение на сервер веб-сайта, запрашивая соединение.
- Если сервер нормально работает, он подтверждает запрос и отправляет браузеру сообщение, которое он в свою очередь подтверждает (вот такая light-версия TCP-рукопожатия).
- Когда все рукопожатия завершены, устанавливается соединение между клиентом (браузером) и сервером.
- Браузер переходит с TCP на HTTP и запрашивает веб-страницу, которую Джо терпеливо ждет перед монитором.
- Сервер передает браузеру запрошенную страницу.
Чтобы добраться до нужного документа через интернет, требуется пройти множество этапов. Чем раньше этот процесс начнется, тем быстрее мы получим желаемое.
Отношения документов в HTML
У HTML-тега link есть атрибут rel – сокращение от relationship. Он определяет, в каком отношении находится открытый документ и страница, на которую указывает ссылка.
W3C определяет множество возможных значений для этого атрибута. Например, вы точно знакомы с rel="stylesheet", который используется для подключения CSS-файлов.
Нас же интересуют сейчас 4 значения:
dns-prefetch,preconnect,prefetch,prerender.
Все вместе они называются Resource Hints. Посмотрим, зачем они нужны и как с ними работать.
DNS Prefetch
Это значение атрибута rel позволяет заранее позаботиться о разрешении доменных имен документов, то есть получить нужный IP-адрес с DNS-сервера.
С точки зрения пропускной способности DNS-запросы очень малы, но задержка с их выполнением может быть довольно высокой, особенно в мобильных сетях. Эту задержку можно значительно уменьшить путем предварительной выборки DNS-результатов, например, в тот момент, когда пользователь нажимает на ссылку. В некоторых случаях задержку можно уменьшить на целую секунду.
MDN
Предположим, что на сайте есть справочная страница с множеством ссылок на дочерний сайт. Таким образом, имеется высокая вероятность того, что пользователь на этот дочерний сайт перейдет. Ранний поиск DNS может сократить время, необходимое для открытия сайта (тем самым улучшая пользовательский опыт).
<link rel="dns-prefetch" href="//othersite.org">Когда браузер видит этот код на справочной странице, он добавляет DNS-поиск дочернего сайта в очередь задач. Когда закончатся все высокоприоритетные задачи, он займется этим делом и найдет нужный IP-адрес.
Теперь, если юзер нажмет на ссылку, браузер сразу же приступает к установке TCP-соединения, минуя обращение к DNS-серверу.
Эта функция доступна практически во всех современных браузерах.
Preconnect
Значение rel="preconnect" заставляет браузер идти еще дальше и устанавливать соединение с сервером, на который в будущем может быть отправлен запрос.
Идеальный вариант использования для preconnect – редиректы, которые используются в вебе очень часто. Если следующий запрос браузера однозначно предсказуем (вы собираетесь сделать перенаправление), стоит сразу же загрузить нужный сайт, чтобы уменьшить задержку при его загрузке.
<link rel= "preconnect" href= "//othersite.com">У этого значения уже хорошая браузерная поддержка.
Prefetch
Если для ресурса указано отношение prefetch, браузер обращается к DNS-серверу за его доменным именем, выполняет TCP-соединение, делает HTTP-запрос и, наконец, извлекает и сохраняет ресурс в кэше. И все это в фоне, без явных действий пользователя.
С этим значением следует обращаться очень осторожно. Если вы не угадаете, куда хочет отправиться юзер следующим шагом, то можете не ускорить, а даже замедлить свой сайт. Иногда правильно предсказать действия пользователя очень сложно, поэтому как следует подумайте, следует ли использовать prefetch.
Один из кейсов использования этого значения – онлайн-книги/галереи/портфолио с постраничной пагинацией. Вероятность того, что юзер перейдет на следующую страницу высока, так что можно заранее загрузить ресурсы с нее, например, изображения.
<link rel="prefetch" href="//site.com/nextimage.jpg">Браузерную поддержку можно увидеть здесь.
Prerender
Значение prerender можно использовать только для HTML-страниц. Они будут полностью отрендерены в offline-режиме, а как только пользователь захочет перейти на них – сразу же показаны.
Это требует большой вычислительной работы и много памяти. Также для рендеринга страницы браузеру могут потребоваться дополнительные ресурсы (например, изображения, добавленные на страницу), что приведет к увеличению количества запросов.
Не злоупотребляйте этой мощной возможностью.
<link rel="prerender" href="//site.com/about.html">Браузерная поддержка все еще довольно плохая.
Заметки
- Ни один из перечисленных приемов не гарантирует вам, что нужный ресурс будет частично или полностью загружен заранее. Ведь у браузера есть масса другой важной работы, и он может просто не успеть выполнить предварительный запрос ресурса.
- Теги
linkс указанием атрибутаrelне обязательно должны находиться на странице сразу же при ее загрузке. Их можно добавлять динамически с помощью JavaScript. - W3C определяет для тегов
linkесть еще один атрибутpr(hint probability), который может принимать значения в диапазоне от0до1. Эта цифра определяет вероятность, с которой может быть запрошен указанный ресурс.
<link rel="preconnect" href="//xyzsite.com" pr="0.8"> <link rel="prerender" href="//example.com/about.html" pr="0.3">
- Можно использовать также атрибут crossorigin, чтобы настроить CORS-запросы.
0 комментариев