Critical CSS: kritische Styles in Above the Fold herausfinden und im head lade
Kritisches CSS above the fold finden: critical path css
Aber auch für die Besucher mit langsamer Internetleitung (siehe mobile Smartphones) ist eine schnelle Webseite wichtig.
In diesem Tutorial geht es um den kritischen CSS-Teil, welcher in Above the Fold geladen wird, was das Rendering blockiert.
Ein Tool zum aufspüren von critical above the fold Code, wird ebenfalls vorgestellt.
Was ist Above the Fold?
Das ist der sichtbare Teil im Browserfenster, der für die Nutzer als erstes (ohne scrollen) sichtbar ist. Dieser Teil sollte schnell geladen werden. Dies erreicht man unter anderem mit above the fold css - auslagern kritischer CSS Stylings, die direkt am Seitenanfang benötigt werden.Der sichtbare Teil:
Je nach Auflösung des Bildschirms und auch des Browserfenster, ist der sichtbare Teil natürlich immer etwas anders. Bei Smartphones ist dieser Ausschnitt meist kleiner - gerade wenn eine richtige Skalierung mittels viewport (im HTML head) gesetzt wurde. Ebenfalls ändert sich dieser sichtbare Seitenbereich oftmal beim horizontalen ankippen des Smartphones.
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
Zum sichtbaren Teil könnte folgendes gehören:
- Header und Logo
- Obere primäre Navigation
- Layout-Struktur
- body-Angabe in CSS
- Navigationen über dem Content
- Die Ãœberschrift H1
- Vorschau für Artikel (in einer Kategorie)
Und das ist critical CSS:
Die oben genannten Seitenbereiche besitzen CSS-Angaben. Diese sind zum laden in Above the Fold wichtig.
Ebenfalls die Angaben @media für die Media Queries und @import für bspw. Schriftarten können wichtig sein, solang diese im sichtbaren Teil benötigt werden.
Das gehört nicht zu critical CSS:
Hover-Effekte oder Animationen werden erst bei Interaktion durch den Besucher benötigt. Diese sollte man - meiner Meinung nach - nicht im HTML head laden.
Above the Fold testen und critical CSS finden
Du könntest nun aufwendig deinen HTML Code und CSS Styles durchgehen und den kritischen Code-Teil der CSS raus kopieren.Es gibt aber auch schon Tools, die das können. Eines dieser Tools ist das Critical Path CSS Tools von Jonas Ohlsson.
Critical Path CSS Generator kurz erklärt:
Du übergibst diesem Tool deine komplette CSS und tippst deine Webseite für die Analyse ein.
Das Tool gibt dir dann den kritischen CSS Teil zurück. Wichtig ist, dass du unterschiedliche Seitentypen (Templates) testest, um alle kritischen CSS Teile zu erhalten.
Was nicht funktioniert: Das Tool lässt deine originale CSS-Eingabe unberührt (links). Um diese als nicht-kritische Datei zusammenzustellen, kannst du alle Angaben daraus löschen, die in den kritischen Teil übernommen worden (rechts).
Beispielsweise: Startseite, eine Kategorie, eine Seite, ein Artikel