Was ist das Vorladen von Assets (Preloading)?

Was ist Preloading für Assets?

Preloading bedeutet, dem Browser mit <link rel="preload"> oder einem passenden Link-Header mitzuteilen, dass die aktuelle Seite bald eine bestimmte Datei braucht. Der Browser lädt sie dann früh und mit höherer Priorität, statt sie erst später zu entdecken. Das eignet sich für Ressourcen, die spät auffallen, etwa eine im CSS genannte Schrift oder ein Hero-Bild als CSS-Hintergrund.

So funktioniert Preload

Ein Preload braucht ein href und einen as-Wert, der den Dateityp angibt: fetch, font, image, script, style oder track. Anhand von as setzt der Browser die richtige Priorität und ordnet den Preload der späteren Anfrage zu. Ein vorgeladenes Skript wird heruntergeladen und gecacht, aber nicht ausgeführt. Für JavaScript-Module gibt es modulepreload.

• Schriften und fetch-Anfragen brauchen crossorigin, auch bei Dateien vom eigenen Origin. Schriften nutzen immer anonymes CORS; ohne das Attribut wird der Preload nicht wiederverwendet und die Datei doppelt geladen.
• type lässt den Browser ein nicht unterstütztes Format überspringen, zum Beispiel type="font/woff2".
• media macht einen Preload bedingt, sodass ein schmaler Bildschirm ein anderes Bild vorlädt als ein breiter.

Beispiel

Eine Landingpage zeigt ein per CSS eingebundenes Hero-Bild und eine Webschrift. Der Browser erfährt von beiden erst, nachdem er das Stylesheet geladen und geparst hat, was den Largest Contentful Paint verzögert. Zwei Zeilen im <head> verlegen die Entdeckung an den Anfang:

<link rel="preload" href="/hero.webp" as="image" type="image/webp" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Preload, Prefetch und Preconnect

Diese Hinweise lösen verschiedene Probleme. Preload gilt für etwas, das die aktuelle Seite bald braucht. Prefetch gilt für etwas, das eine spätere Navigation brauchen könnte, mit niedriger Priorität. Preconnect baut nur die Verbindung zu einem anderen Origin auf und hilft bei den Netzwerkverbindungen zu Drittanbietern. Nutzen Sie Preload nicht für Dateien der nächsten Seite und Prefetch nicht für das, was die Seite jetzt braucht.

Häufige Fehler

• Zu viel vorladen. Preloads konkurrieren miteinander und mit Dateien, die der Browser ohnehin zuerst holen würde. Beschränken Sie sich auf ein oder zwei, die das Rendering blockieren.
• Mehrere Formate desselben Bildes vorladen. Laut MDN wird jede vorgeladene Variante heruntergeladen, obwohl nur eine genutzt wird. Laden Sie das Format vor, das die meisten Besucher erhalten.
• Falscher as-Wert oder fehlendes crossorigin. Dann passt der Preload nicht zur echten Anfrage, und die Datei wird doppelt geholt.
• Eine Ressource vorladen, die die Seite nie nutzt. Das kostet Bandbreite und kann wichtigere Dateien verzögern.
• Etwas vorladen, das bewusst verzögert laden soll. Das hebt den Gewinn von Lazy Loading auf. Laden Sie nur vor, was beim ersten Rendern sichtbar ist.

Bezug zu Performance-Tests und Monitoring

Ein Preload ändert, was der Browser tut, also messen Sie ihn. Vergleichen Sie Wasserfall und LCP mit und ohne Hinweis, auch bei gedrosselter Verbindung. Der kostenlose Core-Web-Vitals-Checker zeigt, ob echte Chrome-Nutzer LCP, INP und CLS schon bestehen, und das LoadFocus Page-Speed-Monitoring führt geplante Lighthouse-Audits aus 25 Cloud-Regionen aus, sodass Sie sehen, ob eine Änderung überall half oder nur nahe Ihres Servers. Weitere Frontend-Maßnahmen finden Sie in der 10-Schritte-Anleitung für schnellere Websites (auf Englisch).

Häufige Fragen: Preloading für Assets

Was ist der Unterschied zwischen Preload und Prefetch?

Preload holt eine Datei, die die aktuelle Seite bald braucht, mit höherer Priorität. Prefetch holt eine Datei, die eine spätere Seite brauchen könnte, mit niedriger Priorität.

Welche Assets sollte ich vorladen?

Nur die wenigen, die spät entdeckt werden und das erste Rendern blockieren: das LCP-Bild, eine wichtige Webschrift oder ein kritisches Skript bzw. Stylesheet. Prüfen Sie im Wasserfall, ob jedes wirklich spät entdeckt wird.

Warum wird meine Schrift doppelt geladen?

Schrift-Preloads brauchen das Attribut crossorigin, auch bei Dateien vom eigenen Origin. Ohne es wird die vorgeladene Kopie für die echte Schriftanfrage nicht wiederverwendet.

Führt Preload mein Skript aus?

Nein. Ein vorgeladenes Skript wird heruntergeladen und gecacht und läuft erst, wenn die Seite es per Script-Tag einbindet.

Kann Preload eine Seite verlangsamen?

Ja. Zu viele Preloads konkurrieren um Bandbreite mit wichtigeren Dateien. Messen Sie den LCP vor und nach jedem einzelnen.