Preload & Preconnect (Ressourcen-Hints)
Preload und Preconnect sind HTML-Ressourcen-Hints, mit denen Entwicklerinnen und Entwickler dem Browser wichtige Ladeschritte vorab mitteilen. `<link rel="preload">` lädt eine konkret bekannte, kritische Ressource (z. B. Font, Hero-Bild) mit hoher Priorität vorzeitig; `<link rel="preconnect">` baut DNS-Auflösung, TCP-Verbindung und TLS-Handshake zu einer fremden Domain im Voraus auf, bevor die eigentliche Anfrage erfolgt.
In der Praxis
In der Praxis setzt man Preload gezielt für Ressourcen ein, die für den Largest Contentful Paint entscheidend sind, etwa das Hero-Bild oder eine benutzerdefinierte Schriftart, oft kombiniert mit fetchpriority="high". Font-Preloads brauchen dabei zwingend das Attribut crossorigin, sonst lädt der Browser die Datei ein zweites Mal. Preconnect eignet sich für kritische Drittanbieter-Domains wie ein Bild-CDN oder einen Analytics-Dienst, deren Ressourcen sicher bald benötigt werden – laut web.dev spart eine frühzeitige Verbindung dabei rund 100 bis 500 Millisekunden. Wichtig: Beide Hints sollten sparsam eingesetzt werden, denn zu viele parallele Preloads oder Preconnects konkurrieren um Bandbreite und Rechenzeit und können das Laden wichtigerer Ressourcen sogar verzögern; der Browser kappt zudem ungenutzte Preconnect-Verbindungen nach 10 Sekunden.