Mit Hilfe von ‚defer‘ die Ladezeit von JavaScript optimieren und entschärfen

Sergej Müller hat auf Google Plus einen interessanten Eintrag über ein HTML Attribut gemacht, dass in der Masse irgendwie untergegangen ist, aber eine erstaunliche Wirkung auf das Ladeverhalten von JavaScript hat. Kurz: Es geht um die Blockierung des Ladevorgangs der Seite in der Zeit, in der ein eingebundenes Javascript geladen wird.

Standardmässig blockiert der Browser die Ausführung der Webseite bis die im Quelltext definierten JavaScript-Dateien vollständig angefordert sind. Aus diesem Grund hatte man angefangen, JavaScript-Dateien im Footer der Webseiten zu laden, um den Ladefluss restlicher Elemente nicht zu stören.

Mit Hilfe von ‚defer‘ die Ladezeit von JavaScript optimieren

Mit einer kleinen aber feinen Ergänzung eines Attributs im Aufruf der JavaScript Dateien lassen sich die JavaScript Dateien nämlich ganz einfach parallel und delocked laden:

Normaler JavaScript Aufruf

<script type="text/javascript" src="/js/1.js"></script>
<script type="text/javascript" src="/js/2.js"></script>
<script type="text/javascript" src="/js/3.js"></script>

Optimaler JavaScript Aufruf

<script type="text/javascript" src="/js/1.js" defer="defer"></script>
<script type="text/javascript" src="/js/2.js" defer="defer"></script>
<script type="text/javascript" src="/js/3.js" defer="defer"></script>

Auswirkungen auf das Ladeverhalten der Seite

Hier ist ein Aufruf der Seite ohne das defer=“defer“ Attribut. Man sieht deutlich, wie das Weiterladen der Seite bis zum endgültigen Laden der JavaSript Dateien unterbrochen wird:
javascript ohne defer Attribut

Hier, hingegen, ist ein Aufruf der gleichen Seite mit defer=“defer“ Attributen bei jeder JavaScript Datei. Hier sieht man ebenfalls deutlich wie JavaScript und Bilder parallel geladen werden:
javascript mit defer="defer" attribut

Im Prinzip eine Hammer Sache! Jetzt kommt es natürlich auf die Anzahl und die Größe der JavaScripte an um tatsächlich einen Performance Schub zu sehen, aber es kann sich durchaus lohnen!

Facebook Like Button legt die Seite nicht mehr lahm

In der letzten Zeit ist es häufiger mal passiert, dass der eingebundene Facebook Like Button bei Serverproblemen auf Facebooks Seiten eine Menge von Internet Seiten lahmlegte!

Dafür verantwortlich war Facebooks JavaScript, dass nur äußerst langsam geladen wurde und in der Zeit das Laden der Webseite blockierte! Facebook empfielt nämlich das Einbinden des Scripts direkt vor nach dem öffnenden body Tag! „ideally right after the opening tag“ Wird das JavaScript an dieser Stelle nicht geladen oder benötigt es ewig zum laden, kann die gesamte Seite nicht aufgebaut werden, da das Script sich vor jedem anderen Inhalt befindet.

Würde man aber das JavaScript nicht inline einbinden, sondern in eine externe Datei auslagern und dann mit dem defer=“defer“ Attribut aufrufen, könnte eine solche Blockierung niemals mehr passieren!

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.