När CSS paketeras i en enda fil, även efter ”tree-shaking”, innehåller den fortfarande mycket oanvänd CSS på grund av olika @media-kontexter (mobil, surfplatta, dator, mörka/ljusa/andra teman, etc.).
Det är dåligt för Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), samt andra viktiga prestanda- och användbarhetsmått: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) och DOMContentLoaded-händelsen.
Det finns ett sätt att avsevärt förbättra CSS-laddning och rendering genom att separera CSS i olika filer, där varje fil endast innehåller kod som behövs i den kontexten.
Separera din CSS i olika filer:
📄main.css - innehåller CSS som behövs för alla @media-villkor
📄screen.css - innehåller CSS som endast behövs för @media-villkoret screen
📄print.css - innehåller CSS som endast behövs för @media-villkoret print
📂breakpoints
📄x-small.css - innehåller CSS som endast behövs för X-Small breakpoint
📄sm.css - innehåller CSS som endast behövs för Small breakpoint
📄md.css - innehåller CSS som endast behövs för Medium breakpoint
📄lg.css - innehåller CSS som endast behövs för Large breakpoint
📄xl.css - innehåller CSS som endast behövs för Extra large breakpoint
📄xxl.css - innehåller CSS som endast behövs för Extra extra large breakpoint
📂themes
📄light.css - innehåller CSS som endast behövs för ljust tema
📄dark.css - innehåller CSS som endast behövs för mörkt temaInkludera sedan CSS-filer så här:
<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 denna metod prioriterar moderna webbläsare CSS-laddning för de aktuella @media-villkoren, så sidrendereringen startar mycket snabbare eftersom användarna inte behöver vänta på att den oanvända delen av CSS:en ska laddas.
I fall där du har all CSS paketerad i en enda fil och inte anger villkor i media-attributen för link-taggar, väntar webbläsaren på att hela CSS-uppsättningen ska laddas innan sidrendereringen startar. Vilket drastiskt saktar ner sidrendereringen.
Breakpoints i detta exempel är baserade på Bootstrap 5. Denna metod kommer att bli ännu viktigare för Bootstrap snart med tanke på att de kommer att lägga till stöd för ljusa/mörka/andra teman.
Om du vill göra webben bättre och snabbare, vänligen:
- dela denna artikel,
- skicka denna artikel till utvecklarna av de ramverk du använder,
- implementera denna CSS-separation på dina webbplatser.
Dela på sociala medier eller spara för senare:
Om du vill läsa mer om denna optimering och webbläsarens beteende, se följande:
- Artikeln ”Conditionally adaptive CSS. Browser behavior that might improve your performance” av Vadim Makeev. Skärmdumpen för denna artikel är tagen från hans utmärkta artikel, där han har fler skärmdumpar och experiment.
- MDN Web Docs: CSS performance optimization.