Интересный кейс с HTTP/2 и preconnect к ресурсам с CDN.
В preconnect входит резолв DNS и установка TLS соединения, на один домен используется как правило один TCP сокет, и этот преконнект по сути переиспользуется для множества запросов за ресурсами.
Какое-то время назад заметил что на tinkoff.ru преконнекты к ресурсам с одного CDN происходят дважды - один сокет для тегов link и изображений, один для шрифтов и JS файлов.
Наконец-то раскопал проблему, для шрифтов и стилей у нас по дефолту проставляется атрибут
crossorigin="anonymous", и для них другие правила установки TLS соединения, поэтому браузер выделяет отдельный сокет.Из-за этого заметно позже начинается загрузка JS файлов, которую мы и так откладываем что бы была минимальная конкуренция за сеть с CSS файлами, которые критичны для рендеринга.
Почитать про это подробнее можно по ссылкам:
- https://groups.google.com/a/chromium.org/g/net-dev/c/1tBj5tEoL4g
- https://github.com/w3c/resource-hints/issues/32
- https://crenshaw.dev/preconnect-resource-hint-crossorigin-attribute/
Похоже что в нашем случае имеет смысл делать
crossorigin="anonymous" дефолтом и для стилей и для изображений, а вообще в идеале надо раздавать статику с основного домена - тогда отсутствуют расходы на preconnect кроме первого (за HTML) и нет проблем с CORS - кстати это реализовано на avito, ребята большие молодцы.