Kritisches CSS in WordPress: Was es ist und wie man die CSS-Bereitstellung optimiert

Wenn Sie eine Leistungsprüfung auf Google PageSpeed ​​Insights durchführen, werden Sie feststellen, dass Google Ihnen fast jedes Mal empfiehlt, „renderblockierende Ressourcen zu eliminieren“. Das bedeutet, dass Sie Ihr kritisches CSS und JavaScript immer vorrangig laden sollten.

Aber wie entscheidet man, welches CSS kritisch ist und welches nicht? Welchen Teil Ihrer Website sollten Sie „verzögern“, um einen anderen zu beschleunigen? Es dreht sich alles um Prioritäten und darum herauszufinden, welche CSS-Ressourcen wesentlich sind und wie ihre Bereitstellung optimiert werden kann.

Tauchen wir ein.

Was ist Critical CSS und warum ist es wichtig für die Leistung?

Critical CSS ist eine Technik, die das CSS „above the fold“ extrahiert, um die Seite so schnell wie möglich anzuzeigen. Es ist, als würde man das Nötigste an CSS nehmen, um den Inhalt anzuzeigen, der von einem Besucher angesehen wird.

Mit anderen Worten, kritisches CSS ist der Schlüssel zur Leistungsoptimierung. Vor dem Rendern der Seite muss Ihr Browser die CSS-Dateien herunterladen und parsen, wodurch diese Dateien zu einer Ressource werden, die das Rendern blockiert. Je größer Ihre CSS-Dateien sind, desto länger dauert es, bis der Browser sie verarbeitet hat. All diese Anfragen, die von umfangreichen CSS-Dateien erstellt werden, verlängern die Ladezeit einer Webseite und verärgern die Besucher und Google.

Die Seitengeschwindigkeit kann sich aufgrund des neuen Rankingfaktors, einschließlich der Core Web Vitals, auch auf Ihre SEO-Leistung auswirken. Sie sind eine Reihe von Faktoren, die von Google implementiert wurden, um die Benutzererfahrung zu messen – einschließlich der Geschwindigkeit einer Seite. Je besser die Erfahrung ist, desto besser wird Ihr Ranking sein.

Kennen Sie die sechs Lighthouse-Metriken, die die Leistung messen? Zwei davon – First Contentful Paint (FCP) und First Input Delay (FID) – messen die wahrgenommene Geschwindigkeit Ihrer Website. Wenn diese Metriken in einem guten Zustand sind, wird auch Ihre von Google gemessene Benutzererfahrung gut sein. Wenn jedoch beide KPIs im roten Bereich sind, optimieren Sie besser Ihr kritisches CSS.

Kritisches CSS in einfachem Englisch erklärt

Im Klartext ist Critical CSS eine Optimierungsaufgabe. Es ist, als ob Sie Ihrem Browser mitteilen, nur das CSS zu laden, das vom Besucher angezeigt wird. Dies trägt dazu bei, die wahrgenommene Geschwindigkeit zu verbessern, also wie schnell die Website einem Besucher erscheint.

Machen wir eine kurze Übung mit dem Bild unten. Stellen Sie sich vor, Sie sind ein mobiler Benutzer, der auf eine Website zugreift.

Szenario Nr. 1 – Ganz oben befindet sich eine Seite mit Render-blockierendem CSS. Sie sehen eine leere Seite, bis die gesamte CSS-Datei geladen wurde.

Szenario Nr. 2 – Unten wird das kritische CSS zuerst gerendert. Sie sehen die Seite viel früher, da der Browser bereits damit begonnen hat, das wichtigste Stylesheet zu laden.

Frage: Welches Szenario „fühlt“ sich für Sie schneller an?

Antwort: Wir sind uns alle einig, dass die wahrgenommene Geschwindigkeit des Endergebnisses besser ist.

Ihr Besucher wird eine spürbare Verkürzung der Seitenladezeit aufgrund der schnelleren Seitenwiedergabe spüren, wenn dies richtig gemacht wird.

Warum ist Critical CSS notwendig?

Das Laden eines CSS-Stylesheets ist normalerweise die Art und Weise, wie Sie Ihre WordPress-Site gestalten. CSS ist die Sprache, die verwendet wird, um eine Webseite zu beschreiben, z. B. die Farben, das Layout und die Schriftarten. Ohne CSS würde das Web wie unsere linke Spalte unten aussehen:

Die Website von WP Rocket ohne CSS	Website von WP Rocket mit CSS

Was bedeutet kritischer CSS-Rendering-Pfad?

Der kritische Wiedergabepfad ist die Reihe von Aufgaben, die der Browser ausführen muss, um eine Seite auf dem Besucherbildschirm wiederzugeben. Zu diesen Aufgaben gehört beispielsweise das Herunterladen von Fotos, Schriftarten und Text, der auf der Webseite angezeigt werden soll.

Wie bereits erwähnt, muss der Browser auch Ihre CSS-Dateien herunterladen, um das richtige Layout der Seite wiederzugeben. Wenn Ihre Dateien wirklich groß sind, werden die Besucher am Ende warten, bis die gesamte Datei heruntergeladen wurde.

Aber was wäre, wenn der Browser beginnen könnte, das CSS zu rendern, während der Download fortschreitet?

Stellen Sie sich eine Möglichkeit vor, die Blockierung abzumildern und die CSS-Bereitstellung so schnell wie möglich zu starten. Diese Technik ist genau als die Optimierung des kritischen Wiedergabepfads bekannt.

Der Browser folgt fünf Schritten, bis er die Seite für die Besucher darstellt. Während dieses Prozesses kann viel passieren. Deshalb sollten wir darauf achten, dass jeder Schritt so schnell wie möglich abgeschlossen wird.

Jetzt stellen sich zwei Fragen: Wie kann jeder Schritt optimiert werden? Wie stellen wir sicher, dass wir die effizienteste CSS-Bereitstellung haben?

Diese Fragen führen uns zum nächsten Abschnitt. Sie erfahren, wie Sie die Renderzeiten mit der kritischen CSS-Technik (optimieren der CSS-Bereitstellung) verbessern und die Renderblocker von CSS-Fehlern beseitigen.

Die 3 Schritte zur Optimierung der CSS-Bereitstellung

CSS steuert die visuelle Formatierung und den Stil Ihrer WordPress-Site, aber wenn die CSS-Datei nicht optimal geliefert wird, können Sie am Ende eine langsame Webseite haben.

Eine der besten Möglichkeiten, die Leistung Ihrer WordPress-Site zu verbessern, besteht also darin, zu optimieren , wie und wann der CSS-Code bereitgestellt wird. Es gibt drei Hauptschritte, um die CSS-Bereitstellung für Ihre WordPress-Site zu optimieren, nämlich:

Schritt 1: Finden und generieren Sie das kritische CSS – das identifiziert den minimalen CSS-Code, den Sie benötigen, um den Inhalt "above the fold" anzuzeigen. Sie müssen herausfinden, was der Benutzer im Ansichtsfenster sehen kann, wenn er die Seite zum ersten Mal lädt. Die Bestimmung des richtigen kritischen CSS für eine Seite kann komplex sein, da Besucher viele verschiedene Bildschirmgrößen verwenden, z. B. Desktop, Tablet und Handy.

So finden Sie kritisches CSS

WebDev bietet Ihnen drei Tools, mit denen Sie kritisches CSS identifizieren können:

• Kritisch – Extrahiert „above the fold“-CSS (und fügt es auch ein und minimiert es)
• CriticalCSS – ein weiteres Modul, das das kritische CSS extrahiert
• Penthouse – eine gute Wahl, wenn Ihre Website viel CSS enthält

Schritt 2: Inline dieses kritische CSS – das ist das Hinzufügen des kritischen CSS im <head> des HTML-Dokuments, um alle zusätzlichen Anfragen zum Abrufen dieser Stile zu eliminieren.

Im folgenden WebDev-Beispiel haben sie das kritische CSS in die <head>-Datei eingebettet, damit der Browser es schneller bereitstellen und den Benutzern so schnell wie möglich etwas rendern kann.

Schritt 3: Laden Sie den Rest des CSS asynchron – das verzögert das unkritische CSS, damit es geladen werden kann, nachdem Ihre Besucher den Inhalt Ihrer Webseite sehen können. Diese Technik wird auch als „deferred loading“ bezeichnet. WebDev erklärt den gesamten manuellen Prozess sehr gut.

Indem Sie diese drei manuellen Schritte befolgen, optimieren Sie Ihre CSS-Bereitstellung und Ihren kritischen Rendering-Pfad. Es gibt jedoch einfachere Methoden, um die CSS-Bereitstellung von WordPress zu optimieren: durch die Verwendung eines WordPress-Plugins!

So generieren Sie kritisches CSS und optimieren den kritischen Rendering-Pfad mit einem Plugin

Glücklicherweise können Sie die Bereitstellung Ihres kritischen CSS optimieren und weniger wichtige Ressourcen mit einem WordPress-Plugin verschieben. Dadurch sparen Sie Zeit und müssen Ihre Codedateien nicht manuell ändern. Wir haben eine Liste zusammengestellt, damit Sie testen können, welches Tool für Sie am besten geeignet ist.

• WP Rocket – Das umfassendste Cache-Plugin, das Ihr kritisches CSS auf Inline erkennt und es auf einfachste Weise verschiebt. Im nächsten Abschnitt gehen Sie ein praktisches Beispiel durch.

• Autoptimize – Fügt CSS standardmäßig in den Seitenkopf ein und kann auch kritisches CSS einbetten und zurückstellen.

• Asset-Bereinigung – Inline-CSS-Dateien (automatisch und durch Angabe des Pfads zu den Stylesheets).

So optimieren Sie die CSS-Bereitstellung mit WP Rocket

In WP Rocket 3.10 adressiert die Option „CSS asynchron laden“ die Empfehlung zur Seitengeschwindigkeit, die wir zuvor gesehen haben: „Renderblockierende Ressourcen beseitigen“. WP Rocket deckt zwei Haupt-CSS-Optimierungen ab:

1. Es generiert das kritische CSS, das zum Rendern des sichtbaren Teils Ihrer Website (der Inhalt "above the fold") erforderlich ist.
2. Es lädt alle anderen CSS-Dateien asynchron (wobei priorisiert wird, welche zuerst geladen werden soll).

Um die CSS-Bereitstellung zu optimieren, folgen Sie einfach diesen Schritten im Dashboard von WP Rocket:

• Gehen Sie zu Einstellungen > WP Rocket
• Klicken Sie auf die Registerkarte Dateioptimierung .
• Scrollen Sie nach unten zum Abschnitt CSS-Dateien und klicken Sie auf das Kästchen mit der Bezeichnung CSS-Bereitstellung optimieren .
• Wählen Sie die Option Unbenutztes CSS entfernen ( empfohlene Option ). Dadurch wird nur das auf der Seite benötigte CSS extrahiert und es wird auch eingebunden.

Alternativ lässt WP Rocket auch CSS asynchron laden und bietet eine Fallback-Option für das kritische CSS. Verwenden Sie dieses Fallback-Feld, falls das Plug-in das richtige kritische CSS nicht generieren kann.

Last but not least geht WP Rocket auch auf die „Reduziere ungenutztes CSS“-Empfehlungen von PageSpeed ​​Insights ein.

Ungenutztes CSS wirkt sich auf die Ladezeit der Seite aus, da der Browser sie noch laden muss. Google-Leistungsmetriken wie der Largest Contentful Paint (LCP) und die Total Blocking Time (TBT) werden ebenfalls beeinflusst. LCP und TBT haben insgesamt 55 % Gewicht in der Bewertung von Google PageSpeed ​​und Core Web Vitals, daher ist es entscheidend, diese Metriken gesund zu halten.

Testen wir diese WP Rocket-Optionen auf einer WordPress-Seite mit einer schlechten Note auf PSI (mobil). Sie werden sehen, wie WP Rocket uns bei unserem Prozess zur Optimierung der Seitengeschwindigkeit helfen wird.

Vor der Optimierung meines kritischen CSS betrug meine Leistungsnote nur 43/100, was meine mobile Website in die roten Zahlen brachte:

Außerdem erhalte ich zwei Warnungen: „Unbenutztes CSS reduzieren“ und „Ressourcen, die das Rendern blockieren, beseitigen“.

Lassen Sie uns nun WP Rocket installieren und die Option „ Nicht verwendetes CSS entfernen“ aktivieren.

Die Leistungsergebnisse auf Mobilgeräten sind jetzt großartig . Wir haben 94/100 mit nur wenigen Klicks erreicht. WP Rocket hat meinen Renderpfad optimiert und sich auch um mein kritisches CSS gekümmert.

Die Warnungen „Ressourcen, die das Rendern blockieren, beseitigen“ und „Unbenutztes CSS reduzieren“ befinden sich jetzt im Abschnitt „Audits bestanden“.

Genau wie ich können Sie WP Rocket verwenden, um die Bereitstellung unseres kritischen CSS zu optimieren. Es ist ein zuverlässiges und effizientes Plugin, das mir geholfen hat, mit wenigen Klicks erstaunliche Leistungsziele zu erreichen.

Einpacken

Die Optimierung Ihres kritischen CSS scheint entmutigend, aber dank Plugins wie WP Rocket muss es nicht so sein. Wir haben gesehen, dass WP Rocket dazu beigetragen hat, die roten Warnungen im Zusammenhang mit Render-Blocking-Ressourcen in Google PageSpeed ​​Insights zu beseitigen.

Sie sparen kostbare Zeit, da WP Rocket automatisch 80 % der Best Practices für die Webleistung anwendet – und Sie werden bei der Aktivierung eine sofortige Geschwindigkeitsverbesserung feststellen .

Darüber hinaus können Sie sich immer auf unsere 100 % Geld-zurück-Garantie verlassen. Obwohl wir nicht glauben, dass Sie jemals einen wollen werden, leisten wir Ihnen gerne eine Rückerstattung, wenn Sie dies innerhalb von 14 Tagen nach dem Kauf beantragen.