Wichtigste Erkenntnisse
Wichtige CSS-Techniken, die das sofortige Laden von „above-the-fold“-Inhalten ermöglichen. Stellen Sie Ihren Benutzern innerhalb von Millisekunden sichtbare Inhalte bereit.
Was ist kritisches CSS?
Kritisches CSS ist die Bestimmung der CSS-Regeln, die für den ersten Bereich einer Webseite erforderlich sind, den der Benutzer sieht, wenn er die Seite öffnet, genannt above-the-fold und inline in HTML dargestellt wird. Diese Technik ermöglicht es dem Browser, die Seite zu malen, ohne auf externe CSS-Dateien warten zu müssen.
Lösung des Render-Blocking-Problems
Browser warten standardmäßig mit dem Malen der Seite, bis alle CSS-Dateien heruntergeladen wurden. Dies führt insbesondere bei Projekten mit großen CSS-Dateien zu erheblichen Verzögerungen. Wir beseitigen dieses Warten mit der kritischen CSS-Technik:
- Bestimmen Sie die CSS-Regeln, die für den oberen Rand der Seite erforderlich sind.
- Fügen Sie diese Regeln inline im
-Teil des HTML hinzu. - Laden Sie die Haupt-CSS-Datei asynchron mit
media="print" onload="this.media='all'".
Tools
Tools wie
Critical (npm-Paket), Penthouse und PurgeCSS helfen Ihnen, diesen Prozess zu automatisieren. Sie können es in Ihre Laravel Mix- oder Vite-Pipeline integrieren.
Gewinne
- 40–60 % Reduzierung der First Contentful Paint (FCP)-Zeit.
- Der Benutzer spürt sofort, dass die Website geladen wird.
- 10–20 Punkte Steigerung der Lighthouse-Leistungswerte.
Performance & Meta Ads
Schluss mit Budgetverlusten dank Server-CAPI und messbarem ROAS-Wachstum
