Разделите свой CSS на файлы, связанные с @media, чтобы значительно улучшить производительность

Сохранить и поделиться:

Даже после 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, так как они планируют добавить поддержку светлых, темных и других тем.

Если вы хотите сделать веб лучше и быстрее, пожалуйста: