Уже сейчас браузеры могут самостоятельно ускорять загрузку веб-страниц в зависимости от поведения конкретного пользователя. Магия технологии заключается в том, что контент, который захочет увидеть пользователь, начинает загружаться еще до того, как он поймет, что хочет этого.
Мы способны сделать данный процесс более эффективным в несколько раз. Потому что разработчики прекрасно представляют обычный порядок действий юзера на их сайтах.
А зная ресурсы, которые запрашивают чаще других, нам было бы неплохо давать браузеру команду загружать их заранее. Это возможно с тегами links. Используя специальные атрибуты, теги links говорят обозревателю, что именно нужно скачивать, когда и почему.
HTTP-запросы
Перед началом оптимизации вспомним, как происходит обычный HTTP-запрос.
Игорь хочет зайти на любой веб-ресурс.
- Он пишет в адресной строке человекопонятный адрес сайта и запускает поиск.
- К приходит запрос от браузера, цель которого сейчас – получить требуемый IP-адреса.
- После получения IP браузер запрашивает соединение, отправляя на сервер портала -сообщение.
- В случае нормальной работы сервера запрос подтверждается, браузер получает от него сообщение и тоже подтверждает его.
- По завершению TCP-рукопожатий, описанных в 4 пункте, происходит установка соединения клиент(браузер)-сервер.
- Перейдя на HTTP, браузер запрашивает веб-сайт, который Игорь терпеливо ожидает увидеть на своем мониторе.
- Браузер получает от сервера затребованную страницу.
Как видим, чтобы добраться до любого документа в интернете, нужно пройти большое количество этапов. И чтобы быстрее увидеть желаемый результат, этот процесс нужно начать как можно раньше.
Отношения между HTML-документами
Один из атрибутов способен определять отношение между текущим документом и тем, на который ведет ссылка. Речь идет о rel (сокращенно от англ. «relationship»).
Организация W3C описывает много возможных значений данного атрибута. К примеру, вы точно знаете rel="stylesheet", используемый для включения файлов CSS.
Но сейчас нам интересны другие четыре атрибута: dns-prefetch, prerender, prefetch и preconnect. Обобщенно их называют . Выясним, для чего они применяются и что с ними делать.
DNS Prefetch
С помощью этого значения rel можно заблаговременно решить вопрос разрешения имен доменов, т. е. осуществить DNS-преобразование «доменное имя в требуемый IP-адрес».
Что касается пропускной способности каналов связи, DNS-запросы незначительны. Тем не менее, они часто выполняются с большой задержкой, что особенно характерно для мобильных сетей. Минимизировать эту неприятность можно благодаря предварительной выборке, скажем, когда юзер кликает по ссылке. Иногда задержку удается уменьшить даже на полную секунду.
MDN
Допустим, на справочной странице веб-сайта есть много ссылок на другой, дочерний портал. Вполне вероятно, что большинство пользователей на этот дочерний ресурс все-таки перейдут. Для улучшения клиентского опыта будет хорошей идеей использовать преждевременный поиск DNS, чтобы сократить время, в течение которого загрузится сайт.
<link rel="dns-prefetch" href="//othersite.org">Видя данный код, браузер ставит в очередь задач поиск DNS второго сайта. И он приступит к нахождению необходимого IP-адреса сразу после того, как будут завершены все задачи с высоким приоритетом.
Таким образом, когда пользователь переходит по ссылке, браузер тут же устанавливает TCP-соединение, пропуская запрос к серверу DNS.
Preconnect
Это значение принуждает браузер заходить еще дальше, соединяясь с доменом, к которому может быть направлен запрос на подключение в будущем.
Прекрасный вариант для применения preconnect – это редиректы, так часто встречающиеся в сети. Если вы способны однозначно предсказать следующий запрос и планируете сделать перенаправление, то лучше сразу загрузить требуемый сайт: так задержка будет существенно уменьшена.
<link rel="preconnect" href="//othersite.com">.
Prefetch
Когда указывается отношение prefetch, для загрузки ресурса браузер запрашивает доменное имя у DNS-сервера, осуществляет TCP-соединение, отправляет HTTP-запрос, а затем сохраняет сайт в кэше. Причем происходит это все в фоновом режиме, без видимых действий юзера.
Обращаться с данным значением нужно весьма осторожно. Потому что если ваше предсказание следующего шага пользователя окажется ошибочным, то сайт не то что не будет ускорен – его загрузка ощутимо замедлится. В некоторых ситуациях предугадать действия посетителя веб-страницы очень сложно. Так что перед использованием prefetch хорошо подумайте.
Идеально значение подходит для онлайн-книг, журналов, портфолио, фотогалерей, где реализована постраничная пагинация. Юзеры с большой долей вероятности будут загружать следующие страницы, поэтому можно предварительно подготовить некоторые их ресурсы. В этой строке кода, например, предусмотрена загрузка изображений:
<link rel="prefetch" href="//site.com/nextimage.jpg">.
Prerender
Атрибут rel="prerender" используется для настройки только HTML-страниц. Подготовка документов в этом случае происходит оффлайн, а когда пользователь хочет открыть их, страницы сразу же показываются.
Для этого необходим большой объем памяти и много вычислений. Кроме того, рендеринг может потребовать от браузера дополнительных ресурсов (как вариант – изображений), из-за чего количество запросов возрастет. Поэтому злоупотреблять этой колоссальной возможностью не стоит.
<link rel="prerender" href="//site.com/about.html">Примечания
- Перечисленные способы не дают 100%-ную гарантию того, что ресурс загрузится заранее: целиком или хотя бы частично. Браузеру приходится выполнять очень много важных процессов, и он может элементарно не успеть отреагировать на предварительный запрос сайта.
- Не обязательно помещать «link rel» сразу на этап загрузки. Их также можно приписывать динамически, используя JavaScript.
- Для этих тегов существует еще один полезный атрибут - 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">- Для настройки CORS-запросов можно воспользоваться и атрибутом .