Увеличьте скорость загрузки вашего сайта с помощью подсказок Preconnect

От автора: с помощью подсказок Preconnect вы сможете уменьшить задержку при ответе на запрос пользователя и увеличить скорость загрузки сайта.

Когда вы выполняете запрос к внешнему ресурсу, веб-сайту или приложению, перед тем, как браузер начинает загружать ресурс, проходит несколько полных циклов приема и обработки запросов. Эти циклы включают в себя DNS-поиск, TCP «рукопожатия» и «переговоры» TLS (если используется SSL).

В зависимости от страницы и условий сети, эти циклы приема и обработки запросов могут добавлять сотни миллисекунд задержки, и даже больше. Если вы запрашиваете ресурсы с нескольких разных хостов, задержка может еще увеличиться, и в результате страница может открываться гораздо медленнее, чем должна, особенно на медленном мобильном соединении, капризном wifi или в перегруженой сети.

Одним из самых простых способов увеличить скорость загрузки сайта или приложения является добавление подсказок preconnect для всех хостов, с которых вы будете запрашивать ресурсы. Эти подсказки фактически говорят браузеру, какой источник будет использован для ресурсов, чтобы он подготовился, осуществляя все необходимые соединения для этих ресурсов. Ниже приведены несколько сценариев, в которых добавление подсказок preconnect ускоряют процесс загрузки!

Быстрое отображение Google Fonts

Google Fonts – это круто. Этот сервис является надежным и быстрым благодаря глобальной CDN от Google. Однако, в результате того, что правила @font-face нужно открыть в CSS-файлах перед тем, как делать запрос на веб шрифты, возникает заметная задержка во время обработки страницы. Мы можем существенно уменьшить эту задержку, если добавим такую подсказку preconnect!

Как только мы это сделали, мы можем увидеть на диаграмме ощутимую разницу. Добавление preconnect удаляет три цикличные задержки из критического пути обработки и сокращает время ожидания больше чем на полсекунды.

Этот пример использования preconnect имеет самое очевидное преимущество, так как здесь уменьшается задержка, связанная с блокировкой обработки, и уменьшается время отображения.

Примите во внимание, что спецификации начертания шрифта требуют, чтобы шрифты загружались в «анонимном режиме», поэтому атрибут crossorigin является необходимым для подсказки preconnect.

Быстрое воспроизведение видео

Если у вас в первом окне просмотра загружено видео, или вы загружаете видео по требованию ниже на странице, можно использовать preconnect, чтобы быстрее загружались воспроизводимые ресурсы и отображались иконки. Для видео YouTube используйте следующие подсказки preconnect:

Roboto в настоящее время используется в качестве шрифта в проигрывателе YouTube, так что вы, вероятно, также захотите предварительно подключиться к хосту шрифтов Google, если еще не сделали этого.

Эту же идею можно применить к другим видео-сервисам, например, Vimeo, где используется только два хоста: vimeo.com и vimeocdn.com.

Preconnect для производительности

Существует всего несколько примеров того, как можно использовать preconnect. Как видите, эти подсказки очень легко удаляют емкие циклы приема и обработки из путей запроса. Вы можете также применить их посредством HTTP-заголовков или вызвать их через JavaScript. Браузеры уже поддерживают их достаточно хорошо, а со временем будут поддерживать еще лучше (они поддерживаются в Chrome и Firefox, скоро будут поддерживаться в Safari и Edge). Впрочем, убедитесь, что вы используете их правильно. Предварительно размещайте их только для тех хостов, с которых абсолютно точно будут запрашиваться ресурсы. Кроме того, не забывайте, что это всего лишь «подсказки» для оптимизации, и они могут действовать не каждый раз. Если вы уже использовали preconnect для других целей и получили результат, напишите об этом в комментариях ниже!

Автор: Jeremy Frank

Источник: //www.viget.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: