Was ist Rendering blockierendes Javascript?
Javascript kann das Rendering einer Webseite blockieren. Rendering blockierendes Javascript verzögert die Sichtbarkeit von Inhalten.
Deine Webseite kann nicht so schnell geladen werden, wie es eigentlich möglich wäre.
Rendering blockierendes Javascript identifizieren
Der ohne Scrollen sichtbare Teil Deiner Webseite sollte so schnell wie möglich geladen werden. Diesen Teil Deiner Webseite nennt man auch “above the fold”, da der obere Teil, abgeleitet von einer Zeitung, auch im gefalteten Zustand sichtbar ist.
Wenn nun PageSpeed Insights folgende Meldung anzeigt:
JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen.
ist es möglich, dass Rendering blockierendes Javascript dafür verantwortlich ist.
Dies kannst Du aber herausbekommen indem Du auf den Link “Fehlerbehebung anzeigen” unter der Fehlermeldung klickst. Jetzt werden mämlich die Details zu diesem Fehler angezeigt.
Sollte es dort eine hervorgehobene Zeile mit folgendem Inhalt geben liegt ein Problem mit Rendering blockierendem Javascript vor.
“Ihre Seite enthält 1 blockierende Skript-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite.”
Darunter steht dann noch wieviel Prozent Deiner Webseite ohne Wartezeit geladen werden konnte.
Ganz am Ende der Details zur Fehlerbehebung ist(sind) noch die Ressource(n) aufgeführt die das Rendering blockieren. Dies ist eine wichtige Information die du dir merken solltest.
Da Google sehr viel Wert auf eine schnelle Webseite und insbesondere des Ladens der Inhalte “above the fold” legt, sollte ein Problem mit Rendering blockierendem Javascript so schnell wie möglich behoben werden.
Im anderen Fall könnte Deine Webseite im Google Ranking benachteiligt werden. Insbesondere bei der mobilen Suche.
Ursachen von Rendering blockierendem Javascript
Kommen wir gleich zur häufigsten Ursache für Rendering blockierendes JavaScript.
Und zwar handelt es sich dabei um das Javascript Framework “jQuery”.
jQuery ist das am häufigsten genutzte Javascript Framework (nach Vanilla.js :-)) und wird somit bei einem Großteil der Webseiten verwendet.
Wenn Du, wie im letzten Kapitel beschrieben, deine Webseite mit PageSpeed Insights getestet und dir auch die Details zur Fehlerbehebung anzeigen lassen hast, wirst du wissen ob bei dir jQuery für Rendering blockierendes Javascript verantwortlich ist.
Die jQuery Javascript-Datei ist in der Regel sehr groß. Manchmal auch größer als alle anderen Elemente deiner Webseite zusammen.
Eine große Javascript Datei verzögert das Laden Deiner Webseite natürlich mehr als eine kleine, da der Inhalt der Datei ja erstmal heruntergeladen werden muss, bevor man ihn verwenden kann.
Ich möchte jetzt nicht darüber philosphieren ob der Einsatz von jQuery in jedem Fall notwendig ist. Das muss jeder selbst entscheiden.
Wenn es aber nur darum geht Elemente Ein- oder Auszublenden oder ähnliche einfache Dinge zu tun kann man das mit nativem Javascript effizienter umsetzen.
In den meisten Fällen ist es ausreichend wenn jQuery erst geladen wird wenn der “above the fold” Bereich bereits rerendert wurde.
Sollte dies bei Dir nicht funktionieren, müsstest du dir Gedanken machen wie du deine Webseite so umbauen kannst, dass jQuery Funktionalitäten erst zu einem späteren Zeitpunkt notwendig sind.
Rendering blockierendes Javascript entfernen
Einbindung von Javascript Dateien optimieren
Es gibt einige Möglichkeiten Javascript Code in eine Website einzubinden. Im folgenden führe ich die 4 gebräuchlisten Methoden auf.
1. HTML-Element “script” innerhalb des head Elements
Die sicherlich schlechteste Lösung ist es Javascript Dateien im Kopf des HTML-Dokuments auf folgende Weise einzubinden.
Für HTML5:
1
2
3
4
5
<head>
<!-- Code davor -->
<script src="jquery.js"></script>
<!-- Code danach -->
</head>
Für HTML4 / XHTML:
1
2
3
4
5
<head>
<!-- Code davor -->
<script src="jquery.js" type="text/javascript"></script>
<!-- Code danach -->
</head>
Was passiert wenn die Webseite von Deinem Browser geladen wird?
Nachdem der Request Header gesendet und der Response Header empfangen wurde, wird der Inhalt des HTML-Dokuments verarbeitet.
Da der Browser dabei bereits im Head Bereich des Dokuments auf eine externe Ressource stößt, muss er diese erst herunterladen bevor er die Verarbeitung fortsetzen kann.
Das Rendering wird also blockiert!
2. HTML-Element “script” am Ende des Body Elements
Deshalb sieht man im Quelltext vieler Webseiten folgende Lösung, bei der das Script Element ans Ende des Body Elements platziert wird.
Für HTML5:
1
2
3
4
<body>
<!-- Code davor -->
<script src="jquery.js"></script>
</body>
Für HTML4 / XHTML:
1
2
3
4
<body>
<!-- Code davor -->
<script src="jquery.js" type="text/javascript"></script>
</body>
Der Vorteil dieser Lösung ist, dass die Abarbeitung des Quellcodes über dem Javascript Code störungsfrei durchgeführt werden kann. Scriptfehler können die Abarbeitung nicht behindern.
Aber bevor die Abarbeitung beendet werden kann muss der Browser trotzdem, wenn auch spät, die Javascript Datei herunterladen und abarbeiten.
Der “above the fold” Teil kann auch hier nicht vorher gerendert werden.
Es handelt sich auch hier wieder um Rendering blockierendes Javascript!
3. HTML-Element “script” mit dem Attribut “async”
Mit dieser Methode kommen wir unserem Ziel ein Stückchen näher.
Nur für HTML5:
1
2
3
4
5
<head>
<!-- Code davor -->
<script src="jquery.js" async></script>
<!-- Code danach -->
</head>
Es handelt sich hierbei um das asynchrone Laden von Javascript Dateien.
Die aktuellen, modernen Browser unterstützen das Attribut async bereits seit einiger Zeit. Allerdings wird nur HTML5 unterstützt!
Aufzupassen gilt es nur beim Internet Explorer, da dort die Unterstützung erst mit dem IE 10 verfügbar ist.
Der Vorteil dieser Methode ist, dass das Parsen des HTML Codes nicht unterbrochen werden muss wenn die Javascript Datei heruntergeladen wird.
Allerdings kann dieser Vorgang auch hier nicht störungsfrei ablaufen, da der Vorgang des Parsens unterbrochen werden muss wenn die Javascript Datei ausgeführt wird.
Auch hier wieder ein eindeutiger Fall von Rendering blockierendem Javascript!
4. HTML-Element “script” mit dem Attribut “defer”
Da die Browser Hersteller die Misere inzwischen erkannt haben, gibt es seit kurzem noch ein weiteres Attribut für das Script-Element - defer.
Nur für HTML5:
1
2
3
4
5
<head>
<!-- Code davor -->
<script src="jquery.js" defer></script>
<!-- Code danach -->
</head>
Javascript Dateien die mit diesem Attribut eingebunden werden warten ab bis der DOM vollständig geladen wurden.
Erst dann wird die Javascript Datei geladen und ausgeführt.
Das Rendering wird hier also nicht blockiert!
Allerdings unterstützen diese Technik noch lange nicht alle Browser und wenn dann teilweise nur fehlerhaft.
Verschiebe Rendering blockierendes Javascript
Die einzige verbleibende Lösung ist also Rendering blockierendes Javascript komplett so zu verschieben, dass das Rendering nicht gestört wird.
Da dies mit den eingebauten Methoden des Browsers nicht sicher möglich ist, muss man hier manuell eingreifen.
Eine Anleitung dazu gebe ich in dem Artikel Javascript verzögert laden.
Quellen:
async vs defer attributes - Growing with the Web
JavaScript-Code entfernen, der das Rendern blockiert - Google Developers
Render-blocking javascript | How to remove it