Wie du Javascript verzögert lädst

Die wirklich richtige Art JavaScript verzögert zu laden ist, dass das Laden und Parsen des nicht sofort benötigten JavaScript erst beginnen zu lassen wenn die Webseite bereits geladen wurde.

Denn dies beeinflusst den PageSpeed und den kritischen Rendering Pfad nicht.

Wenn die Webseite geladen wurde wird das Onload-Ereignis ausgelöst. Dies ist der richtige Zeitpunkt externes, erst später benötigtes JavaScript aufzurufen.

Der Seiteninhalt wurde zu diesem Zeitpunkt bereits geladen, so dass der PageSpeed nicht mehr beeinflusst wird.

Erklärung

Es gibt viele Seiten im Internet die sich mit dem Thema “JavaScript verzögert laden” beschäftigen.

Aber auf jeder Webseite erhält man andere Tipps oder es werden verschiedene Wege beschrieben.

Für viele Leute ist das frustrierend, da sie nach einer zuverlässigen Lösung suchen.

Im Artikel Rendering blockierendes Javascript habe ich bereits ausführlich über die Probleme bei der Einbindung von Javascript Dateien geschrieben.

Meistens werden die drei folgenden Lösungen vorgeschlagen:

  • JavaScript erst am Ende der Webseite aufrufen
  • das async Attribut verwenden und JavaScript asynchron laden
  • das defer Attribut verwenden um JavaScript verzögert zu laden

Leider sind alle drei Methoden zum heutigen Zeitpunkt nicht Browser-übergreifend zuverlässig einsetzbar.

Aus verschiedenen Gründen ist es damit nicht möglich erst den Seiteninhalt zu laden und das Rendern nicht zu blockieren.

Die Google PageSpeed Testseite wird in den meisten Fällen nicht zufrieden sein und Verbesserungsvorschläge melden.

JavaScript verzögert laden - der richtige Weg

Ich setze an dieser Stelle vorraus, dass Du Deinen JavaScript-Code bereits daraufhin untersucht hast, welche Teile verzögert geladen werden können ohne dass die Funktionalität Deiner Webseite negativ beeinflusst wird.

Eventuell musst Du Deine Webseite auch umbauen.

Du hast jetzt also eine JavaScript-Datei die Du verzögert aufrufen willst.

Dann setze jetzt folgenden Code ans Ende Deiner HTML Datei, direkt vor das schließende </body> Tag,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "deferred.js";
        document.body.appendChild(element);
    }
    // greater than or equal IE 9 and other modern Browser
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    //  less than or equal IE 8
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    // all Browser
    else window.onload = downloadJSAtOnload; 
</script>

Was macht dieser Code genau?

Zuerst wird eine Funktion “downloadJSAtOnload()” geschrieben. Diese erzeugt ein script Element und legt als Quelle die JavaScript-Datei “deferred.js” fest.

Diese Datei enthält den verzögert zu ladenden JavaScript-Code! Der Name der JavaScript-Datei kann angepasst und der Pfad muss natürlich bei Bedarf ergänzt werden.

In diesem Fall muss sich die Datei “deferred.js” im gleichen Verzeichnis wie die HTML-Datei befinden.

Das erzeugte script-Element wird dann ans Ende des body-Elements gehängt. Also direkt nach diesem Script.

Im zweiten Teil gibt es eine if-Abfrage, welche auf drei Möglichkeiten ein Onload Ereignis zu erzeugen bzw. hinzuzufügen verzweigt. Somit ist das Script auch Browser-übergreifend einsetzbar.

Beim Auslösen des Online-Ereignisses wird die obere “downloadJSAtOnload()” Funktion aufgerufen.

Das Script macht also nichts anderes als eine zusätzliche JavaScript-Datei einzubauen, wenn die Webseite fertig geladen wurde.

Falls Du mehrere JavaScript-Dateien verzögert laden willst gebe es auch die Möglichkeit über eine for-Schleife mehrere Scripte an das Ende des body-Elements zu hängen.

Auf diese Weise könntest Du z.B. dein JavaScript für Google Analytics einbinden.

Das hat zwar den Nachteil, dass Du alles was vor dem Onload Ereignis passiert nicht mitloggen kannst, aber wichtiger ist ja wie der User auf Deiner Seite interagiert.

Du könntest die Funktion auch ergänzen um zusätzlich Rendering blockierendes CSS damit zu laden.

Wenn du mehrere Funktionen hast die das Onload-Ereignis nutzen, musst Du diese so organisieren, dass sie zuammen über eine eigene Funktion aufgerufen werden.

Ich habe auch schon “Stunden” gesucht, da ich dies nicht beachtet hatte.

Wie wichtig ist das verzögerte Laden von JavaScript?

Geschwindigkeit ist für Google nach wie vor ein wichtiger Ranking-Faktor und die Bedeutung wird sich wahrscheinlich noch vergrößern.

Jeder surft lieber auf einer schnellen Webseite als Ewigkeiten zu warten bis die Seite geladen ist. Dir wird es da auch nicht anders gehen.

Gerade im mobilen Bereich ist der PageSpeed noch wichtiger als auf einem Desktop-Computer. Unterwegs hat man halt meist eine geringere Geschwindigkeit und die meisten mobilen Geräte haben nur eingeschränkte Ressourcen.

Auch Google empfiehlt so viele Ressourcen (JavaScript, CSS, Bilder, Videos, …) wie möglich aus dem kritischen Rendering Pfad zu räumen und die Inhalte “above the fold” zu priorisieren.

Wenn es Deine Besucher und Google zufrieden stellt kannst du zwei Fliegen mit einer Klappe schlagen.

Fazit zu verzögertem Laden von Javascript

Du solltest Priorität darauf legen, dass die Bereitstellung der Inhalte so schnell wie möglich passiert.

Inhalte sollten nicht durch erst später benötigtes JavaScript blockiert werden.

Das betrifft vor allem Inhalte “above the fold”. Also über dem Pfalz - die Bereiche die man ohne Scrollen erreichen kann.

Bereiche unter dem Pfalz, besonders im Footer-Bereich, haben eine niedrigere Priorität.

Quellen:

async vs defer attributes - Growing with the Web
JavaScript-Code später laden
Deferred and Asynchronous Script Loading with Javascript