So optimieren Sie die CSS-Bereitstellung in WordPress
Wenn Sie hier sind, liegt es wahrscheinlich daran, dass Sie diesen Hinweis im PageSpeed Insights- Test von Google erhalten haben :
Während es schwierig sein kann, alle Render-Blocking-Dateien zu entfernen, ist es mit den richtigen Tools nicht so schwer.
In diesem Leitfaden zeige ich Ihnen drei Möglichkeiten, Ihre Website mit optimierter CSS-Bereitstellung zu beschleunigen. Es gibt Optionen sowohl für WordPress-Neulinge als auch für Entwickler, die hier enthalten sind.
Fangen wir von oben an – was genau bedeutet es, die Bereitstellung von CSS auf Ihrer WordPress-Site zu optimieren?
Was bedeutet "CSS-Lieferung optimieren"?
Lassen Sie mich zuerst ganz klar sagen, was ich meine.
CSS-Dateien werden zum Stylen von Webseiten verwendet. Jedes WordPress-Theme lädt eine style.css-Datei und Sie haben wahrscheinlich eine Handvoll zusätzlicher Stylesheets (CSS-Dateien), die von Plugins hinzugefügt werden. Wenn Sie beispielsweise ein Plugin haben, das ein neues Widget hinzufügt, muss es ein anderes Stylesheet laden, um dieses Widget zu gestalten.
Alle CSS-Dateien werden geladen, bevor Ihre Website gerendert wird.
Das bedeutet, dass Besucher bis dahin einen leeren weißen Bildschirm sehen. Hier ist nun die Sache…
Der Großteil des geladenen CSS wird nicht für die Seite benötigt, auf der sich der Besucher befindet, und noch weniger für das, was er sofort sehen kann. Warum sollten sie beispielsweise warten, während Stile für die Fußzeile geladen werden? Es wird wahrscheinlich mindestens ein paar Sekunden dauern, bis sie es sehen (falls sie es jemals tun).
Indem wir unsere CSS-Dateien zurückstellen oder asynchron laden, können wir ermöglichen, dass die Site im Browser des Besuchers angezeigt wird, bevor die Stylesheets fertig geladen sind.
In diesem Leitfaden werde ich drei verschiedene Ansätze vorstellen, um Ihre Stylesheets zu verschieben und Ihre CSS-Bereitstellung zu optimieren.
Optimierte kritische Rendering-Pfade in Aktion
Wenn Sie die Compete Themes-Homepage besuchen, achten Sie beim Laden der Site auf die Ladeanzeige im Browser-Tab. Sie werden feststellen, dass sich die Ladeanzeige noch einen Moment länger dreht, nachdem die Site sichtbar und geladen zu sein scheint.
Das ist ein Beispiel dafür, wie eine optimierte CSS-Bereitstellung in der Praxis aussieht.
Wenn Sie ein Beispiel für einen stark optimierten kritischen Rendering-Pfad sehen möchten, besuchen Sie Amazon. Die gesamte Site wird nicht auf einmal geladen. Stattdessen sehen Sie innerhalb weniger Sekunden dank des sorgfältig optimierten Rendering-Pfads verschiedene Elemente auf der Seite.
1 WP-Rakete
Ich verwende das WP Rocket- Plugin hier bei Compete Themes und empfehle es vor allen anderen Lösungen zur kritischen Rendering-Pfadoptimierung.
Die Optimierung Ihrer CSS-Bereitstellung mit WP Rocket könnte wirklich nicht einfacher sein. Im Menü Dateioptimierung gibt es ein Kontrollkästchen, um diese Funktion zu aktivieren.
Nach der Überprüfung verschiebt WP Rocket automatisch alle Ihre Stylesheets, sodass sie erst geladen werden, nachdem die Site im Browser des Besuchers angezeigt wird. Wenn nun das gesamte CSS zurückgestellt würde, würde Ihre Site schrecklich aussehen, bis sie geladen wurde, und die WP Rocket-Entwickler haben dies mit ihrem Plugin elegant angegangen.
Wenn Sie diese Option aktivieren, findet WP Rocket automatisch das CSS, das benötigt wird, um die Teile Ihrer Website zu gestalten, die Besucher beim Laden Ihrer Website sehen, und dieser Code wird dem Dokument inline hinzugefügt.
Mit anderen Worten, Ihre Site wird schneller im Browser angezeigt und scheint vollständig geladen zu sein, während das verzögerte CSS dann in den nächsten ein oder zwei Sekunden geladen wird.
Dies ist meiner Meinung nach die mit Abstand beste Lösung, um die CSS-Bereitstellung mit WordPress zu optimieren.
WP Rocket ist ein Premium-Plugin, aber wenn Sie durch schnellere Ladezeiten mehr Einnahmen mit Ihrer Site erzielen, würde ich es definitiv in Betracht ziehen, es für Ihre Site zu verwenden. Ich habe einen viel detaillierteren Blick auf WP Rocket, den Sie lesen können, wenn Sie mehr erfahren möchten. Andernfalls können Sie ihre Website hier besuchen.
2 Autooptimieren
Der zweite Ansatz, den ich empfehlen würde, ist das Autoptimize- Plugin.
Dieses funktionsreiche Leistungs-Plugin bietet einige Ansätze zur Optimierung der CSS-Bereitstellung. Die einfachste Möglichkeit besteht darin, das gesamte CSS einfach einzubinden. Dadurch wird das gesamte in Ihren Stylesheets gefundene CSS direkt in das Seitendokument eingefügt, sodass keine Stylesheets geladen werden.
Um diese Option zu finden, müssen Sie oben auf die Schaltfläche Erweiterte Einstellungen anzeigen klicken.
Sie sehen dann die Option zum Inline aller CSS.
Diese Option kann zwar die Leistung verbessern, aber wenn Sie dem Seitendokument zu viel CSS hinzugefügt haben, kann sie stattdessen Ihre Website verlangsamen. Es kann sich lohnen, damit zu experimentieren.
Ansonsten ist es ein netter Ansatz, stattdessen die Option Inline und Defer CSS zu aktivieren. Dadurch werden alle Stylesheets zurückgestellt und nur das kritische CSS eingebunden. Es findet jedoch nicht automatisch das kritische CSS für Sie wie WP Rocket.
Wie erhalten Sie dann das kritische CSS Ihrer Website? Selbst für einen erfahrenen WP-Entwickler kann dies eine Art Kopfzerbrechen sein.
Obwohl ich dieses Tool nicht selbst auf Zuverlässigkeit getestet habe, wäre dieses kostenlose Critical Path CSS Generator- Tool ein praktikabler Ansatz. Geben Sie die URL Ihrer Website ein und es wird das CSS zurückgegeben, das Sie unbedingt laden müssen.
Sie können diesen Code dann kopieren und in das CSS-Feld des kritischen Pfads in Autoptimize einfügen.
Wenn Sie diesen Ansatz verwenden, müssen Sie möglicherweise zusätzliches CSS für verschiedene Seiten Ihrer Website hinzufügen, und es kann erforderlich sein, dass Sie das CSS Ihres Themes sehr gut kennen, um ein konsistentes Styling zu gewährleisten.
Ein anderer Ansatz
Es gibt ein Plugin namens Autoptimize Criticalcss.com power-up. Es ist ein ziemlicher Bissen, aber dieses zusätzliche Plugin ermöglicht es Ihnen, das kritische CSS Ihrer Website mit dem Dienst Criticalcss.com automatisch zu generieren .
Um diese Option nutzen zu können, müssen Sie sich bei CriticalCSS für ein kostenpflichtiges Konto anmelden.
3 Beschleunigung
Diese letzte Option ist sehr schnell und für einen WordPress-Entwickler einfach zu implementieren.
Speed Up ist ein leichtgewichtiges Plugin, mit dem Sie alle nicht kritischen Stylesheets zurückstellen können.
Dies wird Ihre CSS-Bereitstellung zwar nicht vollständig optimieren, aber hilfreich sein.
Nehmen wir an, Ihr Theme fügt ein Stylesheet hinzu und dann gibt es fünf weitere Stylesheets, die von Plugins hinzugefügt werden. Wenn nur das Theme-Stylesheet geladen werden muss, bevor die Site angezeigt wird, können Sie die anderen fünf zurückstellen.
Speed Up bietet Ihnen einen einfachen Filter, den Sie der Datei functions.php (oder einem Plugin) eines Child-Themes hinzufügen können, um beliebige Stylesheets zurückzustellen. Sie benötigen lediglich die Handles jedes zu ladenden Stylesheets. Hier finden Sie einige einfache Funktionen, um die Handles aller registrierten Stylesheets auf Ihrer Site auszugeben.
Auch dies wird für einen Entwickler schnell und einfach sein, aber ich würde diese Lösung nicht empfehlen, wenn Sie keinen Code schreiben.
Abschluss
Ich hoffe, Sie haben in diesem Beitrag ein oder zwei Dinge über die Leistungsoptimierung von WordPress gelernt .
Obwohl jede der drei oben genannten Lösungen gut funktionieren kann, muss ich dem WP Rocket-Plugin einen letzten Gruß aussprechen. Als Blogger und WordPress-Theme-Entwickler finde ich es so einfach und schmerzlos, damit zu arbeiten.
Wenn Sie weitere Tipps zur Beschleunigung Ihrer Website wünschen, könnte Ihnen dieser Leitfaden zur Bildoptimierung oder mein WP Engine-Test gefallen , auf den sich Compete Themes für schnelle Ladezeiten verlassen.