Splits je CSS op in @media-gerelateerde bestanden voor een aanzienlijke prestatieverbetering

Gecategoriseerd als Core Web Vitals, CSS, HTML, Web, Web Performance
Save and Share:

Wanneer CSS in één bestand wordt gebundeld, bevat het, zelfs na tree-shaking, nog steeds veel ongebruikte CSS vanwege verschillende @media contexten (mobiel, tablet, desktop, donkere/lichte/andere thema’s, enz.).

Het is slecht voor Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), evenals andere belangrijke prestatie- en bruikbaarheidsstatistieken: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI), en DOMContentLoaded event.

Er is een manier om het laden en renderen van CSS aanzienlijk te verbeteren door CSS op te splitsen in verschillende bestanden, waarbij elk bestand alleen de code bevat die nodig is in die context.

Splits je CSS op in verschillende bestanden:

📄main.css        - bevat CSS die nodig is voor alle @media condities
📄screen.css      - bevat CSS die alleen nodig is voor de screen @media conditie
📄print.css       - bevat CSS die alleen nodig is voor de print @media conditie
📂breakpoints
    📄x-small.css - bevat CSS die alleen nodig is voor het X-Small breakpoint
    📄sm.css      - bevat CSS die alleen nodig is voor het Small breakpoint
    📄md.css      - bevat CSS die alleen nodig is voor het Medium breakpoint
    📄lg.css      - bevat CSS die alleen nodig is voor het Large breakpoint
    📄xl.css      - bevat CSS die alleen nodig is voor het Extra large breakpoint
    📄xxl.css     - bevat CSS die alleen nodig is voor het Extra extra large breakpoint
📂themes
    📄light.css   - bevat CSS die alleen nodig is voor het lichte thema
    📄dark.css    - bevat CSS die alleen nodig is voor het donkere thema

Neem vervolgens CSS-bestanden op zoals dit:

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

Met deze aanpak prioriteren moderne browsers het laden van CSS voor de huidige @media condities, waardoor het renderen van de pagina veel sneller begint omdat gebruikers niet hoeven te wachten op het laden van het ongebruikte deel van de CSS.
In gevallen waarin je alle CSS in één bestand hebt gebundeld en geen condities specificeert in media-attributen van link tags, wacht de browser tot de volledige set CSS is geladen voordat het renderen van de pagina begint. Dit vertraagt het renderen van de pagina drastisch.

Breakpoints in dit voorbeeld zijn gebaseerd op Bootstrap 5. Deze aanpak wordt binnenkort nog belangrijker voor Bootstrap, gezien het feit dat ze ondersteuning voor lichte/donkere/andere thema’s zullen toevoegen.

Als je het web beter en sneller wilt maken, doe dan het volgende:

  • deel dit artikel,
  • stuur dit artikel naar de ontwikkelaars van de frameworks die je gebruikt,
  • implementeer deze CSS-scheiding op je sites.

Deel op social media of bewaar voor later:

Als je meer wilt lezen over deze optimalisatie en het gedrag van de browser, bekijk dan de volgende bronnen:

Geef een reactie

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *