Подсказки ресурсов не должны использоваться слишком часто

Во-первых, как указано ниже, вы должны предпочесть preload. Если вы точно не знаете, какие ресурсы будут содержаться на вашей странице, dns-prefetch и preconnect могут подойти.

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

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

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

Илья Григорик, редактор этой спецификации, говорит

Тем не менее, используйте его с умом: каждый открытый сокет влечет за собой затраты как на клиенте, так и на сервере, и вы хотите избежать открытия сокетов, которые могут остаться неиспользованными. Как всегда, применяйте, измеряйте реальное влияние и повторяйте, чтобы получить максимальную отдачу от этой функции.

Серхио Гомес, также сотрудник Google, подпевает предупреждению Ильи, добавив немного конкретики. :

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

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

Сержио продолжает иллюстрировать пару примеров, где подходит preconnect, а не preload. Я настоятельно рекомендую посмотреть их.

Иван Акулов, бывший сотрудник Google и нынешний генеральный директор стартапа по веб-производительности, предлагает числовую рекомендацию:

Вы хотите ускорить более 4-6 доменов. Не рекомендуется использовать <link rel="preconnect" /> с более чем 4-6 доменами, так как открытие и поддержание соединения — затратная операция. <link rel="dns-prefetch" /> более легкий, поэтому используйте его для других сторонних доменов, если вы хотите ускорить их работу.

Но Иван, хотя и является авторитетным источником, не оказывает жесткой технической поддержки этой рекомендации.

Не читая исходный код для каждого соответствующего браузера, невозможно обоснованно сказать, сколько dns-prefetch/preconnects слишком много. Даже после прочтения исходного кода можно лишь подсказать, сколько из них подходит. Жесткого ограничения нет, но приведенные выше авторитетные источники дают нам повод для осторожности.

Но трудно понять, где провести черту

Есть только один способ улучшить производительность:

1. решите, какие показатели важны для вас и ваших пользователей
2. использовать наилучшие доступные синтетические и реальные пользовательские числа для измерения статус-кво
3. внести изменения и измерить разницу

Чтобы получить наилучшую возможную конфигурацию, потребуется несколько итераций. И оптимальный выбор подсказки может меняться со временем. С точки зрения ремонтопригодности было бы лучше агрессивно предварительно подключить все, что соответствует требованиям «пограничного случая» Сержио, и доверить браузеру выполнение своей работы. Но опять же, никогда без тестирования.

Еще пара заметок

Это много сторонних зависимостей для этой страницы. Я уверен, что вы работаете в соответствии со своими требованиями, но сейчас самое время попросить руководство пересмотреть необходимость некоторых из них.

Наконец, имейте в виду, что crossorigin подходит не для каждой подсказки ресурса. Это зависит от того, будут ли загружаемые ресурсы использовать CORS. Если вы не знаете, это может удвоить количество необходимых предварительных соединений.

Атрибут crossorigin при использовании с rel="preconnect" описывает не местонахождение целевого источника, а то, какие ресурсы будут загружены из этого источника. Если активы используют CORS, требуется crossorigin. Если CORS не будет использоваться, crossorigin следует опустить. Если будут присутствовать оба типа активов, необходимы две подсказки ресурсов.

Взгляните на этот список ресурсов, использующих CORS. для руководства.

Также помните об этой ошибке, если вам небезразличен Safari:

https://web.dev/preconnect-and-dns-prefetch/

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

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

Рекомендуется — для безопасного применения резервного метода используйте отдельные теги ссылок.

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

Не рекомендуется — реализация отката dns-prefetch в том же теге вызывает ошибку в Safari, из-за которой предварительное подключение отменяется.

В старых версиях Chrome существовало ограничение на шесть одновременных запросов DNS. Начиная с версии Chrome 26 для Windows, Mac и Linux, существует асинхронный преобразователь DNS, который фактически снял это ограничение (или, возможно, просто увеличил его):

"6 DNS-запросов больше не соответствуют действительности при использовании асинхронного резолвера DNS, но ваша точка зрения остается в силе.. мы ограничиваем количество резолвов во время передачи", — Илья Григорик, веб-инженер по производительности в Google (через Twitter)

Я новичок и пока не могу добавить комментарий, поэтому вместо этого добавляю ответ.

Судя по моим собственным тестам, Chrome имеет TTL 1000 в кэше DNS Это может быть причиной того, что при открытии "слишком рано" "dns-prefetch preconnect" соединение на самом деле может оказать негативное влияние на желаемую производительность.

Вы также можете проверить подсказки ресурсов preconnect vs dns-prefetch

«TTL» — это аббревиатура от Time To Live.