Wenn CSS in einer einzigen Datei gebündelt wird, enthält es selbst nach Tree-Shaking immer noch viel ungenutztes CSS, da es verschiedene @media-Kontexte gibt (Mobilgeräte, Tablets, Desktop-Computer, Dark/Light/andere Designs usw.).
Das ist schlecht für die Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) sowie andere wichtige Performance- und Usability-Metriken: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) und das DOMContentLoaded-Event.
Es gibt eine Möglichkeit, das Laden und Rendern von CSS erheblich zu verbessern, indem man CSS in verschiedene Dateien aufteilt, wobei jede Datei nur den Code enthält, der in diesem jeweiligen Kontext benötigt wird.
Trennen Sie Ihr CSS in verschiedene Dateien auf:
📄main.css - enthält CSS, das für alle @media-Bedingungen benötigt wird
📄screen.css - enthält CSS, das nur für die @media-Bedingung "screen" benötigt wird
📄print.css - enthält CSS, das nur für die @media-Bedingung "print" benötigt wird
📂breakpoints
📄x-small.css - enthält CSS, das nur für den X-Small-Breakpoint benötigt wird
📄sm.css - enthält CSS, das nur für den Small-Breakpoint benötigt wird
📄md.css - enthält CSS, das nur für den Medium-Breakpoint benötigt wird
📄lg.css - enthält CSS, das nur für den Large-Breakpoint benötigt wird
📄xl.css - enthält CSS, das nur für den Extra-Large-Breakpoint benötigt wird
📄xxl.css - enthält CSS, das nur für den Extra-Extra-Large-Breakpoint benötigt wird
📂themes
📄light.css - enthält CSS, das nur für das helle Theme benötigt wird
📄dark.css - enthält CSS, das nur für das dunkle Theme benötigt wirdBinden Sie CSS-Dateien dann wie folgt ein:
<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)">Mit diesem Ansatz priorisieren moderne Browser das CSS-Laden für die aktuellen @media-Bedingungen, sodass das Seitenrendering viel schneller startet, da Benutzer nicht auf das Laden des ungenutzten Teils des CSS warten müssen.
In Fällen, in denen Sie das gesamte CSS in einer einzigen Datei gebündelt haben und keine Bedingungen in den Media-Attributen von link-Tags angeben, wartet der Browser, bis das gesamte CSS-Set geladen ist, bevor er mit dem Seitenrendering beginnt. Dies verlangsamt das Seitenrendering drastisch.
Breakpoints in diesem Beispiel basieren auf Bootstrap 5. Dieser Ansatz wird in Zukunft noch wichtiger für Bootstrap, da sie die Unterstützung für helle/dunkle/andere Designs hinzufügen werden.
Wenn Sie das Web besser und schneller machen möchten, bitte:
- teilen Sie diesen Artikel,
- senden Sie diesen Artikel an die Entwickler der Frameworks, die Sie verwenden,
- implementieren Sie diese CSS-Aufteilung auf Ihren Websites.
In sozialen Medien teilen oder für später speichern:
Wenn Sie mehr über diese Optimierung und das Browserverhalten lesen möchten, beachten Sie bitte Folgendes:
- Den Artikel „Conditionally adaptive CSS. Browser behavior that might improve your performance“ von Vadim Makeev. Der Titelscreenshot für diesen Artikel stammt aus seinem hervorragenden Artikel, in dem er weitere Screenshots und Experimente hat.
- MDN Web Docs: CSS performance optimization.