Используйте предварительное подключение к необходимым доменам

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

В разделе Opportunities (Возможности) отчета Lighthouse перечислены все ключевые запросы, для которых еще не установлен приоритет запросов на выборку с помощью <link rel=preconnect>:

Скриншот проверки Preconnect to required origins (Используйте предварительное подключение к необходимым доменам) в Lighthouse

Совместимость с браузерами

<link rel=preconnect> поддерживается большинством браузеров. См. совместимость с браузерами.

Увеличьте скорость загрузки страницы с помощью предварительного подключения

Подумайте о добавлении ресурсных подсказок preconnect или dns-prefetch, чтобы установить предварительные подключения к важным сторонним источникам.

<link rel="preconnect"> сообщает браузеру, что страница намеревается создать подключение к другому источнику и что нужно начать этот процесс как можно скорее.

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

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

Проинформировать браузер о своем намерении так же просто, как добавить тег ссылки на свою страницу:

<link rel="preconnect" href="https://example.com">

Таким образом вы сообщаете браузеру, что страница намерена подключиться к example.com и получить оттуда содержимое.

Имейте в виду, что, хотя <link rel="preconnect"> довольно дешев, он всё же может отнимать драгоценное время процессора, особенно при защищенных соединениях. Это особенно плохо, если соединение не используется в течение 10 секунд, поскольку браузер закрывает его, зря выполняя всю эту работу по предварительному подключению.

В общем, попробуйте использовать <link rel="preload">, так как это более комплексная настройка производительности, но держите <link rel="preconnect"> в своем арсенале для крайних случаев, например:

<link rel="dns-prefetch"> — еще один тип <link>, связанный с подключениями. Он обрабатывает только поиск DNS, но более широко поддерживается браузерами, поэтому может служить хорошим запасным вариантом. Применяется он точно так же:

<link rel="dns-prefetch" href="https://example.com">.

Рекомендации по стекам

Drupal

Используйте модуль, который поддерживает ресурсные подсказки пользовательского агента, чтобы вы могли устанавливать и настраивать ресурсные подсказки preconnect или dns-prefetch.

Magento

Измените макет ваших тем и добавьте ресурсные подсказки preconnect или dns-prefetch.

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.