В разделе «Возможности» вашего отчета 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.