Узнайте о подсказках по ресурсам 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 позволяет сайтам сократить время, необходимое для подключения к другому источнику. Конечная цель состоит в том, чтобы время загрузки ресурса из другого источника было максимально сведено к минимуму.
Когда речь идет о крупнейшей отрисовке контента (LCP) , лучше, чтобы ресурсы были доступны для немедленного обнаружения, поскольку кандидаты LCP являются важной частью пользовательского опыта. Значение fetchpriority "high" для ресурсов LCP может еще больше улучшить ситуацию, сигнализируя браузеру о важности этого ресурса, чтобы он мог получить его раньше.
Там, где невозможно немедленно обнаружить ресурсы LCP, ссылка preload — также со значением fetchpriority , равным "high" , — по-прежнему позволяет браузеру загрузить ресурс как можно скорее.
Если ни один из этих вариантов недоступен (поскольку точный ресурс не будет известен до более поздней загрузки страницы), вы можете использовать preconnect к ресурсам с перекрестным происхождением, чтобы максимально снизить влияние позднего обнаружения ресурса.
Кроме того, preconnect менее затратно, чем preload , с точки зрения использования полосы пропускания, но все же не лишено рисков. Как и в случае с чрезмерными подсказками preload , чрезмерные подсказки preconnect по-прежнему потребляют полосу пропускания, когда речь идет о сертификатах TLS. Будьте осторожны и не подключайтесь заранее к слишком большому количеству источников, так как это может вызвать конфликты за полосу пропускания.
Заключение
Эти две подсказки по ресурсам полезны для повышения скорости страницы, если вы знаете, что скоро загрузите что-то со стороннего домена, но не знаете точный URL-адрес ресурса. Примеры включают CDN, которые распространяют библиотеки JavaScript, изображения или шрифты. Помните об ограничениях, используйте preconnect только для самых важных ресурсов, в остальном полагайтесь на dns-prefetch и всегда измеряйте влияние в реальном мире.