WordPress-CSS verstehen
Bevor wir eintauchen, wollen wir verstehen, wie normales CSS in WordPress funktioniert.
Jedes WordPress-Theme besteht aus style.css, das den gesamten Code enthält, der zum Gestalten Ihrer Website erforderlich ist. Theme-Entwickler sollten alle WordPress-Funktionen unterstützen, darunter Blog-Posts, Kommentare, Produktseiten, Mitgliedschaftsseiten, Formulare usw. Andere Plugins, die Sie installieren, können auch ähnliche CSS-Stylesheets hinzufügen.
Dies kann dazu führen, dass CSS-Dateien aufgebläht und mit einer Größe von 200 KB oder sogar mehr groß werden.
Was ist CSS für kritische Pfade?
Wenn Ihre CSS-Dateien wachsen, muss Ihr Browser diese großen Dateien herunterladen, analysieren und rendern. Auch bekannt als Renderblockierung. Es wird auch das erste sinnvolle Rendering und das erste sinnvolle Rendering inkrementieren.
Critical Path CSS ist das CSS, das zum Rendern der oben genannten Inhalte auf jeder Webseite erforderlich ist. Wie der Name schon sagt, „kritisches“ CSS, das dem Browser hilft, es schnell zu zeichnen und zu rendern, bevor vollständige CSS-Dateien geladen werden.
Normalerweise wird das CSS des kritischen Pfads in den Header eingebettet und die Quell-CSS-Datei wird asynchron oder in der Fußzeile geladen, um die Verwendung zu vereinfachen.
Warum ist Critical Path CSS so wichtig?
Sicher haben Sie schon mal eine Warnung von Tools wie Google PageSpeed Insights oder GTmetrix gesehen, die sagen „CSS-Übermittlung optimieren“ oder „unbenutztes CSS zurückstellen“.
Kritisches CSS hat nichts mit der Ladezeit der Seite zu tun. Die Ladezeit wird nicht erhöht/verringert. Aber gibt eine viel bessere Benutzererfahrung. Es hilft, eine Webseite schnell "zu rendern" oder zu "kolorieren".
- Verbessert First Content Draw (FCP)
- Verbessert First Significant Payment (FMP)
- Nicht verwendetes CSS entfernen (technisch gesehen nicht entfernen, aber "nützliches" CSS priorisieren)
Hier sind zwei Screenshots meines Blogs mit und ohne kritisches CSS.
Wie Sie im Abschnitt „kein kritischer CSS-Pfad“ sehen können, dauerte es fast 5 Sekunden, um dem Benutzer auf einem mobilen Gerät etwas Nützliches zu zeigen. Der Browser muss eine zusätzliche HTTP-Anfrage an die CSS-Datei senden, sie herunterladen und parsen, um mit dem Rendern zu beginnen. Aber wenn Sie kritisches CSS verwenden, müssen alle erforderlichen CSS inline sein und der Browser kann sofort nach dem Laden der HTML-Datei in einer Sekunde oder weniger mit dem Rendern beginnen.
Wie erstelle ich kritisches CSS in WordPress?
Es gibt mehrere Möglichkeiten, kritisches CSS in WordPress zu generieren.
Verwenden von Caching-Plugins
WP Rocket ist ein Premium-Caching-Plugin, das wirklich gut funktioniert.
Einer der Gründe, warum ich WP Rocket auf jeder Seite verwende, ist die kritische CSS-Generierung selbst. Sie generieren Critical CSS separat für Startseite, Beitragsseite, Kategorieseite, Produktseite usw. und betten es ein. Sie stellen kritisches CSS wieder her, wenn Änderungen am Design oder an den Einstellungen vorgenommen werden.
Alles kann auf Knopfdruck erledigt werden.
Andere Caching-Plugins, die kritisches CSS generieren können
Swift Performance und LiteSpeed (erfordert LiteSpeed / OpenLiteSpeed-Server) sind ähnliche Plugins, die Critical CSS generieren können. Beide Plugins haben eine Cloud und einen vollständigen Cache in ihre Server integriert.
Verwenden von Autoptimize + Free Critical CSS Generator
Es gibt Online-Tools von Drittanbietern, die wichtiges CSS bereitstellen, indem sie die URL Ihrer Website eingeben. pegasaas ist so ein tolles kostenloses Tool.
So geht's:
Schritt 1. Gehen Sie zu https://pegasaas.com/critical-path-css-generator/ und geben Sie Ihre URL ein. Kopieren Sie das generierte „Critical Path CSS“.
Schritt 2 Aktivieren Sie in den Einstellungen zur automatischen Optimierung (erweiterte Einstellungen aktivieren) unter „CSS-Optionen“ die Option „Inline and Defer CSS“ und fügen Sie das kopierte CSS ein.
Vorteile:
- Ist gratis
Minuspunkte:
- Kein separates kritisches CSS für verschiedene Seitentypen (z. B. Startseite, Beitragsseite, Kategorieseite, Produktseite usw.)
- Bei Themen-/Einstellungsänderungen nicht automatisch neu erstellen
Warum kann WordPress selbst kein kritisches CSS generieren?
Wie Sie vielleicht bemerkt haben, aktiviert das Erstellen eines kritischen CSS-Pfads externe Dienste. Warum kann WordPress es nicht selbst generieren?
Das Erstellen von Critical CSS wird durch Open-Source-Projekte wie Critical (von Google), CriticalCSS oder Penthouse ermöglicht. Alle diese Projekte basieren auf NodeJS, nicht auf PHP. Sie müssen also NodeJS auf Ihrem Server installieren. Die meisten Shared/Managed Hosting-Anbieter erlauben dies aus mehreren Gründen nicht.
