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

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

От автора: с помощью подсказок 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.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree