Kritisches CSS

Generieren Sie Above-the-Fold-CSS mit einem echten Browser und liefern Sie es von Managed CDN aus.

7 min read

Critical CSS ist die Teilmenge von CSS, die nötig ist, um Above-the-Fold-Inhalte schnell zu rendern. Cache Rocket generiert es in der Cloud mit einem echten Headless-Browser-Coverage-Durchlauf, lädt eine kompakte critical.css auf Managed CDN hoch, und das WordPress-Plugin bindet sie für Besucher ein.

Planvoraussetzung

Critical CSS ist auf Pro und Business verfügbar, mit einem monatlichen Seitenkontingent. Bestätigen Sie die Berechtigung unter Konto → Abonnement.

Aktivieren

  1. 1

    API-Schlüssel verbinden

    Fügen Sie öffentlichen und geheimen Schlüssel im Konto-Bildschirm des Plugins ein. Siehe API-Schlüssel.

  2. 2

    Plan bestätigen

    Critical CSS muss enthalten sein, mit verbleibendem monatlichem Seitenkontingent.

  3. 3

    Critical CSS generieren aktivieren

    Aktivieren Sie unter Media die Critical-CSS-Generierung.

  4. 4

    Für relevante Seiten generieren

    Führen Sie die Generierung für wichtige Templates oder URLs innerhalb Ihres monatlichen Limits aus.

Unused-CSS-Berechtigung

Höhere Pläne können eine Unused-CSS-Berechtigung ausweisen. Dieses Flag reserviert die Fähigkeit in der Abrechnung; die Critical-CSS-Generierung ist der hier dokumentierte, produktive Cloud-CSS-Workflow. Erwarten Sie keinen separaten Unused-CSS-Prozessor, sofern er nicht als eigene Media-Steuerung erscheint.

Häufige Fragen

Warum ein echter Browser?
Coverage aus einem Live-Seitenaufruf erfasst, welches CSS für diese URL tatsächlich above the fold verwendet wird, und bleibt genau, wenn sich Themes ändern.
Woher laden Besucher critical.css?
Von Managed CDN (assets.cacherocket.com), eingebunden vom Plugin.
Was passiert bei Erreichen des Kontingents?
Neue Critical-CSS-Seitenjobs pausieren, bis das monatliche Kontingent zurückgesetzt wird oder Sie upgraden.