Каждый <script src> и <link rel="stylesheet"> — отдельный запрос к серверу. Даже при быстром соединении на каждый уходит время: поиск домена, соединение, ожидание, загрузка.
Ориентир — не больше 25 подключений стилей и скриптов на страницу.
Почему это тормозит
CSS блокирует отрисовку. Браузер не покажет ничего, пока не загрузит и не разберёт все стили: он не знает, как всё будет выглядеть. Десять CSS-файлов — десять последовательных препятствий перед первым пикселем на экране.
Обычный <script> блокирует разбор HTML. Встретив его, браузер останавливает разбор страницы, качает и выполняет скрипт, и только потом продолжает.
Сторонние домены дороже своих. Каждый новый домен (счётчики, шрифты, виджеты, чаты) требует отдельного DNS-запроса и TLS-рукопожатия — 100–300 мс сверху на каждый.
Что делать
1. Объединить и минифицировать. Сборщик (Vite, Webpack, esbuild) собирает десятки файлов в один-два и вырезает лишнее. Для сайта на CMS ту же работу делают модули оптимизации.
2. Не блокировать разбор скриптами:
<script src="/js/app.js" defer></script> <!-- выполнится после разбора HTML, порядок сохранится -->
<script src="/js/metrika.js" async></script> <!-- выполнится, как только загрузится -->
defer — для собственных скриптов, зависящих друг от друга; async — для независимых счётчиков и виджетов.
3. Критический CSS — в документ, остальное — отложить. Стили первого экрана встраиваются прямо в HTML, полный файл подгружается следом. Приём даёт заметный выигрыш, но усложняет сборку — берите его, когда простое уже сделано.
4. Ревизия сторонних скриптов. На среднем сайте живут два счётчика, из которых смотрят один; чат, которым не пользуются; виджет отзывов, поставленный три года назад. Каждый тянет свои файлы. Уберите то, чем не пользуетесь, — это самая дешёвая оптимизация из всех.
5. Шрифты — со своего домена, в формате woff2, с font-display: swap, чтобы текст был виден до загрузки шрифта.
6. Подсказки браузеру для критичных внешних доменов:
<link rel="preconnect" href="https://mc.yandex.ru">
Важная оговорка про HTTP/2
По HTTP/2 файлы качаются параллельно по одному соединению, и цена лишнего запроса сильно ниже, чем была. Правило «склеивай всё в один файл» из эпохи HTTP/1.1 больше не абсолютно: несколько файлов среднего размера могут работать лучше одного огромного, потому что кэшируются по отдельности — поправили один скрипт, остальные остались в кэше браузера.
Но объединение десятков мелких файлов в несколько крупных всё равно выгодно, а «тридцать подключений» остаются проблемой при любом протоколе.
Как проверить
- Пункт аудита «Количество ресурсов в HTML» — считает
<script>и подключённые стили. F12→ Network → внизу панели: общее число запросов и переданный объём. Фильтры JS и CSS покажут разбивку.- PageSpeed Insights укажет конкретные ресурсы, блокирующие отрисовку.