TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erzeuge ich kritisches CSS in der WordPress-Site?

11

Es gibt viele Drag-and-Drop-Website-Builder im Internet, um Websites ohne technische Kenntnisse zu erstellen. Sie müssen jedoch einige technische Aspekte von SEO lernen, um Ihre Website auf den Suchergebnisseiten von Suchmaschinen zu halten. Kritisches CSS ist ein solches technisches Thema zur Optimierung Ihrer Inhaltsbereitstellung, das sich wiederum direkt auf die Geschwindigkeit auswirkt. Das WordPress-Ökosystem macht dies für normale Benutzer komplizierter, die mehrere Plugins auf ihrer Website verwenden. In diesem Artikel erfahren Sie, wie Sie kritische CSS für die WordPress-Site erstellen, um den Google PageSpeed-Score zu verbessern.

Die Grundlagen verstehen

Bevor Sie sich mit kritischem CSS befassen, ist es notwendig, einige Terminologien wie „above the fold” und „Content Delivery Optimization” zu verstehen. Darüber hinaus müssen Sie auch die grundlegende Methode zur Verwendung externer Stylesheets in WordPress verstehen.

Above The Fold-Inhalt

Wenn Sie eine Website auf dem Desktop oder Mobilgerät öffnen, befindet sich der sichtbare Teil des Bildschirms über dem Inhaltsbereich. Hierbei handelt es sich um eine traditionelle Zeitungsterminologie, bei der Sie oben auf der ersten Seite den Inhalt von oben sehen können. In der Regel wurde die Zeitung gefaltet und über dem Falzbereich werden wichtige Inhalte angeboten. Ebenso sollte der oberste sichtbare Teil der Webseite, der zuerst geladen wird, dem Benutzer den wertvollsten Inhalt bieten. Daher sollten Sie sich darauf konzentrieren, den sichtbaren oberen Bereich zu optimieren, um mit rasender Geschwindigkeit zu laden.

Optimierung der Inhaltsbereitstellung

Viele Geschwindigkeitstools wie Google PageSpeed ​​Insights messen, wie die Website Over-the-Fold-Inhalte liefert. Sie können dies als Maß für First Contentful Paint (FCP) sehen. Wenn sie eine Blockierung erkennen, sehen Sie eine Warnung, das blockierende Element zu entfernen. Einer der beliebtesten Vorschläge, die Sie im Google PageSpeed ​​Insights-Tool sehen, ist die Beseitigung von Rendering-blockierenden Ressourcen. Wenn Sie auf diesen Vorschlag klicken, zeigt Ihnen Google die Optimierung der Bereitstellung kritischer CSS/JS und verschiebt alle nicht kritischen CSS/JS.

Wie erzeuge ich kritisches CSS in der WordPress-Site?

Kritischer CSS- und JS-Vorschlag

Das Beheben von Rendering-blockierendem JavaScript (jQuery) ist recht einfach, da Themes/Plugins standardmäßig die Skripte im Footer-Bereich laden. jQuery ist das einzige Problem, das für viele Websites erforderlich sein kann, um Over-the-Fold-Inhalte zu laden. Da WordPress auch jQuery verwendet, können Sie diesen Fehler ignorieren, wenn er nur auf jQuery zurückzuführen ist. Verwenden Sie andernfalls Plugins wie WP Rocket, um alle Skripte zu kombinieren und bereitzustellen, wenn dies das Layout Ihrer Website nicht beeinträchtigt.

Das Problem besteht jedoch darin, kritische CSS zu generieren und zuerst zu laden. In diesem Artikel erklären wir, wie Sie mit der CSS-Optimierung umgehen, um den Page Speed ​​Score zu verbessern.

Verwandte: Die richtigen WP Rocket-Plugin-Einstellungen, um Ihre Website zu beschleunigen.

CSS in Websites laden

Es gibt mehrere Möglichkeiten, CSS in Ihre Webseite einzufügen. Sie können dies inline, intern oder extern tun. Die beliebteste und empfohlene Methode ist das Verlinken externer Stylesheets im Header-Bereich einer Webseite. Da der Inhalt im Header-Bereich zuerst mit der Webseite geladen wird, wirkt sich dies drastisch auf das Laden von Inhalten oberhalb der Falte und damit auf die Seitengeschwindigkeit aus.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

CSS in WordPress laden

WordPress verwendet style.css als externe Datei, um die Stile des Themes bereitzustellen. Dies ist eine obligatorische Datei (zusätzlich zur functions.php) für den Betrieb einer WordPress-Website. Darüber hinaus kann jedes Plugin auf Ihrer Website zusätzliche CSS-Dateien hinzufügen. Öffnen Sie Ihre Website im Chrome-Browser und zeigen Sie den Quellcode an (stellen Sie sicher, dass keine Caching-Plugins installiert oder das Caching für die Seite deaktiviert ist).

Wie erzeuge ich kritisches CSS in der WordPress-Site?

Stylesheets in der Kopfzeile

Sie können sehen, dass WordPress alle externen Stylesheets im Kopfbereich der Seite verlinkt. Dies kann aus Sicht der Optimierung mehrere Probleme verursachen:

  • Einige Themes verwenden umfangreiche CSS-Stile mit einer Größe von wenigen MB. Sie müssen nicht alle diese Stile laden, wenn ein Benutzer eine Webseite auf dem Desktop oder Mobilgerät öffnet.
  • Es gibt verschiedene Post-Typen wie Produkte, die völlig unterschiedliche Stile verwenden können. In diesem Fall benötigen Sie das andere CSS nicht für das anfängliche Laden (above the fold).

Jede Seite Ihrer Website benötigt ein Mindest-CSS zum Laden von "above the fold"-Inhalten. Dieses minimale CSS, das für das Laden der Seite benötigt wird, wird in der Fachsprache als kritisches CSS bezeichnet. In allen oben genannten Fällen zeigen Ihnen Google PageSpeed ​​Insights und andere Tools eine Warnung zur Optimierung der CSS-Bereitstellung an.

Denken Sie daran, dass das Entfernen von ungenutztem CSS und Skripten auch mit der Verwendung von zu viel CSS / Skripten auf der Seite zusammenhängt. Dies unterscheidet sich jedoch erheblich von der kritischen CSS-Optimierung. Möglicherweise verwenden Sie einige Plugins nicht einmal auf einer bestimmten Seite. Zum Beispiel benötigen Sie nicht auf allen Seiten der Site das CSS des Kontaktformular-Plugins. In diesem Fall sind CSS/JS-Dateien aus Kontaktformular-Dateien in einem regulären Blog-Post unnötig und Sie sehen eine Warnung zum Entfernen nicht verwendeter CSS/JS. Sehen Sie sich unseren Artikel an, wie Sie ungenutztes CSS/JS in WordPress deaktivieren und WooCommerce-Seiten für Admin-AJAX-Aufrufe optimieren.

Wie erzeuge ich kritisches CSS in WordPress?

Jetzt wissen Sie, wie wichtig das kritische CSS zur Verbesserung der Seitenladegeschwindigkeit ist. Es gibt zwei Möglichkeiten, kritische CSS für Ihre Website zu generieren.

  • Generieren Sie kritisches CSS manuell und fügen Sie es auf Ihrer Website ein
  • Verwenden Sie das WP Rocket-Plugin, um die Bereitstellung von Inhalten zu optimieren

Wir werden sowohl den Prozess im Detail erklären und Sie können die beste auswählen, die für Ihre Website am besten geeignet ist.

Verwandte: Funktioniert WP Rocket mit SiteGround-Hosting?

Manuelle kritische CSS-Generierung

Es gibt viele Tools von Drittanbietern, die im Internet verfügbar sind, um kritische CSS manuell zu generieren. Dies ist jedoch sinnvoll, wenn alle Seiten Ihrer Websites ähnlich sind und keine benutzerdefinierten Inhalte im Over-the-Fold-Bereich enthalten. Sie können andere kostenlose kritische CSS-Generierungsdienste wie Sitelocity ausprobieren.

  • Gehen Sie zur Sitelocity-Website und geben Sie die URL Ihrer Seite ein.
  • Klicken Sie auf die Schaltfläche "CSS für kritischen Pfad generieren".
  • Sie können das minimierte kritische CSS für Ihre Seite abrufen.

Wie erzeuge ich kritisches CSS in der WordPress-Site?

Kritisches CSS generieren

Nachdem Sie nun kritisches CSS generiert haben, besteht die nächste Aufgabe darin, es in den Header-Bereich Ihrer Site einzufügen. Theoretisch können Sie die Stile in Ihre header.php-Datei zwischen und -Tags einfügen. Es gibt Plugins, die beim Einfügen von Stilen in den Header-Bereich helfen, ohne Vorlagendateien zu ändern. Autoptimize ist eines der Plugins, die wir für diesen Zweck empfehlen können. Wenn Sie Autoptimize bereits für Caching-Zwecke verwenden, können Sie dasselbe Plugin auch zum Einfügen von kritischem CSS verwenden.

Unter „CSS-Optionen” des Autoptimize-Plugins können Sie kritische CSS einfügen. Aktivieren Sie zuerst das Kontrollkästchen "Inline and Defer CSS" und fügen Sie das kritische CSS in das angezeigte Textfeld ein.

Wie erzeuge ich kritisches CSS in der WordPress-Site?

CSS-Optionen

Wie Sie sehen, kann das Autoptimize-Plug-in auch automatisch "above-the-fold"-CSS einbinden, während andere Stile zurückgestellt werden. Dadurch wird die Cachegröße jedoch schnell auf 100 % erhöht und Sie haben im Plugin keine Möglichkeit, den Cache automatisch zu löschen. Darüber hinaus wird die Website in den meisten Fällen beschädigt. Sie können sich für das Add-on Autoptimize CriticalCSS Power-Up entscheiden, das Ihnen besser hilft. Um dieses Add-on verwenden zu können, müssen Sie die API von Criticalcss.com für 10 USD pro Monat beziehen.

Warum funktioniert die manuelle Generierung kritischer CSS nicht?

Obwohl der obige manuelle Einfügevorgang einfach aussieht, ist er keine leichte Aufgabe. Im Folgenden sind einige der Gründe aufgeführt, warum Ihr kritisches CSS nicht funktioniert.

  • Möglicherweise haben Sie unterschiedliche Inhalte wie Seiten, Blog-Posts, Produkte usw. Jeder Inhaltstyp auf Ihrer Website benötigt unterschiedliche kritische CSS zum Laden von Inhalten oberhalb des Falz. Die Verwendung des Plugins oder des manuellen Einfügens lädt das kritische CSS auf allen Seiten und bricht einige Inhalte.
  • Sie müssen jedes Mal kritisches CSS generieren, wenn Sie Theme, Plugin und WordPress-Core aktualisieren. Andernfalls wird das Layout Ihrer Website durch die Verwendung von altem kritischem CSS beschädigt. Dies ist für normale Benutzer eine unmögliche Aufgabe, um kritische CSS für jedes einzelne Update auf der Website kontinuierlich zu aktualisieren. Mit den verfügbaren Auto-Update-Optionen müssen Sie sehr vorsichtig sein, bevor Sie Plugin/Theme/Core in Ihrer Installation aktualisieren.
  • Möglicherweise benötigen Sie separate kritische CSS für mobile und Desktop-Geräte.

Bei all diesen Problemen besteht die einzige verbleibende Option darin, ein Plugin zu verwenden, das sich um diese kümmert und kritische CSS dynamisch und automatisch generiert.

Erstellen Sie kritische CSS für WordPress mit WP Rocket

Glücklicherweise haben Sie ein Caching-Plugin, das genau diese kritische CSS-Generierung in WordPress durchführt. WP Rocket ist aufgrund seiner vereinfachten Einstellungen eines der beliebtesten Caching-Plugins für WordPress. Auch hier ist die kritische CSS-Generierung eine der Schönheiten des Plugins, die jeder normale Benutzer nutzen kann, ohne die Site zu beschädigen.

  • Zuerst müssen Sie das WP Rocket-Premium-Plugin kaufen .
  • Gehen Sie nach der Installation und Aktivierung von WP Rocket zu „Einstellungen > WP Rocket” und navigieren Sie zum Abschnitt „Dateioptimierung”.
  • Scrollen Sie nach unten und aktivieren Sie das Kontrollkästchen "CSS-Lieferung optimieren".

Wie erzeuge ich kritisches CSS in der WordPress-Site?

Kritisches CSS in WP Rocket aktivieren

Dadurch kann das Plugin automatisch kritische CSS für jeden Beitragstyp auf deiner WordPress-Site generieren. Es enthält die Titelseite. Startseite, Seite, Beitrag und alle anderen benutzerdefinierten Beitragstypen, die Sie auf Ihrer Website verwenden. Bei Bedarf können Sie kritische Fallback-CSS hinzufügen, die Sie manuell mit einem Drittanbieter-Tool generieren. Im Allgemeinen können Sie dieses kritische Fallback-CSS-Feld leer lassen. Sie können im Abschnitt "Cache" auch separates mobiles Caching aktivieren.

Beachten Sie, dass WP Rocket ein Premium-Plugin mit einer Einzelplatzlizenz ist, das für 49 US-Dollar erhältlich ist. Unserer Meinung nach lohnt es sich, dieses Plugin zu kaufen, da es eine End-to-End-Caching-Lösung zur Geschwindigkeitsoptimierung bietet. Das Plugin wird mit einem einjährigen Support und Updates geliefert. Danach funktioniert es weiterhin und Sie können das kritische CSS und andere Funktionen ohne Verlängerung verwenden. Sie können mit 30% Rabatt verlängern, um Support zu erhalten und zusätzliche Funktionen zu erhalten. Dies ist eine viel bessere Option im Vergleich zu 10 US-Dollar pro Monat für die Criticalcss-API zur Verwendung mit Autoptimize.

Kritisches CSS neu generieren

Wenn Sie Themes/Plugins/WordPress-Core aktualisieren oder benutzerdefinierte Beitragstypen auf Ihrer Website hinzufügen, ist es notwendig, kritische CSS neu zu generieren. Andernfalls verwendet WP Rocket altes kritisches CSS und bricht das Layout Ihrer Website. Stellen Sie daher sicher, dass Sie kritisches CSS neu generieren, ohne es zu vergessen.

  • Klicken Sie in der oberen Leiste auf das Menü „WP Rocket” und wählen Sie die Option „Kritisches CSS neu generieren”.
  • Alternativ können Sie zum Dashboard des Plugins gehen und auf die Schaltfläche „Kritisches CSS neu generieren” klicken.

Wie erzeuge ich kritisches CSS in der WordPress-Site?

Kritisches CSS neu generieren

Benutzerdefiniertes kritisches CSS für eine bestimmte Seite

Wie bereits erwähnt, haben Sie möglicherweise eine Homepage oder eine andere Seite, die mit einem Page Builder-Plugin erstellt wurde. Diese Seite hat ein völlig anderes kritisches CSS als alle anderen Blog-Posts auf Ihrer Website. In diesem Fall müssen Sie separates kritisches CSS erstellen und nur auf dieser Seite bedingt laden. WP Rocket kann Ihnen dabei helfen, dies mit wenigen Klicks zu erreichen.

  • Gehen Sie zum Seiten- / Post-Editor der Seite, auf der Sie separates kritisches CSS generieren möchten.
  • Suchen Sie im Dokumentfenster der Seitenleiste nach dem Fenster „WP ​​Rocket Options”. Wenn Sie es nicht finden, klicken Sie auf die Schaltfläche mit den drei Punkten in der oberen rechten Ecke und wählen Sie „Einstellungen”. Im Pop-up können Sie die auf Ihrer Site verfügbaren erforderlichen Dokumentbereiche aktivieren.
  • Aktivieren Sie das Kontrollkästchen „CSS-Lieferung optimieren” und klicken Sie auf die Schaltfläche „Spezifisches CPCSS generieren”.
  • Dadurch wird ein spezifisches kritisches CSS für diese Seite generiert und das Plugin lädt dieses kritische CSS, wenn Benutzer die Seite besuchen.

Wie erzeuge ich kritisches CSS in der WordPress-Site?

Kritisches CSS für eine bestimmte Seite generieren

Verwandte: Überprüfung des WP Rocket-Caching-Plugins.

Testen von kritischem CSS

Nachdem Sie die manuelle Methode implementiert oder das WP Rocket-Plugin verwendet haben, können Sie die Seite testen, indem Sie die Seitenquelle anzeigen. Stellen Sie sicher, dass Sie sich von Ihrem Admin-Panel abmelden oder das Caching für angemeldete Benutzer im Plugin aktivieren. Wie Sie im folgenden Screenshot sehen können, fügt WP Rocket kritische CSS im Header hinzu.

Wie erzeuge ich kritisches CSS in der WordPress-Site?

WP Rocket Critical CSS

Sie können die Seiten auch im Google PageSpeed ​​Insights-Tool überprüfen. Wenn alles gut geht, werden Renderblocking-Ressourcen und andere CSS-Fehler unter den übergebenen Ergebnissen beseitigt. Dies zeigt an, dass Sie wichtiges CSS korrekt auf der Website implementiert haben.

Letzte Worte

Wir hoffen, dass dieser Artikel die Bedeutung von kritischem CSS in WordPress-Sites hervorgehoben hätte. Sie können die manuelle Option verwenden, wenn Sie eine kleinere Site mit wenigen Seiten haben. Für einen laufenden Blog mit einer großen Anzahl von Beiträgen und verschiedenen Beitragstypen können Sie jedoch das WP Rocket-Plugin ausprobieren. Obwohl es Sie etwas Geld kostet, können Sie eine vollständige Caching-Lösung für Ihre Site erhalten.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen