Opdel dit CSS i @media-relaterede filer for at forbedre ydeevnen betydeligt

Kategoriseret som Core Web Vitals, CSS, HTML, Web, Web Performance
Save and Share:

Selvom CSS er samlet i én fil, indeholder den stadig en masse ubrugt CSS på grund af de forskellige @media-kontekster (mobil, tablet, desktop, mørkt/lyst/andre temaer osv.), selv efter tree-shaking.

Det er skidt for Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), og også andre vigtige målinger for ydeevne og brugervenlighed: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) og DOMContentLoaded event.

Der findes en metode til at forbedre indlæsning og rendering af CSS markant ved at opdele CSS i forskellige filer, hvor hver fil kun indeholder den kode, der er nødvendig i den pågældende kontekst.

Opdel dit CSS i forskellige filer:

📄main.css        - indeholder CSS, der er nødvendig for alle @media-betingelser
📄screen.css      - indeholder CSS, der kun er nødvendig for @media-betingelsen screen
📄print.css       - indeholder CSS, der kun er nødvendig for @media-betingelsen print
📂breakpoints
    📄x-small.css - indeholder CSS, der kun er nødvendig for X-Small breakpoint
    📄sm.css      - indeholder CSS, der kun er nødvendig for Small breakpoint
    📄md.css      - indeholder CSS, der kun er nødvendig for Medium breakpoint
    📄lg.css      - indeholder CSS, der kun er nødvendig for Large breakpoint
    📄xl.css      - indeholder CSS, der kun er nødvendig for Extra large breakpoint
    📄xxl.css     - indeholder CSS, der kun er nødvendig for Extra extra large breakpoint
📂themes
    📄light.css   - indeholder CSS, der kun er nødvendig for lyst tema
    📄dark.css    - indeholder CSS, der kun er nødvendig for mørkt tema

Inkludér så CSS-filerne på denne måde:

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

Ved at bruge denne metode prioriterer moderne browsere indlæsning af CSS for de gældende @media-betingelser. Det betyder, at side-rendering starter meget hurtigere, da brugerne ikke skal vente på, at den unødvendige del af CSS’en indlæses.
Hvis al CSS er samlet i én fil, og du ikke angiver betingelser i media-attributterne på dine link-tags, vil browseren vente på, at hele CSS-sættet er indlæst, før rendering af siden starter. Dette gør side-rendering betydeligt langsommere.

Breakpunkterne i dette eksempel er baseret på Bootstrap 5. Denne tilgang bliver endnu vigtigere for Bootstrap fremover, især når de tilføjer understøttelse af lyst/mørkt tema og andre temaer.

Hvis du vil gøre internettet bedre og hurtigere, så gør venligst følgende:

  • del denne artikel,
  • send artiklen videre til udviklerne af de frameworks, du bruger,
  • implementér denne CSS-opdeling på dine egne sider.

Del på sociale medier eller gem til senere:

Hvis du vil læse mere om denne optimering og browserens adfærd, kan du læse mere her:

Skriv kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *