Узнайте о подсказках ресурсов rel=preconnect и rel=dns-prefetch и о том, как их использовать.
Прежде чем браузер сможет запросить ресурс у сервера, он должен установить соединение. Установление защищенного соединения включает в себя три шага:
Найдите доменное имя и преобразуйте его в IP-адрес.
Установите соединение с сервером.
Для обеспечения безопасности зашифруйте соединение.
На каждом из этих этапов браузер отправляет фрагмент данных на сервер, а сервер отправляет ответ. Этот путь, от источника к месту назначения и обратно, называется круговым маршрутом .
В зависимости от состояния сети, один цикл обмена данными может занять значительное количество времени. Процесс установления соединения может включать до трех циклов обмена данными, а в неоптимизированных случаях — и больше.
Если позаботиться обо всем этом заранее, приложения будут работать намного быстрее. В этой статье объясняется, как этого добиться с помощью двух подсказок ресурсов: <link rel=preconnect> и <link rel=dns-prefetch> .
Установите ранние связи с помощью rel=preconnect
Современные браузеры изо всех сил пытаются предугадать, какие подключения потребуются странице, но они не могут надёжно предсказать их все. Хорошая новость в том, что вы можете дать им (полезную информацию 😉) подсказку.
Добавление rel=preconnect к ссылке <link> сообщает браузеру, что ваша страница намерена установить соединение с другим доменом и что вы хотите, чтобы этот процесс начался как можно скорее. Ресурсы будут загружаться быстрее, поскольку процесс настройки уже завершен к моменту, когда браузер их запрашивает.
Подсказки к ресурсам получили свое название потому, что они не являются обязательными инструкциями. Они предоставляют информацию о том, что вы хотите, чтобы произошло, но в конечном итоге решение о том, выполнять их или нет, принимает браузер. Установка и поддержание открытого соединения — это большая работа, поэтому браузер может игнорировать подсказки к ресурсам или выполнять их частично в зависимости от ситуации.
Сообщить браузеру о своем намерении очень просто: достаточно добавить на страницу тег <link> :
<link rel="preconnect" href="https://example.com">
Ускорить время загрузки на 100–500 мс можно, установив ранние соединения с важными сторонними источниками. Эти цифры могут показаться незначительными, но они существенно влияют на восприятие пользователями производительности веб-страницы .
Варианты использования rel=preconnect
Знать, откуда , но не знать , что именно вы берете.
Из-за версионированных зависимостей иногда возникает ситуация, когда вы знаете, что будете запрашивать ресурс с конкретного CDN, но не знаете точного пути к нему.
Другой распространенный случай — загрузка изображений с CDN-сети , где точный путь к изображению зависит от медиа-запросов или проверок функций во время выполнения в браузере пользователя.
В подобных ситуациях, если загружаемый ресурс важен, вы хотите максимально сэкономить время, предварительно подключившись к серверу. Браузер не загрузит файл, пока ваша страница не запросит его, но, по крайней мере, он сможет заранее обработать аспекты подключения, избавив пользователя от ожидания нескольких запросов туда-обратно.
Потоковое мультимедиа
Еще один пример, когда может потребоваться сэкономить время на этапе подключения, но при этом не обязательно начинать загрузку контента сразу, — это потоковая передача мультимедиа из другого источника.
В зависимости от того, как ваша страница обрабатывает потоковый контент, возможно, вам стоит подождать, пока ваши скрипты загрузятся и будут готовы к обработке потока. Предварительное подключение помогает сократить время ожидания до одного цикла обмена данными, когда вы будете готовы начать загрузку.
Как реализовать rel=preconnect
Один из способов инициировать preconnect — добавить тег <link> в раздел <head> документа.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Предварительное подключение эффективно только для доменов, отличных от исходного домена, поэтому его не следует использовать для вашего сайта.
Вы также можете инициировать предварительное соединение через HTTP-заголовок Link :
Link: <https://example.com/>; rel=preconnect
Некоторые типы ресурсов, например шрифты, загружаются в анонимном режиме . Для них необходимо установить атрибут crossorigin с помощью подсказки preconnect :
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Если опустить атрибут crossorigin , браузер выполнит только поиск DNS.
Разрешение доменного имени на раннем этапе с помощью rel=dns-prefetch
Вы запоминаете сайты по их именам, а серверы — по IP-адресам. Именно поэтому существует система доменных имен (DNS). Браузер использует DNS для преобразования имени сайта в IP-адрес. Этот процесс — разрешение доменных имен — является первым шагом в установлении соединения.
Если странице необходимо установить соединения со многими сторонними доменами, предварительное подключение ко всем из них контрпродуктивно. Подсказку preconnect лучше использовать только для наиболее важных соединений. Для всех остальных используйте <link rel=dns-prefetch> чтобы сэкономить время на первом этапе — поиске DNS, который обычно занимает около 20–120 мс .
Разрешение DNS-запросов инициируется аналогично preconnect : путем добавления тега <link> в раздел <head> документа.
<link rel="dns-prefetch" href="http://example.com">
Поддержка dns-prefetch в браузерах немного отличается от поддержки preconnect , поэтому dns-prefetch может служить резервным вариантом для браузеров, которые не поддерживают preconnect .
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch в тот же тег <link> приводит к ошибке в Safari, из-за которой preconnect отменяется. Влияние на краску с наибольшим содержанием (LCP)
Использование dns-prefetch и preconnect позволяет сайтам сократить время, необходимое для подключения к другому источнику. Конечная цель состоит в том, чтобы свести к минимуму время загрузки ресурса с другого источника.
Что касается Largest Contentful Paint (LCP) , то лучше, чтобы ресурсы были доступны для обнаружения немедленно, поскольку кандидаты на LCP являются важнейшими элементами пользовательского опыта. Значение fetchpriority , равное "high" для ресурсов LCP может еще больше улучшить этот показатель, сигнализируя браузеру о важности этого ресурса, чтобы он мог загрузить его раньше.
В тех случаях, когда невозможно обеспечить мгновенный доступ к ресурсам LCP, ссылка preload — также со значением fetchpriority "high" — все равно позволяет браузеру загрузить ресурс как можно быстрее.
Если ни один из этих вариантов недоступен — поскольку точный ресурс станет известен только на более позднем этапе загрузки страницы — вы можете использовать preconnect к ресурсам из других источников, чтобы максимально уменьшить влияние позднего обнаружения ресурса.
Кроме того, preconnect обходится дешевле preload с точки зрения использования полосы пропускания, но все же сопряжено с рисками. Как и в случае с избыточным количеством подсказок preload , избыточное количество подсказок preconnect также потребляет полосу пропускания, когда речь идет о TLS-сертификатах. Следует избегать предварительного подключения к слишком большому количеству источников, так как это может привести к конкуренции за полосу пропускания.
Заключение
Эти два совета по ресурсам помогут улучшить скорость загрузки страницы, если вы знаете, что скоро будете скачивать что-то со стороннего домена, но не знаете точный URL-адрес ресурса. Примеры включают CDN, распространяющие библиотеки JavaScript, изображения или шрифты. Учитывайте ограничения, используйте preconnect только для самых важных ресурсов, полагайтесь на dns-prefetch для остальных и всегда оценивайте влияние на реальных условиях.