Splitt CSS-en din i @media-relaterte filer for å forbedre ytelsen betydelig

Når CSS buntes sammen i én fil, selv etter «tree-shaking», inneholder den fortsatt mye ubrukt CSS på grunn av ulike @media-kontekster (mobil, nettbrett, datamaskin, mørkt/lyst/andre temaer osv.).

Det er dårlig for Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), samt andre viktige ytelses- og brukervennlighetsmålinger: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) og DOMContentLoaded-hendelsen.

Det finnes en måte å forbedre CSS-lasting og -rendering betydelig på ved å dele CSS-en opp i forskjellige filer, der hver fil kun inneholder kode som er nødvendig i den konteksten.

Del opp CSS-en din i forskjellige filer:

📄main.css        - inneholder CSS som trengs for alle @media-forhold
📄screen.css      - inneholder CSS som kun trengs for @media-forhold «screen»
📄print.css       - inneholder CSS som kun trengs for @media-forhold «print»
📂breakpoints
    📄x-small.css - inneholder CSS som kun trengs for X-Small breakpoint
    📄sm.css      - inneholder CSS som kun trengs for Small breakpoint
    📄md.css      - inneholder CSS som kun trengs for Medium breakpoint
    📄lg.css      - inneholder CSS som kun trengs for Large breakpoint
    📄xl.css     - inneholder CSS som kun trengs for Extra large breakpoint
    📄xxl.css     - inneholder CSS som kun trengs for Extra extra large breakpoint
📂themes
    📄light.css   - inneholder CSS som kun trengs for lyst tema
    📄dark.css    - inneholder CSS som kun trengs for mørkt tema

Deretter inkluderer du CSS-filene slik:

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

Med denne tilnærmingen prioriterer moderne nettlesere CSS-lasting for de gjeldende @media-forholdene, slik at side-rendering starter mye raskere fordi brukerne ikke trenger å vente på lasting av den ubrukte delen av CSS-en.
I tilfeller der du har all CSS-en buntet i én fil og ikke spesifiserer betingelser i media-attributter for link-tagger, venter nettleseren på at hele settet med CSS lastes inn før side-rendering starter. Dette sakker ned side-renderingen drastisk.

Breakpoints i dette eksemplet er basert på Bootstrap 5. Denne tilnærmingen vil bli enda viktigere for Bootstrap snart, gitt at de vil legge til støtte for lyse/mørke/andre temaer.

Hvis du ønsker å gjøre nettet bedre og raskere, vennligst:

• del denne artikkelen,
• send denne artikkelen til utviklerne av rammeverkene du bruker,
• implementer denne CSS-oppdelingen på nettstedene dine.

📃 Klikk her for å kopiere lenken til utklippstavlen.

Del på sosiale medier eller lagre til senere:

Hvis du vil lese mer om denne optimaliseringen og nettleserens oppførsel, vennligst se følgende:

• Artikkelen «Conditionally adaptive CSS. Browser behavior that might improve your performance» av Vadim Makeev. Skjermbildet på forsiden for denne artikkelen er hentet fra hans utmerkede artikkel, der han har flere skjermbilder og eksperimenter.
• MDN Web Docs: CSS performance optimization.