Asynchrones Laden von Ressourcen und Inhalten

Das asyn­chrone Laden von Ressourcen und Inhal­ten ermöglicht eine Reduzierung des zu über­tra­gen­den Daten­vol­u­mens bei dem direk­ten Abruf ein­er Web­seite und führt zu ein­er Verbesserung der wahrgenomme­nen Ladezeit. Externe Ressourcen wie JavaScript kön­nen bei der Ausze­ich­nung im HTML-Doku­ment die Attribute defer und async zugewiesen bekom­men. Wird eine Ressource mit dem defer-Attrib­ut verse­hen, erfol­gt die Aus­führung des Skriptes erst, nach­dem das Doc­u­ment Object Mod­el (DOM) geladen wurde [Krö10].

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

Mit der Angabe des Attrib­ut­es async wird das JavaScript asyn­chron im Hin­ter­grund geladen und anschließend direkt aus­ge­führt [Krö10]. Durch dieses Vorge­hen wird eine Block­ierung des Ren­der­ings in dem Brows­er ver­mieden und mehrere Skripte kön­nen par­al­lel geladen und aus­ge­führt wer­den [Goog].

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

Wer­den die Attribute async und defer kom­biniert, erfol­gt das Laden des JavaScript asyn­chron sofern der Brows­er dies unter­stützt, andern­falls wird es erst aus­ge­führt, wenn das DOM geladen wurde [Krö10]. Das asyn­chrone Laden funk­tion­iert nicht mit jedem JavaScript und ist von den genutzten Funk­tio­nen abhängig.

Mit Hil­fe von Lazy Load­ing, dem zeit­ver­set­zten Laden von Inhal­ten und Kom­po­nen­ten, lässt sich die vom Nutzer emp­fun­dene Ladezeit verbessern. Hierzu wer­den diese aus dem Lade­vor­gang der Web­seite ent­fer­nt und zeit­ver­set­zt über Skripte wie cycligent.js nachge­laden. Empfehlenswert ist diese Vorge­hensweise laut Christoph Zill­gens für alle Inhalte und Kom­po­nen­ten, die außer­halb des sicht­baren Bere­ich­es dargestellt wer­den oder nicht zu dem Kern der Web­site gehören, wie beispiel­sweise Kom­mentare, Social Media But­tons oder Wer­beanzeigen [Zil13].

Im Hin­blick auf die Such­maschi­nenop­ti­mierung hat Lazy Load­ing den Nachteil, dass die Crawler nachzu­ladende Inhalte bei der Index­ierung nicht erfassen kön­nen. Somit emp­fiehlt sich die Nutzung von Lazy Load­ing vor­wiegend zur Reduzierung der Datenüber­tra­gung für weniger rel­e­vante Bilder, die kurz bevor sie im Sicht­feld des Nutzers erscheinen, nachge­laden wer­den [CIW15].