Tobias Scheible Cyber Security & IT-Forensik Dozent
Raketenstart Geschwindigkeit

JavaScript schnell und effizient laden

Übliche Tipps zur Optimierung der Geschwindigkeit von JavaScript greifen nicht mehr, wenn viele große Bibliotheken verwendet werden. Stattdessen sollte eine Strategie erarbeitet werden, wie Inhalte bei Bedarf effizient geladen werden können. Gleichzeitig sind viele ältere Tipps mit neueren Methoden eher kontraproduktiv.

Dienstag, 03. September 2019
0 Kommentare

Die häufigsten Empfehlungen für die Optimierung von JavaScript belaufen sich auf die Zusammenfassung aller Dateien, um die Anzahl an HTTP-Anfragen zu reduzieren, das Entfernen von unnötigen Inhalten und die Komprimierung der Übertragung. Mit der prallen Übertragung per HTTP/2 und der steigenden Bandbreite der Besucher spielen diese Faktoren allerdings keine so große Rolle mehr. Die Zeit zum Analysieren des JavaScript-Codes und die anschließende Ausführung sind bei vielen Seiten größer als die Ladezeit. Daher zeige ich hier verschiedene Methoden, wie die Geschwindigkeit der Website auch mit viel JavaScript optimiert werden kann.

Einbindung

Wird JavaScript ganz klassisch im Head-Bereich einer Website eingebunden, wird die Darstellung der Website erheblich verzögert. Der Webbrowser fängt mit der Analyse der Website an, findet die JavaScript-Datei, stoppt die weitere Analyse der HTML-Datei, lädt die JS-Datei herunter, führt sie anschließend aus und bearbeitet erst danach den Rest der HTML-Seite weiter. Um dies zu umgehen, wird die JavaScript-Datei ganz am Ende der Seite eingebunden. Alternativ kann die Einbindung wieder im Header in Kombination mit den Attributen async bzw. defer erfolgen, was den Ladevorgang sogar beschleunigt.

async

Mit async wird die JavaScript-Datei parallel geladen und nach dem Ladevorgang die Bearbeitung der HTML-Datei unterbrochen und die JavaScript-Datei interpretiert und ausgeführt. Anschließend wird die Bearbeitung der HTML-Seite vorgeführt.

defer

Das Attribut defer sorgt dafür, dass der Webbrowser die JavaScript-Datei nur herunterlädt. Mit der Interpretation und Ausführung wird gewartet, bis die HTML-Seite fertig bearbeitet wurde. Dadurch kann die Java-Script Datei im Vergleich bis zur Einbindung ganz am Ende parallel geladen werden.

Flavio Copes hat das Verhalten in seinem Artikel „Efficiently load JavaScript with defer and async“ schön illustriert.

Laden bei Bedarf

Eine sehr effektive Methode, die Geschwindigkeit einer Website mit viel JavaScript zu erhöhen, ist das Laden bei Bedarf. Denn häufig werden bestimmte Funktionen nur auf einzelnen Seiten gebraucht und nicht alle direkt im sichtbaren Bereich. Daher sollte beim Seitenaufruf nur der notwendigste JavaScript-Teil geladen werden und dann bei Bedarf für einzelne Funktionen separate Dateien nachgeladen werden. Dazu wird überprüft werden, ob ein Element auf der Seite existiert und dann wird die entsprechende JavaScript-Datei nachgeladen werden.

jQuery

Per jQuery lässt sich dieser Mechanismus sehr einfach realisieren. Als Erstes wird überprüft, ob das Element mit der ID existiert. Wenn dies der Fall ist, wird die Funktion getSrcipt() ausgeführt und die URL der JavaScript-Datei übergeben. Danach wird die Callback-Funktion ausgeführt, sobald die Datei erfolgreich geladen worden ist.

if($('#element').length){
  $.getScript("script.js", function() {
    // callback
  });
}
JavaScript

Per reinem JavaScript kann die gleiche Funktion realisiert werden. Hier findet ebenfalls eine Überprüfung statt, ob das Element existiert. Anschließend wird ein neues Script-Element der Seite hinzugefügt und die Callback-Funktion ausgeführt, sobald die Datei geladen worden ist.

if(document.querySelector("#element")){
  var script = document.createElement('script');
  script.src = something;
  script.onload = function(){
    // callback
  };
  document.head.appendChild(script);
}

Kompression

minify

Um gut mit Code zu arbeiten, werden viele Umbrüche, Leerzeichen und Tabs eingefügt. Zusätzlich werden viele Abschnitte mit Kommentaren versehen, damit Entwickler sich besser zurechtfinden. Da die Elemente nicht beim Betrachten der Website benötigt werden, können diese entfernt werden. Die Zusammenfassung und Entfernung von unnötigen Inhalten sollten immer automatisiert nach einer Änderung an einer JavaScript-Datei erfolgen. Wird dieser Vorgang jedes Mal dynamisch bei einem Seitenaufruf ausgeführt, werden zu viele Serverressourcen benötigt und gleichzeitig nimmt der Prozess Zeit in Anspruch und verzögert dadurch den Seitenaufruf. Dieser Vorgang wird als minify bezeichnet und sollte immer ausgeführt werden.

gzip

Zusätzlich werden die JavaScript-Dateien bei der Übertragung komprimiert übertragen. Der Webserver übernimmt nach der Konfiguration automatisch das Packen und der Webbrowser entpackt sie wieder. Hier hat sich als Algorithmus gzip etabliert. Werden große JavaScript-Dateien eingesetzt, können diese vorab komprimiert und auf dem Webserver gespeichert werden. Dadurch können vor allem Seiten mit vielen Seitenaufrufen Zeit sparen.

PHP

Die Kompression per gzip kann beispielsweise per PHP erfolgen:

$script = file_get_contents('script.js');
file_put_contents('script.js.gz', gzencode($cript, 9, FORCE_GZIP));
.htaccess

Nachdem die Dateien als normale .js-Datei und zusätzliche als .js.gz-Datei abgelegt worden ist kann die Auslieferung per .htaccess-Datei konfiguriert werden. Dazu wird angegeben, dass alle .gz Dateien gzip komprimiert sind und Dateien mit der Endung *.js.gz JavaScript-Dateien sind. Eingebunden werden die Dateien normal mit .js-Dateiendung. In der .htaccess-Datei wird RewriteCond überprüft, ob der Webbrowser die gzip Komprimierung unterstützt. Ist dies der Fall, wird anstatt der .js-Datei die vorab komprimierte .js.gz-Datei ausgeliefert.

AddEncoding gzip .gz

ForceType application/javascript

RewriteEngine on
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteRule ^(.*)\.js$ $1.js.gz [QSA,L]

Fazit JavaScript Performance

Mit den vorgestellten Methoden kann die Geschwindigkeit der Website trotz größerem JavaScript-Anteil effizient optimiert werden. Gerade das Nachladen bei Bedarf kann die Geschwindigkeit enorm steigern, da der Webbrowser kein unnötiges JavaScript laden und verarbeiten muss. Das Speichern und Ausliefern von bereits vorab komprimierten Dateien spart vor allem bei Seiten mit vielen Besuchern Ressourcen.

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren und Hiweise

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und damit ich direkt Kontakt aufnehmen kann. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.