Preload (<link rel="preload">) ist eine deklarative Browser-Anweisung, die eine Ressource mit hoher Prioritaet laedt, ohne das Rendering zu blockieren. Im Gegensatz zu Prefetch, das fuer zukuenftige Seiten vorgesehen ist, deklariert Preload Ressourcen, die fuer die aktuelle Seite kritisch sind.
Preload loest ein fundamentales Problem: Manche kritische Ressourcen werden vom Browser erst spaet entdeckt. Ein Hintergrundbild in CSS, ein Font in einem Stylesheet oder ein Bild, das per JavaScript geladen wird — all diese Ressourcen werden erst geladen, wenn der Browser das entsprechende CSS oder JavaScript geparst hat. Preload umgeht diese Verzoegerung.
Syntax und Attribute
Grundsyntax
<link rel="preload" href="/fonts/poppins.woff2" as="font" type="font/woff2" crossorigin>
Wichtige Attribute
| Attribut | Beschreibung | Pflicht |
|---|---|---|
href | URL der Ressource | Ja |
as | Ressourcentyp (font, image, script, style, fetch) | Ja |
type | MIME-Type (z. B. font/woff2) | Empfohlen |
crossorigin | Fuer CORS-Ressourcen (Fonts immer) | Situationsabhaengig |
media | Media Query fuer responsive Preloads | Optional |
fetchpriority | high, low, auto | Optional |
Das as-Attribut ist entscheidend: Es bestimmt die Lade-Prioritaet und stellt sicher, dass die Ressource korrekt gecacht wird. Ohne as wird die Ressource mit niedrigster Prioritaet geladen.
Typische Einsatzgebiete
LCP-Bild vorladen
Das LCP-Element ist oft ein Hero-Bild. Wenn es per CSS (background-image) oder erst nach Framework-Hydration eingebunden wird, entdeckt der Browser es spaet:
<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">
Web Fonts vorladen
Fonts werden erst geladen, wenn CSS geparst und ein Text-Element gefunden wird, das den Font nutzt. Preload verkuerzt diese Kette:
<link rel="preload" as="font" href="/fonts/poppins-light.woff2" type="font/woff2" crossorigin>
Wichtig: Fonts benoetigen immer crossorigin, auch wenn sie vom gleichen Server kommen.
Kritisches CSS oder JavaScript
Stylesheets oder Scripts, die dynamisch geladen werden (z. B. per JavaScript-Import), koennen vorgeladen werden:
<link rel="preload" as="style" href="/css/above-fold.css">
<link rel="preload" as="script" href="/js/critical-module.js">
Responsive Preloads
Verschiedene Bilder fuer verschiedene Viewports vorladen:
<link rel="preload" as="image" href="/images/hero-desktop.webp" media="(min-width: 1068px)">
<link rel="preload" as="image" href="/images/hero-mobile.webp" media="(max-width: 1067px)">
Preload in Next.js
Next.js handhabt viele Preload-Szenarien automatisch:
next/font: Fonts werden automatisch preloaded und mitsize-adjustoptimiertnext/imagemitpriority: Generiert automatisch<link rel="preload">fuer das Bildnext/scriptmitstrategy="beforeInteractive": Script wird frueh geladen
Manuelles Preload in Next.js ist selten noetig, kann aber ueber die <Head>-Komponente oder metadata.links in App Router ergaenzt werden.
Best Practices
Do's
- LCP-Bild preloaden, wenn es nicht per
<img>im HTML steht - Kritische Fonts preloaden (maximal 1-2 Font-Dateien)
as-Attribut immer korrekt setzencrossoriginbei Fonts nicht vergessen- Wirkung mit Lighthouse oder Chrome DevTools verifizieren
Don'ts
- Nicht mehr als 3-5 Preloads pro Seite
- Keine Below-the-Fold-Ressourcen preloaden — dafuer gibt es Prefetch und Lazy Loading
- Preload nicht mit Prefetch verwechseln (andere Prioritaet, anderer Zweck)
- Keine Ressourcen preloaden, die sofort im HTML-Quellcode stehen (der Browser findet sie ohnehin)
- Nicht-verwendete Preloads entfernen (Chrome warnt nach 3 Sekunden)
Preload und Core Web Vitals
Preload hat direkten Einfluss auf die Core Web Vitals:
| Metrik | Einfluss durch Preload |
|---|---|
| LCP | Starke Verbesserung durch frueheres Laden des LCP-Elements |
| FCP | Verbesserung durch frueheres Font- und CSS-Loading |
| CLS | Indirekt: Fonts mit Preload + swap verursachen weniger Layout-Shift |
Die korrekte Kombination von Preload (fuer die aktuelle Seite) und Prefetch (fuer naechste Navigationen) ist ein zentraler Baustein der technischen SEO- und Performance-Optimierung.