Critical-CSS-Generator

Critical CSS ist der kleine Teil Ihrer Styles, den der erste Bildschirm braucht. Wird er eingebettet, kann die Seite gezeichnet werden, bevor die vollständigen Stylesheets eintreffen. Der Generator ist eine Pro-Funktion im Tab Cache und Optimierung unter dem Feld Critical CSS. Auf dem Server muss nichts installiert werden, denn die Standard-Engine läuft in Ihrem eigenen Browser.

So erzeugen Sie es

1. Öffnen Sie Baza Helper > Cache und Optimierung und scrollen Sie zum Feld Critical CSS.
2. Wählen Sie die Seitenadresse (standardmäßig die Startseite) und die Bildschirmgröße: Mobile 390 x 844, Desktop 1440 x 900 oder Both.
3. Klicken Sie auf Automatisch generieren und warten Sie. Versteckte Frames laden eine signierte Kopie der Seite, und der Collector liest, welche Regeln der erste Bildschirm nutzt.
4. Sehen Sie sich die Ergebniskarte an: alte und neue Größe, Warnungen, die Layoutabweichung in Prozent und eine skalierte Live-Vorschau.
5. Klicken Sie auf Anwenden, um zu speichern, oder auf Cancel, um alles zu belassen, wie es war.

Vor dem Klick auf Apply wird nichts gespeichert, und Ihre Stylesheets werden nie verändert. Der bisherige Wert wird zuerst gesichert, und Vorherige Version wiederherstellen stellt ihn wieder her (die letzten 5 Versionen werden gemerkt).

Wie die Seite gelesen wird

• Die Seite wird als nicht angemeldeter Besucher über einen signierten Link geladen, der 15 Minuten gilt. So gelangen weder die Admin-Leiste noch Ihre Anmeldung ins Ergebnis.
• Eine Regel bleibt erhalten, wenn ihr Selektor ein Element trifft, das auf dem ersten Bildschirm eine Box hat. Regeln, die ein Element auf dem ersten Bildschirm verstecken, bleiben in gekürzter Form erhalten.
• Hover- und Focus-Regeln, Druckregeln, Regeln unterhalb des ersten Bildschirms sowie ungenutzte @font-face, @keyframes und @property werden weggelassen.
• Die Reihenfolge von @layer, die Umhüllungen @media, @supports und @container, benutzerdefinierte Eigenschaften und die Kaskadenreihenfolge bleiben erhalten. Identische Regeln werden zusammengeführt, die letzte Kopie bleibt.
• Benutzerdefinierte Eigenschaften, die niemand verwendet, entfallen. Eingebettete Dateien (url(data:…) ab 3000 Zeichen) werden weggelassen und gemeldet.
• Die Ausgabe ist minifiziert und enthält nur ASCII.

Grenzen und Sicherheit

• Das Ergebnis ist auf 64 KB begrenzt. Wird die Grenze überschritten, zeigt die Meldung, was den Platz belegt (benutzerdefinierte Eigenschaften, Schriften, Animationen, Media-Regeln, die größten Klassengruppen).
• Erlaubt sind nur Adressen Ihrer eigenen Website, auf den Ports 80 und 443, ohne Zugangsdaten.
• Ein Lauf nach dem anderen, höchstens 12 pro Stunde und im Abstand von 8 Sekunden pro Benutzer.
• Eine Website, die das Einbetten in Frames verbietet (X-Frame-Options oder frame-ancestors), meldet, dass der Frame blockiert wurde.
• Nicht lesbare Stylesheets von anderen Ursprüngen werden als Warnungen gemeldet.

Zusammen mit verzögerten Styles nutzen

Nachdem Sie Critical CSS übernommen haben, können Sie die Stylesheet-Handles, die nach dem Critical CSS geladen werden auflisten. Diese Styles laden dann, ohne das erste Zeichnen zu blockieren, mit einem Fallback ohne JavaScript. Unvollständiges Critical CSS kann ein kurzes Aufblitzen ungestylter Inhalte verursachen, schauen Sie sich den ersten Bildschirm daher auf dem Smartphone und am Desktop an.

Die Einstellung Critical CSS nur auf der Startseite verwenden ist standardmäßig an. Das Critical CSS wird aus einer Seite erzeugt, und andere Seiten haben andere Regeln für den ersten Bildschirm, sodass sie mit verzögerten Styles kurz ungestylt aufblitzen könnten. Ist sie an, bekommt nur die Startseite das eingebettete Critical CSS und die verzögerten Styles, die anderen Seiten laden ihre Styles wie gewohnt. Ist sie aus, nutzt die ganze Website sie, und Sie nehmen ein mögliches Aufblitzen auf Seiten in Kauf, die von der Ausgangsseite abweichen.

Die Einstellung umfasst das eingebettete CSS, die Links auf verzögerte Stylesheets, die zusammengeführte verzögerte Datei, das Skript, das die Styles einschaltet, und die aus dem Critical CSS vorab geladenen Schriften. Jedes verzögerte Stylesheet wird der Reihe nach eingeschaltet, und der Bildschirm wird einmal gemessen, wenn der Browser untätig ist.

Für Entwickler

Ein optionaler Server-Worker (Node 18+ mit Chromium) kann das CSS ohne Browser-Tab erzeugen, und weitere Generatoren lassen sich über den Filter baza_helper_critical_css_generators hinzufügen. Der aktive wird mit baza_helper_critical_css_generator gewählt.