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

Ein Problem mit Google PageSpeed Insights ist, dass manche seiner Vorschläge entweder unmöglich, oder unrealistisch sind.

Eine häufige Empfehlung lautet beispielsweise:

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

WP Rocket hat 2 Optionen, um diese Empfehlung umzusetzen.
Du findest beide in den Einstellungen unter Statische Dateien→Render-blocking CSS/JS:

Optionen „CSS-Darstellung optimieren“ und „JS-Dateien verzögert laden“

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.


JS-Dateien 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:

Sichere Modus für verzögertes JS sorgt dafür, dass jQuery nicht verzögert 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 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.

Veraltete Einstellungen: Falls du vor WP Rockt 2.10 die Erweiterten Einstellungen „JavaScript-Dateien, die verzögert geladen werden sollen“ or „JavaScript-Dateien nach dem Minifizieren in den Footer verschieben“, wirst du diese Optionen in WP Rocket 2.10.x immer noch vorfinden. Sie werden jedoch in Zukunft entfernt und durch die beiden hier beschriebenen Optionen ersetzt werden.

CSS-Darstellung optimieren

Diese Einstellung wendet die gleichnamige  PageSpeed-Empfehlung an.

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.

Unser externer Dienst 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 ein, sobald diese durch Besucher/-innen 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:

Link in der Admin-Werkzeugleiste: Kritisches CSS erstellen

Critical Path CSS Generator: so funktioniert der Dienst

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. Relative Pfade in Bild- und Schrift-URIs werden automatisch in absolute Pfade umgewandelt.
  3. 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.

Kritisches CSS für den Notfall

Hinweis: Dieser Schritt ist nur notwendig, wenn das Erstellen von kritischem CSS mit einer Fehlermeldung endet. Zum Beispiel: Critical CSS for front_page not generated.

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  dieses 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 Kritisches CSS für den Notfall ein:

Textfeld mit Fallback-CSS

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/neutro/font/droid_serif_regular/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