Skip to main content

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.

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.

Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG

Preloading
3.9 (78.67%) 15 votes