Preload

TL;DR

Preload lädt kritische Ressourcen mit höchster Priorität. Ideal für Fonts, Hero-Bilder und CSS, die sofort gebraucht werden.

Was ist Preload?

Preload teilt dem Browser mit: "Diese Ressource wird definitiv gebraucht, lade sie jetzt mit höchster Priorität." Der Browser beginnt sofort mit dem Download, noch bevor er die Ressource im Code findet.

Wann Preload verwenden

• Web Fonts (verhindern FOUT)
• Hero-Bilder (Above the Fold)
• Kritisches CSS
• Wichtige Scripts

Syntax

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Wichtig: as-Attribut

Das as-Attribut ist Pflicht:

• as="font" für Fonts
• as="image" für Bilder
• as="style" für CSS
• as="script" für JavaScript

Preload und Nachhaltigkeit

Gezielt einsetzen:

• Nur wirklich kritische Ressourcen
• Zu viel Preload verzögert andere Ressourcen
• Jede Preload-Ressource kostet Bandbreite

Fazit

Preload ist das stärkste Resource Hint. Es garantiert frühes Laden kritischer Ressourcen – aber sollte sparsam eingesetzt werden.