Разделете CSS-а си на файлове, свързани с @media заявки, за значително подобряване на производителността

Save and Share:

Когато CSS е обединен в един файл, дори след 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-а на различни файлове, където всеки файл съдържа само кода, необходим за съответния контекст.

Разделете 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 скоро, като се има предвид, че те ще добавят поддръжка на светли/тъмни/други теми.

Ако искате да направите уеб по-добър и по-бърз, моля: