Preloading

Preloading

© Copyright Shutterstock/ Rawpixel.com

Was ist Preloading?

Preloading ist eine Technik, die beim Laden von Webseiten zur Anwendung kommt. Dabei werden Ressourcen wie Bilder, Videos, Skripte, CSS-Dateien oder komplette Webseiten bereits vorab durch den Browser geladen. Der genaue Ablauf hÀngt dabei vom verwendeten Browser ab.

Wie funktioniert Preloading?

Bei Preloading handelt es sich um eine Spezifikation des World Wide Web Consortium (W3C), welche spĂ€ter als Empfehlung herausgegeben werden soll. Zu beachten ist, dass aktuell daran gearbeitet wird und es somit noch zu VerĂ€nderungen kommen kann. Dies kann möglicherweise zu Konflikten und InkompatibilitĂ€ten fĂŒhren. Mit CSS und JavaScript gibt es Alternativen, welche ebenfalls Ressourcen vorladen. Zudem unterstĂŒtzen einige Browser die Funktion Subresource.

Wenn Sie noch Fragen bezĂŒglich JavaScript haben, dann können Sie gerne den jeweiligen Glossar dazu besuchen und sich ĂŒber das Thema informieren.

Der Mechanismus hinter Preloading ist relativ simpel. Im Quelltext der Webseite wird eine entsprechende Anweisung formuliert, die den Prozess anstĂ¶ĂŸt. Welche Ressourcen wann geladen werden, wird allerdings nicht von der Anwendung bestimmt. Der Browser rendert die Webseite und bemerkt dabei den Hinweis auf einen Preload. Der Hinweis bezieht sich direkt auf die vorzuladenden Inhalte, Skripte und ausgelagerten Dateien. Ziel ist in erster Linie eine Verbesserung der Performance. Dies wird neben dem reinen Vorladen zudem durch eine Optimierung der AblĂ€ufe erreicht.

Die Programmierung beim Preloading

Durch das Vorladen lassen sich Webseiten deutlich schneller aufrufen. WÀhrend des Besuchs einer Website lÀdt der Browser die definierten Ressourcen in seinen Cache. Wichtig dabei ist, dass diese im Vorfeld korrekt deklariert wurden. Definiert wird der Preload wahlweise in einer CSS Datei, mit HTML 5 oder JavaScript.

Erfolgt der Preload ĂŒber eine CSS Datei werden die Bilder außerhalb des sichtbaren Bereichs des Bildschirms geladen. Auf Wunsch lĂ€sst sich das Vorladen noch zusĂ€tzlich durch einen Hover Effekt initialisieren. Es ist zudem möglich Preloading ĂŒber JavaScript Codes zu realisieren, welche zumeist in den Header der Datei geschrieben werden. Das Objekt kann anschließend an unterschiedlichen Stellen verwendet werden ohne es erneut laden zu mĂŒssen. Werden beispielsweise Videos per HTML 5 geladen ist zu beachten, dass dies nicht von allen Browsern unterstĂŒtzt wird.

In folgenden FĂ€llen bietet sich Preloading besonders an:

  • FĂŒr mehrere Webseiten werden unterschiedliche Stylesheets oder CSS Dateien benötigt.
  • Es mĂŒssen viele Bilder, Videos oder andere große Dateien geladen werden.
  • Plattformen wie AJAX, ASP.NET oder MVC zum Einsatz kommen.
  • Die Inhalte sollen mittels MediaQueries auf das EndgerĂ€t des Nutzers abgestimmt werden.

Worauf ist bei der Programmierung zu achten?

Welche Methode bei der Programmierung angewendet wird, hĂ€ngt von mehreren Kriterien ab. Hierzu gehört in erster Linie die UnterstĂŒtzung durch die verschiedenen Browser. Zudem spielen auch die gewĂŒnschten FunktionalitĂ€ten der Webseite eine wichtige Rolle. Damit es zu keinen Konflikten und Störungen kommt, muss der Quellcode korrekt implementiert werden. Aus diesem Grund ist Preloading nur fĂŒr versierte Programmierer und Webdesigner zu empfehlen. Ein umfangreiches Testen vorab ist in jedem Falle ratsam.

Tipp

Wenn Sie noch Fragen bezĂŒglich eines Online Marketing Themas haben, dann können Sie gerne unseren Glossar besuchen und sich ĂŒber das Thema informieren, wo Sie noch speziell Fragen haben.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte