Любопытное применение CSS-импортов в вебе
Эрвин Хофман подсвечивает большую проблему в современном вебе. По статистике Веб-Альманаха за 2024 год на 18.86% сайтов есть
Почему это проблема? Потому что
А вот был бы старый надёжный
В общем, если у вас есть в команде внутренние KPI на ускорение сайта, при этом в коде есть CSS-импорты — уберите их, с высокой вероятностью полезные метрики вырастут.
https://calendar.perfplanet.com/2024/the-curious-performance-case-of-css-import/
Эрвин Хофман подсвечивает большую проблему в современном вебе. По статистике Веб-Альманаха за 2024 год на 18.86% сайтов есть
@import в CSS. Причём на 15.16% это подключение чего-то стороннего. Чаще всего — веб-шрифтов, fonts.googleapis.com в статистике лидирует.Почему это проблема? Потому что
@import блокирует рендеринг. Браузер видит @import в CSS-коде, идёт качать новые стили, в это время много какие процессы уходят на перекур. И только после того, как новые стили скачаются, можно продолжить остальное важное для рендера страницы. В случае со сторонними доменами тратится ещё и неприличное время на DNS-резолвинг, рукопожатия лишние и прочее междоменное. Ну и заодно любезно сливаются данные о пользователе, которые можно достать из запроса даже к CSS-файлу.А вот был бы старый надёжный
<link rel="stylesheet" href="another.css">, таких проблем бы не было. У браузера есть так называемый preload scanner, который умеет для оптимизации скачивать ресурсы заранее. Ещё и приоритет ресурсу можно выставить повыше, если стили очень важные.В общем, если у вас есть в команде внутренние KPI на ускорение сайта, при этом в коде есть CSS-импорты — уберите их, с высокой вероятностью полезные метрики вырастут.
https://calendar.perfplanet.com/2024/the-curious-performance-case-of-css-import/