Asynchrones Laden von Ressourcen und Inhalten

Das asynchrone Laden von Ressourcen und Inhalten ermöglicht eine Reduzierung des zu übertragenden Datenvolumens bei dem direkten Abruf einer Webseite und führt zu einer Verbesserung der wahrgenommenen Ladezeit. Externe Ressourcen wie JavaScript können bei der Auszeichnung im HTML-Dokument die Attribute defer und async zugewiesen bekommen. Wird eine Ressource mit dem defer-Attribut versehen, erfolgt die Ausführung des Skriptes erst, nachdem das Document Object Model (DOM) geladen wurde [Krö10].

<script defer src=“script.js“></script>

Mit der Angabe des Attributes async wird das JavaScript asynchron im Hintergrund geladen und anschließend direkt ausgeführt [Krö10]. Durch dieses Vorgehen wird eine Blockierung des Renderings in dem Browser vermieden und mehrere Skripte können parallel geladen und ausgeführt werden [Goog].

<script async src=“script.js“></script>

Werden die Attribute async und defer kombiniert, erfolgt das Laden des JavaScript asynchron sofern der Browser dies unterstützt, andernfalls wird es erst ausgeführt, wenn das DOM geladen wurde [Krö10]. Das asynchrone Laden funktioniert nicht mit jedem JavaScript und ist von den genutzten Funktionen abhängig.

Mit Hilfe von Lazy Loading, dem zeitversetzten Laden von Inhalten und Komponenten, lässt sich die vom Nutzer empfundene Ladezeit verbessern. Hierzu werden diese aus dem Ladevorgang der Webseite entfernt und zeitversetzt über Skripte wie cycligent.js nachgeladen. Empfehlenswert ist diese Vorgehensweise laut Christoph Zillgens für alle Inhalte und Komponenten, die außerhalb des sichtbaren Bereiches dargestellt werden oder nicht zu dem Kern der Website gehören, wie beispielsweise Kommentare, Social Media Buttons oder Werbeanzeigen [Zil13].

Im Hinblick auf die Suchmaschinenoptimierung hat Lazy Loading den Nachteil, dass die Crawler nachzuladende Inhalte bei der Indexierung nicht erfassen können. Somit empfiehlt sich die Nutzung von Lazy Loading vorwiegend zur Reduzierung der Datenübertragung für weniger relevante Bilder, die kurz bevor sie im Sichtfeld des Nutzers erscheinen, nachgeladen werden [CIW15].