Preloading

Die Bezeichnung Preloading stammt aus dem Englischen und wird wörtlich mit „vorladen“ übersetzt. Dabei handelt es sich um den vorbereitenden Aufruf einer Aktion, für welchen es einen Support durch alle gängigen Browser gibt. Das Ziel dieser Vorgehensweise ist es, dem Nutzer einer Website eine schnelle Reaktionsgeschwindigkeit zu bieten. Allerdings bezieht sich das nur auf seine subjektive Wahrnehmung und nicht auf die tatsächlich notwendige Ladezeit.

Was passiert beim Preloading?

Der Browser besitzt einerseits selbst die Fähigkeiten, zu erkennen, welche Inhalte einer Website für den Nutzer als nächster Schritt interessant sind. So werden beispielsweise die in eine Website eingebundenen Videos und Bilder bereits vorgeladen, während der Nutzer noch mit dem Lesen der im Umfeld veröffentlichten Texte beschäftigt ist. Das geschieht, weil die Wahrscheinlichkeit hoch ist, dass der Nutzer sich nach dem Lesen die Bilder oder Texte anschauen möchte. Anderseits kann der Browser vom Quellcode einer Website gezielt zu dieser Aktion aufgefordert werden. Dazu dient der Befehl Rel=“Preload“. Damit kann zusammen mit speziellen Markups genau definiert werden, welche Objekte der Browser bereits in seinen Cache laden soll. Diese Option ist beispielsweise für andere Websites möglich, deren Inhalte ein Artikel mit einem Backlink erwähnt. Die Preload-Option kann sowohl mit HTML5 als auch CSS und JavaScript realisiert werden. Dabei hat JavaScript jedoch den Nachteil, dass der Nutzer bei seinem Browser die Ausführung nicht blockiert haben darf. Das heißt, die dabei erzielbaren Vorteile bei der Ladezeit kommen nicht allen Nutzern einer Website zugute.

Wann ist die Nutzung von Preloading sinnvoll?

Das Preloading sollte mit dem Quellcode beispielsweise dann initiiert werden, wenn eine verlinkte Website mit Bildern in hoher Auflösung oder größeren Videodateien bestückt ist. Bei internen Links macht die Option Preload Sinn, wenn auf den einzelnen Unterseiten unterschiedliche Stylesheets oder Templates verwendet werden. Auch beim Einsatz von MediaQueries zur Verbesserung der Usability auf verschiedenen Endgeräten bringt die Option Preload erhebliche Vorteile. So muss der Nutzer nicht warten, bis die angeforderten Dateien unmittelbar nach seinem Aufruf geladen werden. Dadurch entsteht beim Nutzer der subjektive Eindruck einer kurzen Ladezeit. Das heißt im Umkehrschluss, dass mit dem Preloading zumindest teilweise die Nachteile ausgeglichen werden können, die bei umfangreichen Dateien innerhalb einer Website bei der Ladezeit auftreten.

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 -->
<link rel="preload" href="/styles/other.css" as="style">

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 -->
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>

Prelaoding in diesen Formen ist zum Beispiel sinnvoll, wenn:^[2]

• 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.

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.

Interessiert? Erfahren Sie mehr zum Thema "Preloading" - kontaktieren Sie uns jetzt