Даже после tree-shaking, единый CSS-файл все равно содержит много неиспользуемого кода из-за разных @media контекстов (мобильные, планшеты, десктопы, темная/светлая/другие темы и т.д.).
Это плохо для Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), а также для других важных показателей производительности и удобства использования: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) и события DOMContentLoaded.
Существует способ значительно улучшить загрузку и рендеринг CSS, разделив его на отдельные файлы, каждый из которых содержит код только для своего контекста.
Разделите свой CSS на разные файлы:
📄main.css - содержит CSS, необходимый для всех @media условий
📄screen.css - содержит CSS, необходимый только для screen @media условия
📄print.css - содержит CSS, необходимый только для print @media условия
📂breakpoints
📄x-small.css - содержит CSS, необходимый только для X-Small брейкпоинта
📄sm.css - содержит CSS, необходимый только для Small брейкпоинта
📄md.css - содержит CSS, необходимый только для Medium брейкпоинта
📄lg.css - содержит CSS, необходимый только для Large брейкпоинта
📄xl.css - содержит CSS, необходимый только для Extra large брейкпоинта
📄xxl.css - содержит CSS, необходимый только для Extra extra large брейкпоинта
📂themes
📄light.css - содержит CSS, необходимый только для светлой темы
📄dark.css - содержит CSS, необходимый только для темной темы
Затем, подключайте CSS файлы следующим образом:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
При таком подходе современные браузеры приоритизируют загрузку CSS для текущих @media условий, что значительно ускоряет рендеринг страницы, так как пользователю не нужно ждать загрузки ненужного CSS.
В случаях, когда у вас весь CSS собран в одном файле и вы не указываете условия в media атрибутах тегов link
, браузер ждет загрузки всего набора CSS перед началом рендеринга страницы. Что значительно замедляет рендеринг страницы.
Точки останова в этом примере взяты из Bootstrap 5. Этот подход скоро станет еще важнее для Bootstrap, так как они планируют добавить поддержку светлых, темных и других тем.
Если вы хотите сделать веб лучше и быстрее, пожалуйста:
- поделитесь этой статьей,
- отправьте эту статью разработчикам фреймворков, которые вы используете,
- внедрите это разделение CSS на своих сайтах.
Поделитесь в социальных сетях или сохраните на потом:
Если вы хотите узнать больше об этой оптимизации и поведении браузера, пожалуйста, ознакомьтесь со следующими материалами:
- Статья «Условно адаптивный CSS. Поведение браузера, которое может улучшить вашу производительность» от Вадима Макеева. Обложка для этой статьи взята из его замечательной статьи, где у него больше скриншотов и экспериментов.
- MDN Web Docs: Оптимизация производительности CSS.