JavaScript wird auf sehr vielen Webseiten eingesetzt, denn es bietet umfangreiche Möglichkeiten den Besuchern ein interessanteres Erlebnis bei dem Aufruf der Webseiten zu bieten. Damit lassen sich optisch ansprechende Effekte erstellen, den Besucher zu Aktionen verführen und auch Conversion Raten erhöhen.
Ein Problem dass der Einsatz von JavaScript mit sich bringen kann, ist eine längere Ladezeit der Webseite. Viele JavaScript Dateien verarbeiten Informationen und präsentieren anschließend die Ergebnisse, was direkt bei dem Aufruf der Webseite erfolgt und so einen effektiven PageSpeed verhindert.
Standardmäßig laden die Browser der Besucher die in dem Quellcode der Webseite eingebundenen JavaScript-Dateien synchron. Das ist nicht schlimm wenn es sich um eine geringe Anzahl an JavaScript-Dateien handelt. Erst nach dem Laden der JavaScript-Dateien wird der darauffolgende JavaScript-Quellcode verarbeitet.
Dazu eine kleine Übersicht, inkl. Beispiel-Codes und deren Bedeutung.
Verwendung von JavaScript-Attributen für eine PageSpeed-Optimierung
Standard (ohne Attribut)
Script wird sofort geladen und ausgeführt. Anschließend wird der restliche Quellcode der Webseite abgearbeitet.<script type="text/javascript" src="http://extern.de/path/lib.js"></script>
async Attribut
Die Seite wird weiter geladen, das JavaScript wird parallel dazu geladen und auch ausgeführt.
(Wichtig: Das async Attribut wird von Browser Internet Explorer 9 und älter nicht unterstützt!)<script type="text/javascript" async src="http://extern.de/path/lib.js"></script>
defer Attribut
JavaScript wird erst dann ausgeführt, nachdem die Seite komplett verarbeitet wurde.<script type="text/javascript" defer src="http://extern.de/path/lib.js"></script>
Testet nach dem Einsatz der verschiedenen JavaScript-Attributen immer die vollständige Funktionalität der Webseite.
