Preloading

Inhaltsverzeichnis

1 Definition
2 Wofür wird Preloading verwendet?
3 Warum wurde Preloading eingeführt?
4 Browser-Kompatibilität
5 Gängige Ressourcen für Preloading
6 Beispiele für Preloading
7 Der Unterschied zwischen Preloading und Prefetching
8 Bedeutung für SEO und Webentwicklung
9 Weiterführende Links
10 Ähnliche Artikel

Definition

Mittels Preloading können Entwickler Browser dazu auffordern, vorab mit dem Laden einer Ressource zu beginnen, die in naher Zukunft benötigt wird. Es gibt Webentwicklern mehr Kontrolle darüber, in welcher Reihenfolge eine Webseite und die verschiedenen Ressourcen darauf geladen werden.

Preloading kann beispielsweise verhindert, dass bestimmte Ressourcen das Rendering blockieren, indem diese frühzeitig geladen werden. Dadurch kann der Page Speed optimiert und infolgedessen auch die User Experience einer Seite verbessert werden.

Wofür wird Preloading verwendet?

Preloading verbessert die Ladezeit von Webseiten, da hierbei den Browsern mitgeteilt wird, welche Ressourcen priorisiert werden sollen. Für gewöhnlich wird Preloading für kritische Ressourcen verwendet, welche die Ladegeschwindigkeit einer Seite verlangsamen, wenn sie später als andere Ressourcen gefunden werden.

In den letzten Jahren wurden Browser besser darin, solche kritischen Ressourcen schneller zu finden und zu laden. Daher wird das Preload-Attribut heute seltener verwendet und nur noch für Ressourcen eingesetzt, bei denen dies zur Optimierung der Seitenladegeschwindigkeit nötig ist.

Warum wurde Preloading eingeführt?

Preloading wurde als eine verbesserte Version von Subresource eingeführt, welches ursprünglich zum Laden von Ressourcen verwendet wurde. Allerdings erfüllte Subresource seinen ursprünglichen Zweck nicht, da es aufgrund von verschiedenen Fehlern nicht richtig funktionierte. Preloading wurde entwickelt, um Subresource zu verbessern und den Ladevorgang für bestimmte Ressourcen zu optimieren.

Durch Preloading kann der Browser den Ressourcentyp identifizieren und bestimmte Ressourcen priorisieren. Es ermöglicht dem Browser auch zu überprüfen, ob er das richtige Sicherheitsprotokoll befolgt. Indem verhindert wird, dass schädliche Inhalte automatisch heruntergeladen werden, wird die User Experience hierbei verbessert.

Ab 2016 wurde die Unterstützung für Subresource von den meisten großen Browsern zugunsten von Preload eingestellt.

Browser-Kompatibilität

Vor der Verwendung von Ressourcenhinweisen sollte geprüft werden, ob sie von den (meisten) gängigen Browsern unterstützt werden. So kann der Ressourcenhinweis so effektiv wie möglich eingesetzt werden. Nachfolgend findet sich eine Übersicht über die Browser, die den Ressourcenhinweis „preload“ unterstützen.

Google Chrome
Firefox
Microsoft Edge
Safari
Android-Browser
Opera
Samsung Internet

Gängige Ressourcen für Preloading

Es gibt verschiedene Ressourcen, die vorab geladen werden können. Wichtige CSS- oder Javascript-Dateien werden üblicherweise im Vorherein geladen, sodass alle wichtigen Ressourcen frühzeitig erkannt werden können. Es gibt jedoch viele weitere Verwendungszwecke für diesen Ressourcenhinweis.

Im Folgenden findet sich eine Übersicht über einige der Ressourcen, für die Preloading häufig verwendet wird:

CSS-Dateien
JavaScript-Dateien
Dokumente
Bilder
Video/Audio
Schriftarten

Beispiele für Preloading

Nachfolgend finden sich einige Beispiele dafür, wie dieser Ressourcenhinweis verwendet werden kann.

<link rel="preload" href="example-video.mp4" as="video" type="video/mp4">
<link rel="preload" href="example-video.webm" as="video" type="video/webm">

In diesem ersten Beispiel wird eine wichtige Video-Datei vorab geladen.

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

In diesem zweiten Beispiel wird das CSS und JavaScript der Seite vorab geladen. Dadurch wird verhindert, dass diese das Rendern der Seite blockieren. Sowohl die wahrgenommene Geschwindigkeit als auch die tatsächliche Ladegeschwindigkeit der Seite kann damit verbessert werden.

Der Unterschied zwischen Preloading und Prefetching

Neben dem Preloading einer Ressource besteht auch die Möglichkeit des Prefetching. Zwischen Preloading und Prefetching gibt es aber einen wesentlichen Unterschied: Beim Preloading ist der Entwickler sicher, dass eine Ressource benötigt wird, wenn er den Browser dazu auffordert, etwas im Vorhinein zu laden. Dadurch erhält die Ressource eine hohe Priorität.

Beim Prefetching teilt der Entwickler dem Browser im Wesentlichen mit, dass die Ressource wahrscheinlich (aber nicht definitiv) benötigt wird. Im Vorhinein mittels Prefetching abgerufene Ressourcen haben eine niedrigere Priorität als jene, die mit Preloading vorab geladen werden.

Außerdem betrifft Preloading in der Regel Ressourcen, die auf der aktuellen Seite verwendet werden. Prefetching wird hingegen eher für Ressourcen genutzt, die für die nächste Seite benötigt werden.

Bedeutung für SEO und Webentwicklung

Preloading ist ein relativ neuer Ressourcenhinweis, der Webentwicklern und SEOs dabei helfen kann, Prioritäten für bestimmte Ressourcen zu setzen. Dies kann die User Experience verbessern, indem die Seitenladegeschwindigkeit erhöht wird.

Der Page Speed wirkt sich nicht nur auf die User Experience aus und verbessert die User Signals auf der Seite, sondern ist auch ein wichtiger Rankingfaktor. Das bedeutet, dass die Anwendung der richtigen Ressourcenhinweise einen direkten Einfluss auf das Ranking einer Webseite in den SERPs haben kann.