От автора: с помощью подсказок Preconnect вы сможете уменьшить задержку при ответе на запрос пользователя и увеличить скорость загрузки сайта.
Когда вы выполняете запрос к внешнему ресурсу, веб-сайту или приложению, перед тем, как браузер начинает загружать ресурс, проходит несколько полных циклов приема и обработки запросов. Эти циклы включают в себя DNS-поиск, TCP «рукопожатия» и «переговоры» TLS (если используется SSL).
В зависимости от страницы и условий сети, эти циклы приема и обработки запросов могут добавлять сотни миллисекунд задержки, и даже больше. Если вы запрашиваете ресурсы с нескольких разных хостов, задержка может еще увеличиться, и в результате страница может открываться гораздо медленнее, чем должна, особенно на медленном мобильном соединении, капризном wifi или в перегруженой сети.
Одним из самых простых способов увеличить скорость загрузки сайта или приложения является добавление подсказок preconnect для всех хостов, с которых вы будете запрашивать ресурсы. Эти подсказки фактически говорят браузеру, какой источник будет использован для ресурсов, чтобы он подготовился, осуществляя все необходимые соединения для этих ресурсов. Ниже приведены несколько сценариев, в которых добавление подсказок preconnect ускоряют процесс загрузки!
Быстрое отображение Google Fonts
Google Fonts – это круто. Этот сервис является надежным и быстрым благодаря глобальной CDN от Google. Однако, в результате того, что правила @font-face нужно открыть в CSS-файлах перед тем, как делать запрос на веб шрифты, возникает заметная задержка во время обработки страницы. Мы можем существенно уменьшить эту задержку, если добавим такую подсказку preconnect!
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Как только мы это сделали, мы можем увидеть на диаграмме ощутимую разницу. Добавление preconnect удаляет три цикличные задержки из критического пути обработки и сокращает время ожидания больше чем на полсекунды.
Этот пример использования preconnect имеет самое очевидное преимущество, так как здесь уменьшается задержка, связанная с блокировкой обработки, и уменьшается время отображения.
Примите во внимание, что спецификации начертания шрифта требуют, чтобы шрифты загружались в «анонимном режиме», поэтому атрибут crossorigin является необходимым для подсказки preconnect.
Быстрое воспроизведение видео
Если у вас в первом окне просмотра загружено видео, или вы загружаете видео по требованию ниже на странице, можно использовать preconnect, чтобы быстрее загружались воспроизводимые ресурсы и отображались иконки. Для видео YouTube используйте следующие подсказки preconnect:
<link rel="preconnect" href="https://www.youtube.com"> <link rel="preconnect" href="https://i.ytimg.com"> <link rel="preconnect" href="https://i9.ytimg.com"> <link rel="preconnect" href="https://s.ytimg.com">
Roboto в настоящее время используется в качестве шрифта в проигрывателе YouTube, так что вы, вероятно, также захотите предварительно подключиться к хосту шрифтов Google, если еще не сделали этого.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Эту же идею можно применить к другим видео-сервисам, например, Vimeo, где используется только два хоста: vimeo.com и vimeocdn.com.
Preconnect для производительности
Существует всего несколько примеров того, как можно использовать preconnect. Как видите, эти подсказки очень легко удаляют емкие циклы приема и обработки из путей запроса. Вы можете также применить их посредством HTTP-заголовков или вызвать их через JavaScript. Браузеры уже поддерживают их достаточно хорошо, а со временем будут поддерживать еще лучше (они поддерживаются в Chrome и Firefox, скоро будут поддерживаться в Safari и Edge). Впрочем, убедитесь, что вы используете их правильно. Предварительно размещайте их только для тех хостов, с которых абсолютно точно будут запрашиваться ресурсы. Кроме того, не забывайте, что это всего лишь «подсказки» для оптимизации, и они могут действовать не каждый раз. Если вы уже использовали preconnect для других целей и получили результат, напишите об этом в комментариях ниже!
Автор: Jeremy Frank
Источник: https://www.viget.com/
Редакция: Команда webformyself.