Das Laden von CSS mit Jetpack Boost beschleunigen

Jetpack Boost sorgt dafür, dass Ihre Website schneller lädt, indem die Bereitstellung von CSS optimiert wird. Die Funktion für kritisches CSS verschiebt die wichtigsten Styling-Informationen an den Anfang Ihrer Seiten, sodass Ihre Inhalte früher angezeigt werden – insbesondere auf Mobilgeräten. Dies verbessert die Nutzererfahrung Ihrer Besucher und den Geschwindigkeitswert Ihrer Website.

Je nach Tarif ist diese Funktion in zwei Varianten verfügbar: manuelle Generierung (kostenloser Tarif) und automatische Generierung (kostenpflichtiger Tarif).

Was ist kritisches CSS?MD

Kritisches CSS bezeichnet die grundlegenden Styles, die zum Rendern des sichtbaren Teils einer Seite benötigt werden. Jetpack Boost extrahiert dieses CSS und fügt es direkt in den <head> Ihrer Seite ein, um Verzögerungen beim Laden wichtiger visueller Elemente zu reduzieren.

Um sowohl Desktop- als auch mobile Layouts zu unterstützen, testet Boost Ihre Website bei mehreren Bildschirmbreiten und erstellt einen einzigen Satz kritischen CSS, der auf allen Geräten funktioniert.

Kritisches CSS manuell generierenMD

Mit der kostenlosen Version von Jetpack Boost generieren Sie kritisches CSS manuell. Generieren Sie es nach Änderungen an der Struktur Ihrer Website in Bezug auf HTML oder CSS erneut.

Kritisches CSS aktivieren und generierenMD

1. Gehen Sie zu Jetpack → Boost im WP-Admin.
2. Klappen Sie den „Seitenladen“-Bereich auf.
3. Aktivieren Sie den „Kritisches CSS laden (manuell)“-Schalter.
4. Klicken Sie auf die Schaltfläche „Generieren“.

Bleiben Sie im Boost-Dashboard, während kritisches CSS generiert wird. Wenn Sie die Seite verlassen, wird der Vorgang angehalten.

Wann kritisches CSS erneut generiert werden sollteMD

Generieren Sie kritisches CSS nach folgenden Änderungen erneut:

• Ändern oder Aktualisieren Ihres Themes
• Hinzufügen oder Bearbeiten von Beiträgen und Seiten mit neuen Layouts oder Blöcken
• Installieren oder Aktualisieren von designbezogenen Plugins
• Den Kern von WordPress aktualisieren

Mit einem kostenpflichtigen Tarif von Jetpack Boost können Sie die Generierung von kritischem CSS automatisieren.

Kritisches CSS automatisch generierenMD

Automatisch generiertes kritisches CSS ist mit dem kostenpflichtigen Tarif von Jetpack Boost oder Jetpack Complete.

So generieren Sie kritisches CSS automatisch:

1. Gehen Sie zu Jetpack → Boost im WP-Admin.
2. Klappen Sie den „Seitenladen“-Bereich auf.
3. Aktivieren Sie den „Kritisches CSS laden (automatisch)“-Schalter.

Nach der Aktivierung generiert Boost automatisch kritisches CSS, sobald Sie Änderungen an Ihrer Website vornehmen.

Vorteile der automatischen Generierung von kritischem CSSMD

• Hält kritisches CSS nach Änderungen an der Website automatisch auf dem neuesten Stand.
• Reduziert den Bedarf, kritisches CSS manuell erneut zu generieren.
• Verwendet eine serverseitige Generierung für konsistentere Ergebnisse.
• Hilft, veraltetes kritisches CSS nach Design- oder Layoutänderungen zu vermeiden.
• Bietet Zugang zu direktem Support, falls etwas schiefgeht.

StatusmeldungenMD

Jetpack Boost zeigt unter kritischem CSS Statusmeldungen an, damit Sie wissen, ob die Generierung erfolgreich abgeschlossen wurde oder Ihre Aufmerksamkeit erfordert.

• Die automatische Generierung ist aktiviert. Bei kostenpflichtigen Tarifen zeigt Boost an, dass kritisches CSS bei jeder Änderung automatisch generiert wird.
• Kritisches CSS wurde erfolgreich generiert. Boost zeigt an, wie viele Dateien generiert wurden und wann sie zuletzt aktualisiert wurden.
• Einige Dateien konnten nicht generiert werden. Boost verlinkt Empfehlungen für die betroffenen Seiten.
• Eine Seite ist nur für angemeldete Besucher verfügbar. Boost kann die Seite nicht als abgemeldeter Besucher lesen. Wenn die Seite absichtlich privat ist, können Sie diese Meldung ignorieren. Wenn sie öffentlich zugänglich sein sollte, überprüfen Sie das Plugin oder die Einstellung, die eine Anmeldung der Besucher erfordert, und versuchen Sie es erneut.
• Ein weiterer Fehler bei der Generierung ist aufgetreten. Folgen Sie den in Boost angezeigten Empfehlungen oder lesen Sie den Leitfaden zur Fehlerbehebung bei kritischem CSS.

Automatische Generierung von kritischem CSS für Entwickler deaktivierenMD

Wenn Sie den kostenpflichtigen Tarif nutzen, aber die manuelle Version bevorzugen, können Sie die automatische Funktion deaktivieren, indem Sie diesen Filter zu einem Must-Use-Plugin hinzufügen (mu-plugin):

add_filter( "jetpack_boost_has_feature_cloud-critical-css", '__return_false' );

Nach der Deaktivierung kehrt der manuelle Schalter „Kritisches CSS laden (manuell)“ zu Ihrem Dashboard zurück.

FehlerbehebungMD

Wenn Jetpack Boost kritisches CSS nicht generieren kann oder eine Meldung auf Probleme hinweist, befolgen Sie die Schritte in unserem vollständigen Leitfaden:

Fehlerbehebung bei kritischem CSS in Jetpack Boost