{"id":241245,"date":"2022-04-05T10:28:00","date_gmt":"2022-04-05T07:28:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=241245"},"modified":"2022-04-27T11:51:50","modified_gmt":"2022-04-27T08:51:50","slug":"so-optimieren-sie-die-css-bereitstellung-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-optimieren-sie-die-css-bereitstellung-in-wordpress\/","title":{"rendered":"So optimieren Sie die CSS-Bereitstellung in WordPress"},"content":{"rendered":"

Wenn Sie hier sind, liegt es wahrscheinlich daran, dass Sie diesen Hinweis im PageSpeed \u200b\u200bInsights-<\/a> Test von Google erhalten haben<\/a> :<\/p>\n

\"So<\/a><\/p>\n

W\u00e4hrend es schwierig sein kann, alle Render-Blocking-Dateien zu entfernen, ist es mit den richtigen Tools nicht so schwer.<\/p>\n

In diesem Leitfaden zeige ich Ihnen drei M\u00f6glichkeiten, Ihre Website<\/a> mit optimierter CSS-Bereitstellung zu beschleunigen<\/a>. Es gibt Optionen sowohl f\u00fcr WordPress-Neulinge als auch f\u00fcr Entwickler, die hier enthalten sind.<\/p>\n

Fangen wir von oben an \u2013 was genau bedeutet es, die Bereitstellung von CSS auf Ihrer WordPress-Site zu optimieren?<\/p>\n

Was bedeutet "CSS-Lieferung optimieren"?<\/h2>\n

Lassen Sie mich zuerst ganz klar sagen, was ich meine.<\/p>\n

CSS-Dateien werden zum Stylen von Webseiten verwendet<\/a>. Jedes WordPress-Theme l\u00e4dt eine style.css-Datei und Sie haben wahrscheinlich eine Handvoll zus\u00e4tzlicher Stylesheets (CSS-Dateien), die von Plugins hinzugef\u00fcgt werden. Wenn Sie beispielsweise ein Plugin haben, das ein neues Widget hinzuf\u00fcgt, muss es ein anderes Stylesheet laden, um dieses Widget zu gestalten.<\/p>\n

Alle CSS-Dateien werden geladen, bevor Ihre Website gerendert wird.<\/strong><\/p>\n

Das bedeutet, dass Besucher bis dahin einen leeren wei\u00dfen Bildschirm sehen. Hier ist nun die Sache\u2026<\/p>\n

Der Gro\u00dfteil des geladenen CSS wird nicht f\u00fcr die Seite ben\u00f6tigt, auf der sich der Besucher befindet, und noch weniger f\u00fcr das, was er sofort sehen kann. Warum sollten sie beispielsweise warten, w\u00e4hrend Stile f\u00fcr die Fu\u00dfzeile geladen werden? Es wird wahrscheinlich mindestens ein paar Sekunden dauern, bis sie es sehen (falls sie es jemals tun).<\/p>\n

Indem wir unsere CSS-Dateien zur\u00fcckstellen oder asynchron laden, k\u00f6nnen wir erm\u00f6glichen, dass die Site im Browser des Besuchers angezeigt wird, bevor die Stylesheets fertig geladen sind.<\/p>\n

In diesem Leitfaden werde ich drei verschiedene Ans\u00e4tze vorstellen, um Ihre Stylesheets zu verschieben und Ihre CSS-Bereitstellung zu optimieren.<\/p>\n

Optimierte kritische Rendering-Pfade in Aktion<\/h3>\n

Wenn Sie die Compete Themes-Homepage<\/a> besuchen, achten<\/a> Sie beim Laden der Site auf die Ladeanzeige im Browser-Tab. Sie werden feststellen, dass sich die Ladeanzeige noch einen Moment l\u00e4nger dreht, nachdem die Site sichtbar und geladen zu sein scheint.<\/p>\n

Das ist ein Beispiel daf\u00fcr, wie eine optimierte CSS-Bereitstellung in der Praxis aussieht.<\/p>\n

Wenn Sie ein Beispiel f\u00fcr einen stark optimierten kritischen Rendering-Pfad<\/a> sehen m\u00f6chten, besuchen Sie Amazon. Die gesamte Site wird nicht auf einmal geladen. Stattdessen sehen Sie innerhalb weniger Sekunden dank des sorgf\u00e4ltig optimierten Rendering-Pfads verschiedene Elemente auf der Seite.<\/p>\n

1 WP-Rakete<\/h2>\n

Ich verwende das WP Rocket-<\/a> Plugin hier bei Compete Themes und empfehle es vor allen anderen L\u00f6sungen zur kritischen Rendering-Pfadoptimierung.<\/p>\n

Die Optimierung Ihrer CSS-Bereitstellung mit WP Rocket k\u00f6nnte wirklich nicht einfacher sein. Im Men\u00fc Dateioptimierung gibt es ein Kontrollk\u00e4stchen, um diese Funktion zu aktivieren.<\/p>\n

\"So<\/a><\/p>\n

Nach der \u00dcberpr\u00fcfung 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\u00fcckgestellt w\u00fcrde, w\u00fcrde Ihre Site schrecklich aussehen, bis sie geladen wurde, und die WP Rocket-Entwickler haben dies mit ihrem Plugin elegant angegangen.<\/p>\n

Wenn Sie diese Option aktivieren, findet WP Rocket automatisch das CSS, das ben\u00f6tigt wird, um die Teile Ihrer Website zu gestalten, die Besucher beim Laden Ihrer Website sehen, und dieser Code wird dem Dokument inline hinzugef\u00fcgt.<\/p>\n

Mit anderen Worten, Ihre Site wird schneller im Browser angezeigt und scheint vollst\u00e4ndig geladen zu sein, w\u00e4hrend das verz\u00f6gerte CSS dann in den n\u00e4chsten ein oder zwei Sekunden geladen wird.<\/p>\n

Dies ist meiner Meinung nach die mit Abstand beste L\u00f6sung, um die CSS-Bereitstellung mit WordPress zu optimieren.<\/p>\n

WP Rocket ist ein Premium-Plugin, aber wenn Sie durch schnellere Ladezeiten mehr Einnahmen mit Ihrer Site erzielen, w\u00fcrde ich es definitiv in Betracht ziehen, es f\u00fcr Ihre Site zu verwenden. Ich habe einen viel detaillierteren Blick auf WP Rocket, den<\/a> Sie lesen k\u00f6nnen, wenn Sie mehr erfahren m\u00f6chten. Andernfalls k\u00f6nnen Sie ihre Website hier besuchen<\/a>.<\/p>\n

2 Autooptimieren<\/h2>\n

Der zweite Ansatz, den ich empfehlen w\u00fcrde, ist das Autoptimize-<\/a> Plugin.<\/p>\n

\"So<\/a><\/p>\n

Dieses funktionsreiche Leistungs-Plugin bietet einige Ans\u00e4tze zur Optimierung der CSS-Bereitstellung. Die einfachste M\u00f6glichkeit besteht darin, das gesamte CSS einfach einzubinden. Dadurch wird das gesamte in Ihren Stylesheets gefundene CSS direkt in das Seitendokument eingef\u00fcgt, sodass keine Stylesheets geladen werden.<\/p>\n

Um diese Option zu finden, m\u00fcssen Sie oben auf die Schaltfl\u00e4che Erweiterte Einstellungen anzeigen klicken.<\/p>\n

\"So<\/a><\/p>\n

Sie sehen dann die Option zum Inline aller CSS.<\/p>\n

\"So<\/a><\/p>\n

Diese Option kann zwar die Leistung verbessern, aber wenn Sie dem Seitendokument zu viel CSS hinzugef\u00fcgt haben, kann sie stattdessen Ihre Website verlangsamen. Es kann sich lohnen, damit zu experimentieren.<\/p>\n

Ansonsten ist es ein netter Ansatz, stattdessen die Option Inline und Defer CSS zu aktivieren. Dadurch werden alle Stylesheets zur\u00fcckgestellt und nur das kritische CSS eingebunden. Es findet jedoch nicht automatisch das kritische CSS f\u00fcr Sie wie WP Rocket.<\/p>\n

Wie erhalten Sie dann das kritische CSS Ihrer Website? Selbst f\u00fcr einen erfahrenen WP-Entwickler kann dies eine Art Kopfzerbrechen sein.<\/p>\n

Obwohl ich dieses Tool nicht selbst auf Zuverl\u00e4ssigkeit getestet habe, w\u00e4re dieses kostenlose Critical Path CSS Generator-<\/a> Tool ein praktikabler Ansatz. Geben Sie die URL Ihrer Website ein und es wird das CSS zur\u00fcckgegeben, das Sie unbedingt laden m\u00fcssen.<\/p>\n

Sie k\u00f6nnen diesen Code dann kopieren und in das CSS-Feld des kritischen Pfads in Autoptimize einf\u00fcgen.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie diesen Ansatz verwenden, m\u00fcssen Sie m\u00f6glicherweise zus\u00e4tzliches CSS f\u00fcr verschiedene Seiten Ihrer Website hinzuf\u00fcgen, und es kann erforderlich sein, dass Sie das CSS Ihres Themes sehr gut kennen, um ein konsistentes Styling zu gew\u00e4hrleisten.<\/p>\n

Ein anderer Ansatz<\/h3>\n

Es gibt ein Plugin namens Autoptimize Criticalcss.com power-up<\/a>. Es ist ein ziemlicher Bissen, aber dieses zus\u00e4tzliche Plugin erm\u00f6glicht es Ihnen, das kritische CSS Ihrer Website mit dem Dienst Criticalcss.com<\/a> automatisch zu generieren .<\/p>\n

Um diese Option nutzen zu k\u00f6nnen, m\u00fcssen Sie sich bei CriticalCSS f\u00fcr ein kostenpflichtiges Konto anmelden.<\/p>\n

3 Beschleunigung<\/h2>\n

Diese letzte Option ist sehr schnell und f\u00fcr einen WordPress-Entwickler einfach zu implementieren.<\/p>\n

Speed \u200b\u200bUp<\/a> ist ein leichtgewichtiges Plugin, mit dem Sie alle nicht kritischen Stylesheets zur\u00fcckstellen k\u00f6nnen.<\/p>\n

\"So<\/a><\/p>\n

Dies wird Ihre CSS-Bereitstellung zwar nicht vollst\u00e4ndig optimieren, aber hilfreich sein.<\/p>\n

Nehmen wir an, Ihr Theme f\u00fcgt ein Stylesheet hinzu und dann gibt es f\u00fcnf weitere Stylesheets, die von Plugins hinzugef\u00fcgt werden. Wenn nur das Theme-Stylesheet geladen werden muss, bevor die Site angezeigt wird, k\u00f6nnen Sie die anderen f\u00fcnf zur\u00fcckstellen.<\/p>\n

Speed \u200b\u200bUp bietet Ihnen einen einfachen Filter, den Sie der Datei functions.php (oder einem Plugin) eines Child-Themes hinzuf\u00fcgen k\u00f6nnen, um beliebige Stylesheets zur\u00fcckzustellen. Sie ben\u00f6tigen lediglich die Handles jedes zu ladenden Stylesheets. Hier finden Sie einige einfache Funktionen,<\/a> um die Handles aller registrierten Stylesheets auf Ihrer Site auszugeben.<\/p>\n

Auch dies wird f\u00fcr einen Entwickler schnell und einfach sein, aber ich w\u00fcrde diese L\u00f6sung nicht empfehlen, wenn Sie keinen Code schreiben.<\/p>\n

Abschluss<\/h2>\n

Ich hoffe, Sie haben in diesem Beitrag ein oder zwei Dinge \u00fcber die Leistungsoptimierung<\/a> von WordPress<\/a> gelernt .<\/p>\n

Obwohl jede der drei oben genannten L\u00f6sungen gut funktionieren kann, muss ich dem WP Rocket-Plugin<\/a> einen letzten Gru\u00df aussprechen<\/a>. Als Blogger und WordPress-Theme-Entwickler finde ich es so einfach und schmerzlos, damit zu arbeiten.<\/p>\n

Wenn Sie weitere Tipps zur Beschleunigung Ihrer Website w\u00fcnschen, k\u00f6nnte Ihnen dieser Leitfaden zur Bildoptimierung<\/a> oder mein WP Engine-Test<\/a> gefallen , auf<\/a> den sich Compete Themes f\u00fcr schnelle Ladezeiten verlassen.<\/p>\n

Aufnahmequelle: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Erfahren Sie, wie Sie Ihre WordPress-Site mit einem dieser drei Ans\u00e4tze zur Optimierung der CSS-Bereitstellung beschleunigen k\u00f6nnen. Einsteiger- und Fortgeschrittenen-Tipps im Inneren.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[580,660,649,607],"tags":[845],"class_list":["post-241245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beschleunige-wordpress","category-freiberuflich","category-wie-macht-man","category-uncategorized-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/241245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=241245"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/241245\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=241245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=241245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=241245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}