Корректная конфигурация для preconnect
В HTML можно добавлять различные подсказки браузеру, чтобы помогать ему доставлять ресурсы пользователю более эффективно. Одной из таких подсказок является следующая строчка:
Здесь мы говорим браузеру, что скоро нам понадобится открытое соединение с доменом гуглошрифтов, просим его прогреть DNS и поднять соединение ещё до того, как мы на самом деле запросим нужный ресурс на этом домене.
Гарри Робертс разбирает пример, когда неправильная настройка таких подсказок только вредит. На сайте BBC находит 4 такие подсказки, которые не работают, и объясняет, почему. Рекомендую прочитать вдумчиво, в статье нужно смотреть в графики. Но несколько коротких советов можно выделить:
1.
2. Домены в
3. Атрибут
4. Если на одном и том же домене нужны ресурсы и с CORS, и без, то нужно прописать два отдельных
5. При переносе статики на другие домены-поддомены не забывайте про
https://csswizardry.com/2023/12/correctly-configure-preconnections/
В HTML можно добавлять различные подсказки браузеру, чтобы помогать ему доставлять ресурсы пользователю более эффективно. Одной из таких подсказок является следующая строчка:
<link rel=preconnect href=https://fonts.googleapis.com>
Здесь мы говорим браузеру, что скоро нам понадобится открытое соединение с доменом гуглошрифтов, просим его прогреть DNS и поднять соединение ещё до того, как мы на самом деле запросим нужный ресурс на этом домене.
Гарри Робертс разбирает пример, когда неправильная настройка таких подсказок только вредит. На сайте BBC находит 4 такие подсказки, которые не работают, и объясняет, почему. Рекомендую прочитать вдумчиво, в статье нужно смотреть в графики. Но несколько коротких советов можно выделить:
1.
preconnect к ресурсам, которые на самом деле не нужны в первые 5 секунд загрузки приложения, вредят. Chrome держит соединение всего 10 секунд, при этом количество соединений ограничено.2. Домены в
href нужно писать с протоколом. Если https, то https://. Незачем давать браузеру думать, искать редиректы и применять эвристики.3. Атрибут
crossorigin может быть не нужен. Проверить можно в DevTools, подсмотреть у запроса за ресурсом заголовок Sec-Fetch-Mode. Если там стоит значение cors, то тогда атрибут crossorigin можно и добавить.4. Если на одном и том же домене нужны ресурсы и с CORS, и без, то нужно прописать два отдельных
<link rel=preconnect>, один с crossorigin, второй без. Этот атрибут влияет на куки, то есть заголовки запроса, поэтому по сути получается два разных запроса.5. При переносе статики на другие домены-поддомены не забывайте про
<link rel=preconnect>. Скорее всего у вас есть какая-нибудь функция-хелпер, в которую редко смотрят, потому есть вероятность просыпать домены при рефакторинге. Выносите домены в общий конфиг либо собирайте самое нужное непосредственно при сборке приложения, помечая как-то критические ресурсы в исходном коде по месту их загрузки.https://csswizardry.com/2023/12/correctly-configure-preconnections/