Значительное увеличение производительности благодаря разделению CSS на файлы по @media условиям

В рубрике Core Web Vitals, CSS, HTML, Web технологии, Производительность Web
screenshot from d
Сохранить и поделиться:

Когда CSS собирается в один файл, даже после удаления неиспользуемых частей кода (tree-shaking), он все равно содержит много неиспользуемого кода из-за различных контекстов @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, необходимый только для условия @media screen
📄print.css       - содержит CSS, необходимый только для условия @media print
📂breakpoints
    📄x-small.css - содержит CSS, необходимый только для маленького разрешения экрана
    📄sm.css      - содержит CSS, необходимый только для небольшого разрешения экрана
    📄md.css      - содержит CSS, необходимый только для среднего разрешения экрана
    📄lg.css      - содержит CSS, необходимый только для большого разрешения экрана
    📄xl.css      - содержит CSS, необходимый только для очень большого разрешения экрана
    📄xxl.css     - содержит CSS, необходимый только для экстра-большого разрешения экрана
📂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 на своих сайтах.

Поделитесь в соцсетях или сохраните на будущее:

Если вы хотите узнать больше об этой оптимизации и поведении браузера, пожалуйста, обратитесь к следующим материалам:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *