Defer Parsing Javascript

Viele Webseitenbetreiber, ganz gleich ob mit CMS wie Wordpress oder ohne, können einen Vorteil daraus ziehen, Javascript möglichst am Ende des Codes der Website zu platzieren und damit das Parsen des Codes seitens des Webbrowsers zu verzögern. Das Resultat: wichtige Inhalte können schneller geladen werden.

In der Regel ist der Performancevorteil durch das verzögerte Parsen von Javascript-Code guten Webentwicklern bekannt. Die meisten stoßen auf diese Optimierungsmöglichkeit über ein Speed Testing Tool wie beispielsweise GTmetrix oder Google PageSpeed Insights und hier über die Meldung „Defer Parsing of Javascript“.

Was das bedeutet, warum es nicht immer ausnahmslos möglich ist und welche Varianten es gibt, eine Website dahingehend zu optimieren erfahrt ihr in unserem heutigen Artikel.

Was bedeutet es, Javascript „am Ende zu parsen“?

Zuerst einmal – bitte nicht mit dem Thema “Render Blocking JavaScript verwechseln” denn dies handelt zwar auch von der Optimierung von JavaScript aber beschreibt noch einmal eine weitere Form der Optimierung.

Genaugenommen bedeutet die englische Begrifflichkeit „Defer Parsing of Javascript“ etwas wie „Javascript-Parsing verspäten“. Gemeint ist damit, dass der Browser den im Code einer Website enthaltenen Javascript-Code verspätet bzw. möglichst am Ende parst und damit ausführt.

Nimmt man es noch genauer, hat man als Webentwickler bzw. Webseitenbetreiber prinzipiell keinen Einfluss darauf, wann genau der Browser des Nutzers den eigenen Javascript Code ausführt – einfach deshalb, weil man keinen direkten Einfluss über den Browser hat. Allerdings gehen alle Browser beim Parsen des Codes einer Website sehr ähnlich vor.

Hier erkläre ich euch einmal kurz das grundsätzliche Prinzip:

Wenn deine Webseite von einem Besucher aufgerufen wird wird der Inhalt/Code einer Seite von oben nach unten durch den Browser abgearbeitet um die Inhalte der Seite entsprechend darzustellen.

Sie werden nun „geparst“ bzw. „gelesen“. Im Prinzip geht der Browser dabei Zeile für Zeile den Code durch und führt die darin gelisteten Befehle aus. Was in der Tiefe passiert ist gar nicht weiter von Belang – wichtig ist aber zu wissen, dass der Browser beim Nachladen von Javascript-Code wartet, bis er zum nächsten Befehl übergeht. Das gilt zumindest für den bekannten Befehl zur Einbettung von Javascript: <script>

Das bedeutet: Stehen am Anfang des Quellcodes viele nachzuladende Javascripte, verzögert sich die Zeit, bis die tatsächlichen Inhalte wie beispielsweise der Beitragstext und im schlimmsten Fall sogar die Struktur der Seite geladen werden. Das führt zu längeren Ladezeiten und damit indirekt zu einer negativen Beeinflussung der Nutzererfahrung was sich auch negativ auf die Rankings deiner Webseite auswirken kann.

Wie kannst du feststellen ob deine Webseite JavaScript nicht optimal lädt?

Wie bereits erwähnt lässt sich dies gut über Tools wie GTmetrix, Pingdom oder Google Page Speed Insights feststellen.

Am Beispiel von GTmetrix sieht das Ganze dann wie folgt aus:

Die Frage ist nun – wie lässt sich das verbessern?

Folgende 2 Methoden gibt es, um das Parsing von Javascript zu verzögern

1. Async
2. Defer

Script asynchron laden

Mit async wird es dem Browser möglich gemacht Scripte und Daten der Webseite (html/CSS und Co) parallel zu laden.

Das Resultat ist natürlich Zeitersparnis.

Der Nachteil von async ist aber dass nachdem ein Script geladen wurde, dieses auch kurz vom Browser “interpretiert” werden muss. Dies führt zu einer kurzen Pause.

Scripte mit “defer” verzögert laden

Das Attribut defer wiederum verzögert die Ausführung des parallel zum HTML-Parsing heruntergeladenen Skripts, bis das HTML-Parsing zu Ende ist. Die Reihenfolge, in der die Skripte ausgeführt werden, bleibt dabei bestehen.

Javascript Parsing in Wordpress verzögern

Natürlich wollen wir dieses Thema nun auch speziell für das Thema WordPress betrachten denn natürlich auch hier sollte JavaScript effektiv geladen werden.

Das schöne bei WordPress – natürlich gibt es wieder verschiedene Möglichkeiten das Ganze über entsprechende Plugins zu lösen. Aber auch die Einbindung von speziellen Code Snippets über die functions.php können hier angewandt werden.

Javascript Plugin für async oder defer

Es gibt für Wordpress mehrere Plugins, die für das verzögerte Ausführen von Javascript genutzt werden können. Ein Beispiel ist das kostenfreie Plugin „Async Javascript“, mit dem im Übrigen nicht nur async, sondern auch defer eingestellt werden kann – einfach über eine Chechbox bzw. einen Button.

Ein zweites beispielhaftes Plugin ist „WP Rocket“. Entsprechend dem Namen beschäftigt es sich mit mehreren Möglichkeiten zur Optimierung der Geschwindigkeit der Website – das Thema Javascript ist eine davon. Unter dem entsprechenden Punkt ist es in den Plugin-Einstellungen möglich, per Checkbox das Laden von Javascript zu verzögern.

In beiden Fällen ist es im Übrigen möglich, Jquery vom verzögerten Laden auszuschließen, um Fehler bei der Darstellung eurer Webseite zu vermeiden.

Varvy Code Snippet

Das entsprechende Code-Snippet von Patrick Sexton von Varvy findet sich hier (Link), zusammen mit vielen tollen Hintergrundinformationen rund um das Thema WordPress Performance Optimierung.

Wenn es schnell gehen muss, reicht das Code Snippet und die Ersetzung von „defer.js“ mit dem entsprechenden Skript, welches man verzögert laden möchte.

Functions.php Datei bearbeiten

Natürlich ist es auch möglich, defer oder async selbst im Code zu setzen. Weil das bei einer Wordpress Installation manuell sehr mühsam ist und schnell zu Fehlern führt, macht man das idealerweise serverseitig über die functions.php. Ein bisschen Code reicht und alle <script> Befehle außer die von Jquery werden mit dem Attribut defer versehen:

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Zusammenfassung

Mit dem verspäteten Laden von Javascript lässt sich eine Website hinsichtlich der Ladezeit beschleunigen.

Das Nachladen bzw. das verspätete Ausführen der Skripte funktioniert über die HTML-Attribute von <script>, defer und async.

Nur bei defer jedoch werden die Skripte nach dem HTML Parsing ausgeführt. In beiden Fällen läuft der Download der Skripte wiederum parallel ab.

Bei einer Wordpress Installation lässt sich das entweder direkt über eine Funktion in functions.php erledigen oder die Aufgabe wird über eines der vielen dafür kostenfrei verfügbaren Plugins gelöst.

Eine weitere Alternative ist das Nachladen und Ausführen nachdem die Seite inital geladen wurde. Einfach nur den Code an das Ende schreiben führt hingegen zu Verwirrung, weil trotz sichtbarem Seiteninhalt angezeigt wird, dass die Seite noch lädt.

Außerdem müssen Skripte, die eine Ausführung vor dem Parsen des Inhalts bedürfen, von dieser Optimierung ausgenommen werden – das würde im Falle von Jquery beispielsweise sehr sonst oft zu Fehlern mit dem Inhalt führen.

Nach der Optimierung ist es ratsam zu testen, ob das auch wirklich was gebracht hat: Entsprechend gilt es, die Website wieder durch ein Speed Testing Tool laufen zu lassen.