PageSpeed: JavaScript- und CSS-Ressourcen, die das Rendering blockieren

Hinweis: FĂŒr allgemeine Informationen zu Google PageSpeed Insights und warum du keine Zeit verschwenden solltest, einem „100/100“-Ergebnis hinterher zu laufen, lies bitte diesen Artikel der Dokumentation:
Google PageSpeed – Ergebnis verbessert sich nicht

Inhalt

Was heisst „JavaScript- und CSS-Dateien, die das Rendering blockieren“?

Bevor der Browser eine Webseite anzeigen kann, muss er das HTML „rendern“ (interpretieren und ausgeben). Jedesmal, wenn der Browser wĂ€hrend dieses Prozesses auf ein Element stĂ¶ĂŸt, das ein Skript oder ein Stylesheet referenziert, muss er anhalten, die referenzierte Datei abfragen, sie vom Server herunterladen und sie ausfĂŒhren, bevor er zuletzt mit dem Interpretieren des HTML-Codes weitermachen kann. Da die meisten Theme und Plugins fĂŒr WordPress nicht nur eine, sondern mehrere CSS- und JavaScript-Dateien laden, kann dieser Prozess die Zeit bis zur ersten Anzeige einer Seite im Browser deutlich verlangsamen.

Deswegen wird empfohlen, das laden von Dateien, die fĂŒr die erste Anzeige der Seite nicht kritisch notwendig sind, zu verzögern („defer“). Dies wiederum erfordert Änderungen am HTML-Quelltext der Seite selbst, sowie genaue Kenntnisse davon, welche Datei am welchen Punkt im Ladeprozess der Seite wirklich notwendig ist. Hört sich kompliziert an? Ist es auch!

Nichtsdestoweniger lassen Dienste wie Google PageSpeed Insights es so leicht klingen:

„JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten ‚above the fold‘ (ohne Scrollen sichtbar) beseitigen“

Wie so manche der Empfehlungen von PageSpeed Insights, ist auch diese sehr allgemein gehalten, und die Umsetzung kann ziemlich schwierig werden – sogar mit einem hilfreichen Plugin wie WP Rocket!

WP Rocket hat 2 Optionen, um die Empfehlung umzusetzen:

  • CSS-Darstellung optimieren
  • JavaScript verzögert laden

Du findest beide in den Einstellungen unter Datei-Optimierung→CSS-Dateien und Datei-Optimierung→JavaScript-Dateien:

Wenn du diese Einstellungen richtig konfigurierst, kann das deinen „Performance Grade“ bei PageSpeed Insights, GTmetrix oder Pingdom Tools verbessern. Das Ergebnis variiert von Website zu Website. Auch solltest du immer den Effekt auf die tatsĂ€chliche Geschwindigkeit deiner Website testen.

CSS-Darstellung optimieren

Diese Einstellung wendet die gleichnamige  PageSpeed-Empfehlung an:

Optimieren Sie die CSS-Darstellung fĂŒr die folgenden URLs 


Aufgepasst! Unser Dienst zur Erstellung von kritischem CSS erstellt noch kein spezifisches CSS fĂŒr mobile Seiten. Sofern du ein responsives Theme hast, sollte das kritische CSS weitgehend identisch sein, aber wenn du ein spezielles mobiles Theme hast, können wir dafĂŒr noch kein extra CSS generieren.

Kritisches CSS erstellen

WP Rocket macht die Handhabung von komplexen Performance-Optimierungen, wie Asynchrones und Kritisches CSS, so einfach wie möglich.

Wenn du die Option CSS-Darstellung optimieren aktivierst, wird CSS auf deiner Website asynchron geladen. ZusĂ€tzlich wird automatisch im Hintergrund das sogenannte Kritische („Critical Path“, „above the fold“) CSS erstellt und beim nĂ€chsten Seitenaufruf eingefĂŒgt.

Ein Dienst auf unseren Servern fragt den jeweils ersten Eintrag jedes öffentlichen Post Types ab (BeitrĂ€ge, Seiten, Produkte usw.), sowie öffentliche Taxonomie-Archivseiten (Kategorien, Schlagwörter, Produkt-Kategorien etc.). Das Kritische CSS fĂŒr jeden dieser Seiten-Typen wird gesondert extrahiert und der Code zurĂŒck zu WP Rocket gesendet. Das Plugin setzt den CSS-Code dann auf den entsprechenden Seiten deiner Website ein, sobald diese durch normalen Traffic oder den Preload-Vorgang im Browser aufgerufen werden.

Das von WP Rocket erstellte Kritische CSS berĂŒcksichtigt also Design-Merkmale verschiedener Seiten deiner Website. Wenn sich zum Beispiel ein Slider auf deiner Startseite befindet, wird das kritische CSS fĂŒr diese Seite den entsprechenden Code enthalten, wĂ€hrend das kritische CSS fĂŒr einen Blog-Beitrag anderen Code enthĂ€lt.

Kritisches CSS manuell (neu) erstellen

Du solltest das Kritische CSS fĂŒr deine Website jedesmal neu erstellen, wenn du CSS-Stile geĂ€ndert hast – egal, ob du dazu ein Stylesheet bearbeitest, den Customizer nutzt, oder CSS-Code in eine Theme-Option eingibst. Nutze zum erneuten Erstellen den Link in der Werkzeugleiste:

Automatisch neu erstellt wird das Kritische CSS, sobald du:
  • die Option CSS-Darstellung optimieren aktivierst;
  • das Theme wechselst.

Kritisches CSS vom WP Rocket Server – bitte beachten!

Hier ein paar Hinweise, wie unser Dienst zum Erstellen von kritischem CSS funktioniert:

  1. Deine Website muss öffentlich erreichbar sein; unser Dienst funktioniert nicht fĂŒr lokale oder durch ein Passwort geschĂŒtzte Entwicklungsumgebungen.
  2. These IPs have to be whitelisted by your server or your security plugin:
    • 54.37.31.6
    • 167.114.226.142
  3. Relative Pfade in Bild- und Schrift-URIs werden automatisch in absolute Pfade umgewandelt.
  4. Kritisches CSS wird sorgfĂ€ltig minifiziert. Erforderliche Leerzeichen (wie etwa innerhalb von calc()), oder Backslashes (wie z.B. '\f311' fĂŒr Glyphen einer Icon-Schrift) bleiben erhalten.

Automatisches Erstellen von Kritischem CSS verhindern

Wenn nötig, kannst du das automatische Generieren von Kritischem CSS bei aktivierter Option verhindern, indem du das folgende Helfer-Plugin installierst.

đŸ“„  Download (.zip): WP Rocket | No Auto-generated Critical CSS
Entwickler/-innen: Ihr findet den Code fĂŒr dieses Plugin auf GitHub.

Kritisches CSS bearbeiten

Falls du das Kritische CSS bearbeiten musst, geht das folgendermaßen:

  1. Nutze oben beschriebene Funktion zum Neu-Erstellen von Kritischem CSS.
  2. Dann deaktiviere jedes weitere automatische Neu-Erstellen mit dem eben genannten Helfer-Plugin.
  3. Die fertig erstellen CSS-Dateien findest du unter diesem Pfad in deiner WordPress-Installation: wp-content/cache/critical-css
    Mit fortgeschrittenen CSS-Kenntnissen kannst du sie direkt bearbeiten.
  4. Leere den Cache von WP Rocket.

Alternatives Kritisches CSS

Sollte unser Dienst einmal nicht in der Lage sein, Kritisches CSS fĂŒr einen bestimmten Seitentyp zu generieren, kannst du das „Notfall“-Feld fĂŒr eigenen, manuell erstellten Code nutzen. Der im Feld hinterlegte Code wird ĂŒberall dort angewendet, wo noch kein spezifisches kritisches CSS hinterlegt ist. Um dein eigenes kritisches CSS zu generieren, kannst du das  Critical Path CSS Generator Tool nutzen. Gehe dabei wie folgt vor:

  1. Deaktiviere WP Rocket bevor du anfÀngst!
  2. Gib die URL, fĂŒr die du kritisches CSS erstellen möchtest, in das Tool ein; nachdem der Vorgang beendet wurde, gib den generierte CSS-Code in das Feld Alternatives Kritisches CSS ein:

Hinweis: Das vom Generator mitgelieferte JavaScript brauchst du nicht. Kopiere einfach nur das CSS, WP Rocket kĂŒmmert sich um den JavaScript-Teil automatisch.

Aufgepasst! Falls dein CSS relative URLs enthĂ€lt (z.B. fĂŒr Hintergrundbilder, Schriften oder dergleichen), musst du diese vor dem Speichern in absolute URLs umschreiben.

Am Beispiel einer Schrift-Datei erklÀrt:

@font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);

Der relative Teil am Anfang des Pfads ( ../) fĂŒhrt außerhalb seines ursprĂŒnglichen Kontexts zu Fehlern. Daher musst du ihn mit dem richtigen absoluten Pfad der URL ersetzen, der je nach Theme oder Plugin verschieden ausfallen kann:

@font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/beispiel-theme/pfad/zu/DroidSerif-webfont.eot);

Dateien von „CSS-Darstellung optimieren“ ausschließen

Falls du eine bestimmte CSS-Datei von der Option ausschließen musst, so dass sie als Resource, die das Rendering blockiert, geladen wird, folge dieser Anleitung:
Dateien von „CSS-Darstellung optimieren“ ausschließen

JavaScript verzögert laden

Bei dieser Einstellung geht es um den PageSpeed-Tip:
JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen

Im Sinne guter Performance sollten JavaScript-Dateien am Ende der Seite, oder asynchron geladen werden, so dass sie das Laden anderer Ressourcen nicht blockieren und dadurch die Seite verlangsamen.

Wenn du diese Einstellung aktivierst, werden alle JavaScript-Dateien deiner Website (einschließlich der von WP Rocket minifizierten/zusammengefassten) mit der defer-Eigenschaft geladen:

defer-Eigenschaften des script-Elements im HTML-Quelltext

Sollte es zu Komplikationen, musst du den Sicheren Modus der Option verwenden. Dies stellt sicher, dass jQuery nicht verzögert, sondern frĂŒh am Beginn des HTML-Dokuments geladen wird:

Unter UmstĂ€nden musst du fĂŒr deine Website eine oder mehrere Dateien von der „verzögert“-Option ausschließen:
 Dateien von verzögertem JS ausschließen

Beachte, dass es in manchen FĂ€llen schlicht nicht möglich ist, sĂ€mtliches JavaScript verzögert zu laden, ohne dass es zu Fehlern auf der Seite kommt. Google PageSpeed Insights verzichtet darauf, dies zu erwĂ€hnen. Stattdessen wird jede nicht verzögert geladene Datei PageSpeed Insights dazu veranlassen, sich zu beschweren – daran ist schlicht nichts zu Ă€ndern.

Dateien, bei denen defer nicht angewendet wird

Das defer-Attribut wird nicht angewendet bei script-Elementen mit einer oder beiden der folgenden Eigenschaften:

  • async 
  • data-cfasync="false"