{"id":330710,"date":"2021-01-21T04:41:59","date_gmt":"2021-01-21T04:41:59","guid":{"rendered":"https:\/\/www.ezoic.com\/so-optimieren-sie-critical-css-um-ihre-webseite-schneller-zu-machen\/"},"modified":"2021-07-26T20:51:43","modified_gmt":"2021-07-26T20:51:43","slug":"so-optimieren-sie-critical-css-um-ihre-webseite-schneller-zu-machen","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/de-lang\/so-optimieren-sie-critical-css-um-ihre-webseite-schneller-zu-machen\/","title":{"rendered":"So optimieren Sie Critical CSS, um Ihre Webseite schneller zu machen"},"content":{"rendered":"

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″][et_pb_row admin_label=”Reihe” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” z_index_tablet=”500″ hover_enabled=”0″]<\/p>\n

<\/span>So optimieren Sie Critical CSS, um Ihre Webseite schneller zu machen<\/span><\/h2>\n

Haben Sie schon einmal einen Geschwindigkeitstest f\u00fcr eine Webseite durchgef\u00fchrt und festgestellt, dass die H\u00e4lfte der Dinge, die auf der Liste der zu verbessernden Dinge stehen, nicht wirklich zu beheben sind? Zum Gl\u00fcck sind Sie nicht der Einzige. Sogar gute Webentwickler haben oft Schwierigkeiten, einige der Pagespeed-Empfehlungen umzusetzen, die Google und andere Tools zum Testen der Webseiten-Geschwindigkeit ausgeben. Einer der am schwierigsten umzusetzenden Vorschl\u00e4ge ist die Optimierung von Critical CSS.<\/p>\n

Im Folgenden gehe ich darauf ein, wie Sie \u00fcber Critical CSS auf Ihrer Webseite nachdenken und diese optimieren k\u00f6nnen, damit Ihre Webseite schneller wird<\/a>. Dazu geh\u00f6rt die klassische Aufforderung von Tools, “Entfernen Sie render-blockierendes CSS below the fold”.<\/p>\n

Machen Sie sich klar, dass Pagespeed-Tools – selbst die von Google – die tats\u00e4chliche Geschwindigkeit einer Webseite<\/a> nicht wirklich gut messen k\u00f6nnen.<\/p>\n

Trotzdem hoffen Publisher oft, dass die Geschwindigkeit der Webseite selbst bei SEO helfen wird. Obwohl es \u00e4u\u00dferst unwahrscheinlich ist, dass die Verbesserung der Geschwindigkeit einer Webseite einen dramatischen Einfluss auf die Suchmaschinenoptimierung hat, ist es m\u00f6glich, dass die Besuchererfahrung durch eine schnellere Seite verbessert werden kann.<\/p>\n

Die Optimierung des Ladevorgangs von Critical CSS ist sicherlich etwas, das diese beiden Ziele verbessern kann.<\/p>\n

<\/p>\n

Weitere Tipps, wie Sie die Geschwindigkeit von WordPress Webseiten verbessern k\u00f6nnen, finden Sie hier<\/a>.<\/p>\n

Hier erhalten Sie Tipps, wie Sie das Laden von Bildern verbessern und sie in Next-Gen-Formaten ausliefern k\u00f6nnen<\/a>.<\/p>\n

\"Render-Blocking-Css-Optimierung\"<\/a><\/p>\n

<\/span>Was ist Critical CSS?<\/span><\/h2>\n

Critical CSS wird oft als “Critical CSS Rendering Path” bezeichnet, womit einfach der gesamte notwendige CSS-Code gemeint ist, der erforderlich ist, um die Webseite in einem Browser f\u00fcr den Webseitenbesucher darzustellen. Der Besucher wird oft einen wei\u00dfen Bildschirm sehen, bis die CSS-Stylesheets heruntergeladen und ausgewertet wurden. Aus diesem Grund ist die Optimierung der Auslieferung von CSS wichtig f\u00fcr die Seitengeschwindigkeit und das Besuchererlebnis. Um die Ladegeschwindigkeit einer Webseite zu verbessern, sollte nur das CSS geladen werden, das zum Laden des sichtbaren Teils einer Seite erforderlich ist. Da alle CSS gerendert werden, bedeutet dies, dass die Seite f\u00fcr den Besucher der Webseite viel schneller erscheint.<\/p>\n

Das ist der Grund, warum Pagespeed-Tools den Nutzern oft raten, render-blockierendes CSS below the fold zu entfernen. Dies bezieht sich auf CSS, das nicht ben\u00f6tigt wird, damit die Seite im Ansichtsbereich des Besuchers der Webseite richtig dargestellt wird.<\/p>\n

<\/span>Welches CSS ist “critical” und warum ist einiges davon “nicht critical”?<\/span><\/h2>\n

CSS steht f\u00fcr Cascading Style Sheets<\/em>. Mit CSS wird definiert, wie bestimmte HTML-Teile einer Webseite dargestellt werden sollen. Die Seiten werden erst gerendert, wenn das angeforderte CSS geladen ist. Seiten mit viel CSS k\u00f6nnen eine lange Ladezeit haben.<\/p>\n

CSS ist normalerweise f\u00fcr das Layout einer Webseite, die Navigationsstruktur, das Theme und vieles mehr verantwortlich. Es hilft wirklich, den Standard-Look und das Gef\u00fchl einer Webseite zu definieren.<\/p>\n

Warum ist also manches CSS “nicht critical”?<\/strong> W\u00e4re es nicht einfacher, wenn Sie alle nicht-critical CSS komplett eliminieren w\u00fcrden und sich nicht den Kopf dar\u00fcber zerbrechen m\u00fcssten, wie Sie die Auslieferung von CSS auf Ihrer Webseite optimieren k\u00f6nnen?<\/p>\n

Nun, die Sache ist so. Sie brauchen nicht das gesamte CSS f\u00fcr jede Seite oder jeden Besucher, aber Sie werden es h\u00f6chstwahrscheinlich irgendwann einmal ben\u00f6tigen. Dies ist ein Critical CSS Rendering-Pfad…<\/p>\n

\n

Zum Beispiel k\u00f6nnen sowohl eine Artikelseite als auch eine Kontaktseite<\/em> leicht unterschiedliche Elemente des CSS erfordern. F\u00fcr jemanden, der die Artikelseite besucht, sind die CSS-Elemente, die nur f\u00fcr die Kontaktseite gelten, f\u00fcr diesen Besucher nicht critical zu laden; dennoch wird dieses CSS in vielen F\u00e4llen geladen, wenn jemand zur Artikelseite navigiert, da ein Webmaster alle CSS-Dateien zum Rendern der Seite herunterladen muss.<\/p>\n<\/blockquote>\n

Sie k\u00f6nnen in diesem Beispiel sehen, dass die Webseite alle besprochenen CSS ben\u00f6tigt, aber m\u00f6glicherweise nicht alle CSS f\u00fcr jede URL oder jeden Besuch ben\u00f6tigt. Das bedeutet, dass sich die Critical CSS je nach Nutzer und Seite auf einer Webseite unterscheiden.<\/p>\n

<\/span>Wie optimieren Sie die Bereitstellung von Critical CSS?<\/span><\/h2>\n

Wie bereits erw\u00e4hnt, ist es unterschiedlich, welches CSS als critical angesehen wird. Das fehlerhafte Laden von CSS kann alle m\u00f6glichen Probleme verursachen.<\/p>\n

Da CSS ein Render-Blocker ist, f\u00fchrt das Laden aller CSS f\u00fcr jeden Besucher auf jeder Seite oft zu einer langsameren Geschwindigkeit der Webseite. Auf der anderen Seite kann eine Verz\u00f6gerung des Ladens von Critical CSS dazu f\u00fchren, dass die Seite f\u00fcr den Besucher komplett leer geladen wird<\/span><\/em>.<\/p>\n

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

Wenn CSS nicht richtig optimiert ist oder nicht korrekt asynchron geladen wird, erscheint die Webseite in der Regel als ein leerer wei\u00dfer Screen oder es fehlen Teile der Seite. Dazu geh\u00f6ren auch ungenau dargestellte Schriftarten und Seitenlayouts.<\/p>\n

Der beste Weg zur Optimierung der CSS-Auslieferung besteht darin, zu verstehen, welche Elemente critical sind, welche manchmal critical sind und welche nie critical sind.<\/p>\n

\n

Ein Beispiel f\u00fcr CSS, das immer critical ist, k\u00f6nnte die Hintergrundfarbe der Webseite sein<\/p>\n<\/blockquote>\n

Im Folgenden finden Sie eine Liste von CSS, die oft immer critical sind:<\/strong><\/p>\n