Rozdeľte svoj CSS do súborov súvisiacich s @media, aby ste výrazne zlepšili výkon

Keď je CSS zbalené do jedného súboru, aj po tree-shakingu stále obsahuje veľa nepoužitého CSS kvôli rôznym kontextom @media (mobil, tablet, desktop, tmavé/svetlé/iné témy, atď.).

Je to zlé pre Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), ako aj pre ďalšie dôležité metriky výkonu a použiteľnosti: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) a udalosť DOMContentLoaded.

Existuje spôsob, ako výrazne zlepšiť načítavanie a vykresľovanie CSS rozdelením CSS do rôznych súborov, kde každý súbor obsahuje iba kód potrebný v danom kontexte.

Rozdeľte svoj CSS do rôznych súborov:

📄main.css        - obsahuje CSS potrebný pre všetky @media podmienky
📄screen.css      - obsahuje CSS potrebný iba pre @media podmienku obrazovky
📄print.css       - obsahuje CSS potrebný iba pre @media podmienku tlače
📂breakpoints
    📄x-small.css - obsahuje CSS potrebný iba pre breakpoint X-Small
    📄sm.css      - obsahuje CSS potrebný iba pre breakpoint Small
    📄md.css      - obsahuje CSS potrebný iba pre breakpoint Medium
    📄lg.css      - obsahuje CSS potrebný iba pre breakpoint Large
    📄xl.css      - obsahuje CSS potrebný iba pre breakpoint Extra large
    📄xxl.css     - obsahuje CSS potrebný iba pre breakpoint Extra extra large
📂themes
    📄light.css   - obsahuje CSS potrebný iba pre svetlú tému
    📄dark.css    - obsahuje CSS potrebný iba pre tmavú tému

Potom zahrňte CSS súbory takto:

<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)">

S týmto prístupom moderné prehliadače uprednostňujú načítavanie CSS pre aktuálne @media podmienky, takže vykresľovanie stránky začína oveľa rýchlejšie, pretože používatelia nemusia čakať na načítanie nepoužitej časti CSS.
V prípadoch, keď máte všetok CSS zbalený v jednom súbore a neurčíte podmienky v atribútoch media značiek link, prehliadač čaká na načítanie celej sady CSS pred spustením vykresľovania stránky. Čo drasticky spomaľuje vykresľovanie stránky.

Breakpointy v tomto príklade sú založené na Bootstrap 5. Tento prístup bude pre Bootstrap čoskoro ešte dôležitejší vzhľadom na to, že pridajú podporu svetlých/tmavých/iných tém.

Ak chcete, aby bol web lepší a rýchlejší, prosím:

• zdieľajte tento článok,
• pošlite tento článok vývojárom frameworkov, ktoré používate,
• implementujte toto oddelenie CSS na svojich stránkach.

📃 Click here to copy the link to the clipboard.

Share on social media or save for later:

Ak sa chcete dozvedieť viac o tejto optimalizácii a správaní prehliadača, pozrite si nasledujúce:

• Článok „Conditionally adaptive CSS. Browser behavior that might improve your performance“ od Vadima Makeeva. Úvodná snímka obrazovky pre tento článok je prevzatá z jeho vynikajúceho článku, kde má viac snímok obrazovky a experimentov.
• MDN Web Docs: Optimalizácia výkonu CSS.