1.7. Открытие TCP-соединения

Как мы уже узнали, для нового ресурса открывается новое соединение и на это тратится время. Ускорение производительности достигается открытием TCP-соединения заранее — то есть предзагрузкой контента. Давайте посмотрим, как это можно сделать.

Ускорить производительность довольно просто. Есть значения атрибута rel для тега link, которые отдают команды на предварительные действия:

<link rel="preload" />
<link rel="preconnect" />
<link rel="prerender" />
<link rel="prefetch" />
<link rel="dns-prefetch" />

Разберём, за что отвечает каждый из них.

Preload

<link rel= "preload"> используется, если вам понадобится ресурс в течение нескольких секунд. Отдаёт команду браузеру, что нужно этот ресурс загрузить и кешировать, но пока ничего не делает с этим ресурсом. Предоставляет его только тогда, когда его запрашивают.

Синтаксис:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

Атрибут href указывает на путь к ресурсу. Атрибут as — на тип контента, его важно обозначить. Может быть:

style (CSS);
font (шрифты);
image (изображения);
script (JavaScript);
video (видеофайлы);
track (субтитры для <video>);
audio (аудиофайлы);
document (HTML-документы для <iframe>);
fetch (JSON-файлы).

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

<head>
  <meta charset="utf-8">
  <title></title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <script src="main.js"></script>
</body>

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

Prefetch

<link rel= "prefetch"> загружает ресурсы с минимальным приоритетом, то есть после загрузки всего остального. Его стоит использовать для загрузки ресурсов, которые понадобятся на следующей странице. Для этого нужно знать пользовательское поведение.

Например, на главной странице интернет-магазина на первом экране находятся товары по акции. По Яндекс Метрике увидели, что на страницы этих товаров переходят 30% пользователей. Поэтому можно предзагрузить изображения этих товаров и скрипты.

Синтаксис:

<link rel="prefetch" href="image-product-122.png" as="image">

Браузер с ресурсом ничего не делает: скрипты не исполняются, стили не применяются, просто кешируются для момента, когда понадобятся.

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

Prerender

<link rel= "prerender"> просит предзагрузить URL-адрес. При этом загружается вся страница и её ресурсы, но не загружается и не исполняется JavaScript. Стоит использовать для самой популярной страницы, на которую переходит более половины пользователей. Например, страницы цен.

Синтаксис:

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

Используйте не более чем для одной страницы.

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

Dns-Prefetch и Preconnect

<link rel="dns-prefetch"> заранее просят подключиться к DNS внешних сайтов:

<link rel="dns-prefetch" href="//ajax.jivosite.com">
<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//mc.yandex.ru">

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

<link rel="preconnect"> тоже получает DNS, но идёт дальше и устанавливает соединение с ресурсом:

<link rel="preconnect" href="//ajax.jivosite.com" crossorigin>
<link rel="preconnect" href="//google-analytics.com" crossorigin>
<link rel="preconnect" href="//mc.yandex.ru" crossorigin>

Атрибут crossorigin ускоряет подключение и загружает ресурс только один раз.

Итог

preload — когда ресурс нужен в течение нескольких секунд.

prefetch — когда ресурс нужен для следующей страницы.

prerender — когда вы уверены, что большинство пользователей перейдёт на определённую страницу, и планируете ускорить её загрузку.

preconnect — когда знаете, что вам скоро понадобится ресурс, но пока не знаете его полный адрес. Для старых браузеров — dns-prefetch.

Теперь перейдём от теории к практике.