Preloading

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.

Tipp

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