HTML Academy · Lektion

Preload Prefetch und Preconnect

Geben Sie dem Browser Hinweise, wichtige Ressourcen frühzeitig abzurufen

Preload Prefetch und Preconnect ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Resource Hints?

Moderne Browser entdecken Ressourcen erst, während sie HTML parsen. Resource Hints, also link-rel-Attribute im <head>, ermöglichen es Ihnen, dem Browser mitzuteilen: „Ich werde das bald benötigen.“ Dadurch startet die Netzwerkanfrage früher, als es die normale Entdeckung erlauben würde.

preload lädt sofort

<link rel="preload" as="..." href="..."> weist den Browser an, die Ressource sofort mit der für den as-Typ passenden Priorität abzurufen. Verwenden Sie preload für Assets, die die Seite garantiert benötigt: Hero-Bilder, kritische Fonts und JavaScript für die jeweilige Route.

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

Das as-Attribut

Setzen Sie as immer. Das Attribut bestimmt die Anfragepriorität, den Accept-Header und die CSP-Durchsetzung. Häufige Werte sind „script“, „style“, „font“, „image“ und „fetch“. Ohne as ignorieren Browser den Preload und protokollieren eine Warnung.

crossorigin für Fonts

Für Font-Preloads ist crossorigin auch bei Fonts desselben Ursprungs erforderlich. Ohne dieses Attribut ruft der Browser den Font bei der tatsächlichen Verwendung im CORS-Modus, für den Preload jedoch im anonymous-Modus ab und verdoppelt dadurch den Download – ein subtiler und häufiger Performance-Fehler.

prefetch lädt später

<link rel="prefetch" href="..."> weist darauf hin, dass eine Ressource für eine zukünftige Navigation benötigt wird. Der Browser lädt sie während der Leerlaufzeit mit der niedrigsten Priorität herunter und legt sie im Cache ab, sodass die nächste Seite sofort angezeigt werden kann.

<link rel="prefetch" href="/next-page.html">

preconnect wärmt Verbindungen auf

<link rel="preconnect" href="https://api.example.com"> weist den Browser an, DNS-, TCP- und TLS-Handshake zu einem Drittanbieter-Ursprung durchzuführen, bevor die erste Anfrage eintrifft. Verwenden Sie es für API-Hosts und CDNs, auf die Ihre Seite zugreifen wird.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

dns-prefetch ist der schlankere Verwandte

<link rel="dns-prefetch"> führt nur die DNS-Auflösung durch und ist damit günstiger als preconnect. Verwenden Sie es für viele Drittanbieter-Hosts, bei denen eine vollständige Preconnect-Verbindung zu jedem einzelnen zu teuer wäre. Setzen Sie preconnect für die wichtigsten wenigen Ursprünge ein.

Begrenzen Sie die Hints

Zu viele Preloads konkurrieren um dieselbe Bandbreite und verlangsamen die Seite. Laden Sie nur Ressourcen vor, die den kritischen Renderpfad blockieren – normalerweise ein Hero-Bild und ein oder zwei kritische Fonts. Alles andere kann normal entdeckt werden.

modulepreload für ES-Module

<link rel="modulepreload" href="/app.js"> lädt nicht nur die Moduldatei, sondern auch ihren Abhängigkeitsbaum vor. Dadurch wird der kaskadierende Download-Wasserfall vermieden, der für native ES-Module typisch ist, bei denen jeder Import darauf wartet, dass der vorherige geparst wird.

Auswirkungen messen

Verwenden Sie in der Spalte „Initiator“ des Network-Panels, um zu überprüfen, ob vorab geladene Ressourcen tatsächlich früh abgerufen wurden, und verwenden Sie das Lighthouse-Audit „Preconnect to required origins“, um ungenutzte Möglichkeiten zu erkennen. Das Entfernen eines langsamen, aber ungenutzten Preloads bringt oft genauso viel wie das Hinzufügen eines guten Preloads.

Besonderheiten der einzelnen Hints

preload löst eine Konsolenwarnung aus, wenn die Ressource nicht innerhalb von ~3 Sekunden verwendet wird. prefetch kann vom Browser bei Netzwerk- oder Speicherdruck abgebrochen werden. preconnect-Verbindungen werden nach ~10 Sekunden Inaktivität geschlossen – verwenden Sie es für Ressourcen, die bald angefordert werden.

Wissensfrage

Was macht preconnect, das dns-prefetch nicht macht?

Zusammenfassung

preload ruft kritische Ressourcen sofort ab, mit as und bei Bedarf crossorigin. prefetch legt Ressourcen für die wahrscheinlich nächste Navigation während der Leerlaufzeit im Cache ab. preconnect wärmt Verbindungen mit TCP und TLS auf, während dns-prefetch nur DNS verwendet, um Verbindungen zu Drittanbieter-Ursprüngen vorzubereiten. modulepreload erweitert preload auf den Abhängigkeitsbaum von ES-Modulen. Verwenden Sie diese Hinweise sparsam und messen Sie ihre Wirkung.

Häufig gestellte Fragen

Ist die Lektion „Preload Prefetch und Preconnect“ kostenlos?

Ja — der vollständige Text von „Preload Prefetch und Preconnect“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Preload Prefetch und Preconnect“?

Geben Sie dem Browser Hinweise, wichtige Ressourcen frühzeitig abzurufen Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Preload Prefetch und Preconnect“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML Academy