Preloading
Was ist Preloading?
Preloading bezeichnet das gezielte frühzeitige Laden wichtiger Dateien einer Webseite, bevor der Browser sie regulär benötigt oder selbst entdeckt. Über entsprechende Ressourcenhinweise lassen sich etwa Schriftarten, Bilder, CSS-Dateien oder Skripte priorisieren. Richtig eingesetzt kann Preloading die Darstellung zentraler Inhalte beschleunigen und Ladezeit-Kennzahlen wie den Largest Contentful Paint verbessern.
Preloading bedeutet auf Deutsch Vorladen und weist den Browser an, eine bestimmte Ressource frühzeitig abzurufen. Der Browser lädt die Datei mit hoher Priorität, behält aber den üblichen Verwendungszeitpunkt bei. Eine vorgeladene Schriftart wird beispielsweise erst genutzt, wenn eine passende CSS-Regel sie anfordert.
Wie funktioniert Preloading?
Browser analysieren den HTML-Code einer Seite schrittweise. Manche wichtige Ressourcen werden dabei erst spät entdeckt, etwa ein Hintergrundbild aus einer CSS-Datei oder eine Schriftart, deren Adresse in einer weiteren Datei steht. Preloading trägt die Adresse bereits im Dokumentkopf ein. Dadurch kann der Download beginnen, bevor der Browser die eigentliche Referenz erreicht.
Die übliche HTML-Syntax lautet:
<link rel="preload" href="/assets/hero.webp" as="image">
Das Attribut rel="preload" kennzeichnet den Ressourcenhinweis. href enthält die Adresse der Datei. Das Attribut as beschreibt den Ressourcentyp und beeinflusst unter anderem die Priorisierung, die Sicherheitsprüfung sowie die Zuordnung zum Browser-Cache.
Welche Ressourcen solltest du vorladen?
Preloading eignet sich für Dateien, die für die erste sichtbare Darstellung benötigt werden und ohne Ressourcenhinweis erst verspätet in die Download-Warteschlange gelangen. Typische Kandidaten sind das große Titelbild im sichtbaren Seitenbereich, eine unmittelbar verwendete Schriftart oder eine zentrale Datei, die über CSS beziehungsweise JavaScript nachgeladen wird.
Ein häufiger Denkfehler besteht darin, möglichst viele Dateien vorzuladen. Jeder Preload konkurriert jedoch um Bandbreite und Netzwerkverbindungen. Eine unwichtige Datei mit hoher Priorität kann deshalb den Download von CSS, Bildern oder anderen tatsächlich benötigten Ressourcen verzögern. Prüfe für jeden Eintrag, ob die Datei direkt für den sichtbaren Seitenbereich erforderlich ist und auf dem überwiegenden Teil der Seitenaufrufe wirklich verwendet wird.
Schriftarten korrekt priorisieren
Bei Schriftarten müssen Ressourcentyp, Dateiformat und Cross-Origin-Einstellung zur späteren CSS-Anforderung passen. Auch lokal eingebundene Webfonts werden von Browsern häufig im Cross-Origin-Modus abgerufen. Ein typischer Eintrag sieht deshalb so aus:
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
Das Attribut crossorigin sorgt dafür, dass der vorgeladene Abruf mit der späteren Schriftanforderung kompatibel ist. Fehlt das Attribut, kann der Browser dieselbe Datei erneut anfordern. Lade außerdem nur die tatsächlich früh verwendeten Schnitte vor. Separate Dateien für Fett, Kursiv und weitere Schriftstärken erhöhen sonst die Zahl priorisierter Downloads.
Das LCP-Bild früh laden
Das Largest Contentful Paint Element, kurz LCP-Element, ist häufig ein großes Bild im oberen Seitenbereich. Ist dieses Bild als CSS-Hintergrund eingebunden, erkennt der Browser seine Adresse erst nach dem Download und der Verarbeitung des Stylesheets. Ein gezielter Preload kann die Entdeckung vorziehen. Bei responsiven Bildern sollten zusätzlich imagesrcset und imagesizes verwendet werden, damit der Browser zur Bildschirmgröße passende Dateien lädt.
Preloading und SEO
Preloading ist kein direkter Ranking-Faktor und verbessert eine Seite nicht automatisch. Der SEO-Nutzen entsteht, wenn das frühere Laden einer Ressource eine reale Verzögerung der sichtbaren Darstellung beseitigt. Besonders relevant ist die Maßnahme, wenn eine spät entdeckte Datei den Largest Contentful Paint beeinflusst oder sichtbarer Text wegen einer Schriftdatei verzögert erscheint.
Messbar ist das zum Beispiel so: Vergleiche den Largest Contentful Paint und den Startzeitpunkt der betroffenen Ressource vor und nach der Änderung. Im Netzwerkprotokoll sollte die Datei früher angefordert werden. Gleichzeitig darf der Ressourcenhinweis keine wichtigeren Downloads verdrängen. Ergänzend kannst du den kostenlosen Ladezeiten-Check nutzen, um technische Verzögerungen und Optimierungsmöglichkeiten zu erkennen.
Technische Ladezeitmaßnahmen sollten immer gemeinsam mit Bildgrößen, Serverantworten, Caching und blockierenden Dateien bewertet werden. Eine einzelne Optimierung löst selten jede Verzögerung. Eine strukturierte Onpage-Optimierung verbindet Ressourcenpriorisierung deshalb mit der Prüfung des HTML-Aufbaus, der internen Verlinkung und weiterer technischer Signale.
Preloading, Prefetch und Preconnect
Der Unterschied zwischen Preloading, Prefetch und Preconnect liegt im Zeitpunkt und in der Sicherheit der erwarteten Nutzung. Preloading betrifft eine konkrete Datei, die für die aktuelle Seite benötigt wird. Prefetch bereitet eine möglicherweise später benötigte Ressource vor. Preconnect baut frühzeitig eine Verbindung zu einer externen Domain auf, lädt aber noch keine konkrete Datei.
| Methode | Zweck | Typischer Einsatz |
|---|---|---|
preload |
Konkrete Ressource der aktuellen Seite früh laden | LCP-Bild, Schriftart oder spät entdeckte Datei |
prefetch |
Mögliche Ressource für eine spätere Navigation vorbereiten | Dateien einer wahrscheinlich folgenden Seite |
preconnect |
Verbindung zu einer anderen Domain früh aufbauen | CDN, Schriftanbieter oder externe Programmierschnittstelle |
dns-prefetch |
Domainnamen vorzeitig auflösen | Externe Hosts mit geringerer Priorität |
fetchpriority |
Priorität einer regulär eingebundenen Ressource beeinflussen | Direkt im HTML vorhandenes Hauptbild |
Preloading und Lazy Loading verfolgen entgegengesetzte Ziele. Preloading zieht den Abruf wichtiger Dateien vor. Lazy Loading verschiebt den Abruf nicht unmittelbar benötigter Bilder oder eingebetteter Inhalte. Ein sichtbares Hauptbild sollte deshalb nicht gleichzeitig verzögert geladen werden. Bilder außerhalb des sichtbaren Bereichs benötigen dagegen in der Regel keinen Preload.
Preloading richtig prüfen
Eine belastbare Prüfung beginnt in den Entwicklertools des Browsers. Öffne das Netzwerkprotokoll, deaktiviere den Cache für den Test und lade die Seite neu. Kontrolliere anschließend, wann die Ressource angefordert wird, welche Priorität sie erhält und ob dieselbe URL mehrfach auftaucht.
Bei einem Website-Relaunch sollte die Ressourcenpriorisierung vor dem Livegang geprüft werden, weil sich Dateipfade, Schriftarten und Hauptbilder ändern können. Die SEO-Checkliste für den Website-Relaunch hilft dabei, Ladezeiten gemeinsam mit Weiterleitungen, Indexierung und weiteren technischen Anforderungen zu kontrollieren.
Häufige Fragen zu Preloading
Verbessert Preloading automatisch die Ladezeit?
Nein. Preloading verbessert die Ladezeit nur, wenn eine wichtige Ressource ohne den Hinweis zu spät entdeckt wird. Bereits früh geladene oder für den sichtbaren Bereich unwichtige Dateien profitieren in der Regel nicht davon.
Kann ich mehrere Dateien gleichzeitig vorladen?
Ja, technisch sind mehrere Einträge möglich. Jeder Eintrag beansprucht jedoch Bandbreite und konkurriert mit anderen Downloads. Beschränke die Auswahl deshalb auf wenige Ressourcen, die für die erste sichtbare Darstellung benötigt werden.
Sollte ich jedes Webfont-Format vorladen?
Nein. Lade nur das Format und die Schriftschnitte vor, die moderne Zielbrowser tatsächlich anfordern und unmittelbar verwenden. Häufig genügt eine WOFF2-Datei für den zuerst sichtbaren Text.
Was bedeutet die Browserwarnung zu ungenutzten Preloads?
Die Warnung bedeutet, dass eine vorgeladene Datei nicht zeitnah verwendet wurde oder dass die spätere Anforderung nicht zum Ressourcenhinweis passte. Prüfe Adresse, Ressourcentyp, Cross-Origin-Einstellung und den tatsächlichen Einsatz auf der Seite.
Ist Preloading auch für JavaScript sinnvoll?
Preloading kann für ein spät entdecktes, unmittelbar benötigtes Skript sinnvoll sein. Die Maßnahme führt das Skript jedoch nicht aus. Für JavaScript-Module kann abhängig von der Einbindung ein Modulepreload die passendere Variante sein.
Kann Preloading den Largest Contentful Paint verbessern?
Ja, wenn das LCP-Element wegen einer spät entdeckten Ressource verzögert erscheint. Typische Beispiele sind CSS-Hintergrundbilder und wichtige Schriftdateien. Der Effekt muss mit einem Vorher-Nachher-Test bestätigt werden.
Wenn du Ressourcenpriorisierung, Core Web Vitals und weitere technische Faktoren deiner Website systematisch prüfen lassen möchtest, bietet ein Potenzialcheck eine konkrete Ausgangsbasis.
Sie haben noch Fragen?
