В разделе «Возможности» отчета Lighthouse перечислены все ключевые запросы, которые еще не имеют приоритета над запросами на выборку с помощью <link rel=preconnect> :
Совместимость с браузерами
<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" />.
Руководство по конкретному стеку
Друпал
Подсказки ресурсов Preconnect или dns-prefetch можно добавить, установив и настроив модуль , который предоставляет возможности для подсказок ресурсов пользовательского агента.
Магенто
Измените макет вашей темы и добавьте подсказки о ресурсах предварительного подключения или предварительной выборки DNS.