Ресурсные подсказки не следует использовать чрезмерно
Во-первых, как упоминалось ниже, вы должны предпочесть preload.Если вы точно не знаете, какие ресурсы будет включать ваша страница, то могут подойти dns-prefetch и preconnect.
Спецификация подсказки ресурса указывает , чтооптимальное количество соединений весьма условно:
Оптимальное количество соединений на источник зависит от согласованного протокола, текущего профиля подключения пользователя, доступных ресурсов устройства, глобальных ограничений подключения и других переменных, зависящих от контекста,В результате решение о том, сколько соединений следует открыть, откладывается агенту пользователя.
И dns-prefetch, и preconnect указывают, что пользовательский агент "должен" инициировать процесс, что означаетони не должны этого делать.
Илья Григорик, редактор этой спецификации, говорит
Тем не менее, используйте это с умом: каждый открытый сокетнесет расходы как на клиенте, так и на сервере, и вы хотите избежать открытия сокетов, которые могут остаться неиспользованными.Как всегда, применяйте, измеряйте реальное воздействие и итерируйте, чтобы получить максимальную отдачу от этой функции.
Сержио Гомес, также Googler, echos Предупреждение Ильи снемного больше специфичности:
Имейте в виду, что хотя <link rel="preconnect"> довольно дешево, оно все же может занимать ценное время ЦП, особенно для защищенных соединений.Это особенно плохо, если соединение не используется в течение 10 секунд, так как браузер закрывает его, тратя впустую всю эту раннюю работу соединения.
В общем, старайтесь использовать <link rel="preload"> везде, где можете, так как этоболее всеобъемлющую настройку производительности, но держите <link rel="preconnect"> в своем инструментальном поясе для крайних случаев.
Сержио продолжает иллюстрировать пару примеров, где preconnect, а не preload, подходит.Я настоятельно рекомендую взглянуть на них .
Иван Акулов , бывший Googler и нынешний генеральный директор стартап-производительности в сети, рискует дать численную рекомендацию :
Вы хотите ускорить более 4-6 доменов.Не рекомендуется использовать <link rel="preconnect" /> с более чем 4-6 доменами, так как открытие и поддержание соединения является дорогостоящей операцией.<link rel="dns-prefetch" /> более легкий, поэтому используйте его для других сторонних доменов, если вы тоже хотите ускорить их.
Но Иван, хотя и является авторитетным источником, не предоставляет жесткой технической поддержки дляэта рекомендация.
Без чтения исходного кода для каждого соответствующего браузера невозможно обоснованно сказать, сколько dns-prefetch / preconnects слишком много.Даже после прочтения исходного кода, он может только дать подсказку о том, сколько из них подходит.Жестких ограничений нет, но приведенные выше авторитетные источники дают нам основания для осторожности.
Но трудно понять, где провести черту
Есть только один способ улучшить производительность:
- решите, какие показатели важны для вас и ваших пользователей
- используйте лучшие из доступных синтетических и реальных чисел для измерения статус-кво
- внесите изменения и измерьте разницу
Потребовалось бы несколько итераций, чтобы получить наилучшую возможную конфигурацию.И оптимальный выбор подсказок может меняться со временем.С точки зрения ремонтопригодности было бы лучше агрессивно предварительно подключить все, что соответствует требованиям «крайнего случая» Сержио, и доверить браузеру свою работу.Но опять же, никогда без тестирования.
Пара других заметок
Это много сторонних зависимостей для этой страницы.Я уверен, что вы работаете в соответствии с вашими требованиями, но сейчас самое время попросить руководство пересмотреть необходимость некоторых из них.
FinПримите во внимание, что crossorigin подходит не для каждой подсказки ресурса . Это зависит от того, будет ли загружаемый ресурс (ы) использовать CORS. Если вы не знаете, это может удвоить количество необходимых предварительных соединений.
Атрибут crossorigin при использовании с rel="preconnect" не
опишите, где находится целевое происхождение, а какие активы
будет загружен из этого источника. Если активы используют CORS,
crossorigin необходимо. Если CORS не будет использоваться, crossorigin должно быть
опущено. Если оба типа активов будут присутствовать, два ресурса подсказки
необходимы.
Взгляните на этот список ресурсов, которые используют CORS для руководства.