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

Hinweis: Für allgemeine Informationen zu PageSpeed Insights und warum du keine Zeit verschwenden solltest, einem „score“ 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 hta 2 Optionen, um diese Empfehlung umzusetzen.
Du findest beide in den Einstellungen unter Statische Dateien→Render-blocking CSS/JS:

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

Wenn du diese Einstellungen richtig konfigurierst, kann das deinen „Performance Grade“ bei PageSpeed Insights, GT Metrix 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-Dateien asynchron laden

WP Rocket’s option to load CSS files asynchronously addresses the PageSpeed recommendation:

CSS-Darstellung optimieren

Aufgepasst! Dies ist eine Option für Fortgeschrittene. Eventuell sind manuelle Anpassungen erforderlich.

CSS asynchron zu laden bedeutet, dass eine Seite zunächst ohne CSS-Stile sichtbar wird. Das kann für einen Moment lang etwas seltsam aussehen:

Flash of unstyled content

Das Phänomen heisst „FOUC“”: Flash of un-styled content. Um es zu vermeiden, musst du sogenanntes Critical Path CSS einsetzen: Die CSS-Regeln für den Beginn deiner Seite müssen direkt ins HTML eingesetzt werden, um den FOUC zu verhindern und den zuerst sichtbaren Teil der Seite mit den korrekten Stilen zu laden.

„Critical Path CSS“ generieren

Um den erforderlichen Teil aller CSS-Regeln zu ermitteln und aus den Stylesheets zu extrahieren, kannst du einen Critical Path CSS Generator nutzen:

1
Deaktiviere WP Rocket auf deiner Website, bevor du den Generator nutzt!
2
Gib deine URL in den Generator ein und kopiere das extrahierte CSS in das Feld „Critical path CSS“ in WP Rocket:
Textfeld für kritisch erforderliches CSS zur Vermeidung des FOUC 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);

Falls du eine bestimmte CSS-Datei von der asynchron-Option ausschließen musst, folge dieser Anleitung:
 Dateien von asynchronem CSS ausschließen