Preloading

Preloading (deutsch: vorladen) ist ein Mechanismus, der es ermöglicht, dass Ressourcen von einem Browser geladen werden, bevor sie durch eine Nutzerinteraktion initialisiert werden. Es können je nach eingesetzter Methode Bilder, CSS-Dateien, Fonts, Skripte, Videos, Frames oder ganze Websites vorgeladen werden. Relevant ist auch die Unterstützung durch den Browser, da es hier aktuell Unterschiede gibt. Preloading weist Ähnlichkeiten auf mit Konzepten wie Prefetching, Link Prefetching und Prerendering.

Allgemeine Informationen zum Thema

Preloading ist derzeit ein Arbeitsentwurf des W3C (Stand November 2015), der später als offizielle Empfehlung vorgesehen ist. Die Spezifikation ist zwar öffentlich einsehbar, wird aber noch nicht zur Anwendung empfohlen. Wer Preloading implementieren möchte, sei darauf hingewiesen, dass diese Spezifikation noch nicht abgeschlossen ist und sich verändern kann. Letzteres kann unter Umständen zu Konflikten und Inkompatibilitäten führen. Es gibt jedoch bekannte Alternativen, um Ressourcen vorzuladen: CSS, JavaScript und bei einigen Browsern die Eigenschaft Subresource.

Funktionsweise

Preloading Mechanismen arbeiten nach einem einfachen Prinzip: eine Anweisung im Quelltext einer Website setzt den Prozess in Gang und nimmt Bezug zu einer Ressource, die vorgeladen werden soll. Normalerweise würde die Anwendungen bestimmen, wann sie welche Inhalte und Skripte lädt, und in das Dokument integriert. Beim Preloading ist es der Browser, der eine Website rendert und dort auf einen Preload-Hinweis aufmerksam wird. Dieser Hinweis kann sich auf unterschiedliche Inhalte, Skripte oder ausgelagerte Dateien beziehen, die anschließend vorgeladen oder ausgeführt werden. Das Ziel liegt darin, die Performance zu erhöhen. Dies wird einerseits erreicht durch das Vorladen an sich, andererseits durch eine Optimierung der Abläufe, bei denen der Zeitpunkt des Abrufs kontrolliert wird.

Preloading mit rel=“preload“

Preloading kann die Ladezeit von Websites und Funktionen verringern und dadurch das Benutzererlebnis verbessern. Während ein Nutzer eine Website besucht, werden bestimmte Ressourcen mithilfe des deklarativen Markups in den Cache des Browsers geladen. Über das Keyword Preload können Inhalte vorgeladen werden, die mit dem Atrribut Link referenziert werden. Das Keyword erzeugt einen sogenannten external resource link (auch prelaod link), der die Ressource deklariert und ihre Abruf-Eigenschaften in HTML5 spezifiziert. Die Ressourcen müssen korrekt deklariert werden, damit der Client weiß, um welche Ressourcen es sich handelt und wie er sie behandeln soll.

Verschiedene Beispiele für eine CSS-Datei:

<!-- preload stylesheet resource via declarative markup -->

Alternativ kann die Datei über den HTTP-Header aufgerufen werden:

Link: <https://example.com/other/styles.css>; rel=preload; as=style

Auch JavaScript kann verwendet werden:

<!-- or, preload stylesheet resource via JavaScript -->

Prelaoding in diesen Formen ist zum Beispiel sinnvoll, wenn:

• Verschiedene Websites unterschiedliche CSS-Dateien oder Stylesheets benötigen.
• Nutzer wahrscheinlich eine Website besuchen, die viele Bilder oder größere Dateien erfordert.
• Plattformen wie ASP.NET MVC oder AJAX eingesetzt werden und der Browser einen Preload-Hinweis bekommen soll, um Ressourcen vorzuladen.
• MediaQueries verwendet werden, um die Inhalte auf das Endgerät des Nutzers abzustimmen.

Preloading von Videos mit HTML5

Im Rahmen von HTML5 können Videoinhalte vorgeladen werden. Dazu wird das Tag

<video>

mit speziellen Parametern verwendet. Parameter wie autoplay, width/ height oder controls sind ebenfalls möglich. Jedoch unterstützen nicht alle Browser das Viedo-Tag in HTML5.

<video id="sampleMovie" src="HTML5Sample.mov" preload></video>

Preloading mit JavaScript

Preloading kann ebenfalls mit verschiedenen JavaScript Codes realisiert werden, die meist im Header einer Website notiert werden. Dazu wird ein JavaScript Objekt erzeugt und eine Bilddatei in das leere Objekt geladen. Anschließend kann das Objekt auch an anderen Stellen einer Website verwendet werden, ohne es erneut laden zu müssen – es liegt bereits im Cache und wurde durch den Aufruf der Funktion vorgeladen. Wenn Nutzer JavaScript jedoch nicht aktiviert haben, funktioniert diese Variante nicht. Ein Beispiel:

Mit Event Handlern können weitere Funktionalitäten wie der Zeitpunkt des Aufrufs oder das Verhalten bei Fehlern bereitgestellt werden.

Preloading mit CSS

Das Preloading mit CSS bedient sich eines Tricks: Das Bild oder die Bilder werden außerhalb des sichtbaren Bereiches des Displays geladen. Das Vorladen des Bildes kann zusätzlich durch einen Hover-Effekt initialisiert werden. Ein einfaches Beispiel in CSS und XHTML:

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

Diese Auszeichnungen werden in die CSS-Datei geschrieben. Der folgende Quellcode wird am Ende eines Dokumentes notiert.

1x1px 1x1px 1x1px

Nun können die Bilder in XHTML-Dokumenten aufgerufen werden.

Bedeutung für die Programmierung

Preloading reduziert die Ladezeiten einer Website, indem Ressourcen vorgeladen werden. Welche Methode dabei zum Einsatz kommt, ist von mehreren Faktoren abhängig – Browserunterstützung, verwendetes Markup und die Funktionalitäten der Website. Wichtig ist jedoch eine korrekte Implementation des jeweiligen Quellcodes, da bereits kleine Konflikte zu Störungen der User Experience führen können. Programmierer und Webdesigner sollten also relativ versiert sein, wenn sie diese Methoden anwenden wollen. Unter Umständen erscheint es ohnehin sinnvoll, auf eine gültige Spezifikation in HTML5 zu warten oder diese vorsichtig zu testen.

Weblinks

• Informationen über Prefetching, Preloading und Prebrowsing
• Preload Working Draft
• HTML video preload Attribute
• Verschiedene Preload Methoden
• Bilder und Websites vorladen