jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose Preload-Tag-Builder

Generiere korrekte Preload-Link-Tags für Schriftarten, Hero-Bilder, CSS und Skripte.

Tool wird geladen...

Was ist Preload-Tag-Builder?

Preload teilt dem Browser mit, eine Ressource frühzeitig abzurufen, bevor sie normalerweise entdeckt würde. Es beschleunigt das Laden von Schriftarten, Hero-Bildern, kritischem CSS und Skripten. Das as-Attribut ist erforderlich, um dem Browser mitzuteilen, welcher Ressourcentyp erwartet wird.

Kurze Antwort

Verwenden Sie preload, um kritische Ressourcen - wie Hero-Bilder, Schriftarten oder oberhalb-des-Falzes CSS - abzurufen, bevor der Parser sie entdeckt. Laden Sie nur wenige Ressourcen pro Seite vor, um Bandbreitenkonflikte zu vermeiden.

Last updated: 2026-05-25

Einschränkungen

  • Preload erfordert das as-Attribut. Ein fehlender oder falscher Wert kann dazu führen, dass der Browser die Ressource doppelt abruft.
  • Cross-Origin vorgeladene Ressourcen wie Schriftarten von einem CDN müssen das crossorigin-Attribut enthalten.
  • Übermäßiges Vorladen verzögert andere Ressourcen und kann die Leistung verschlechtern.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Ressourcentyp, den Sie vorladen möchten: Schriftart, Bild, CSS oder Skript.
  2. Geben Sie die URL oder den Dateipfad der Ressource ein.
  3. Das Tool fügt die korrekten as- und crossorigin-Attribute für den ausgewählten Typ hinzu.
  4. Kopieren Sie das link-Tag in den Seitenkopf vor anderen Ressourcen-Referenzen.

Wofür du es nutzen kannst

  • Laden Sie eine kritische Schriftartdatei vor, damit Text beim ersten Paint korrekt dargestellt wird.
  • Laden Sie ein Hero-Bild vor, um den Largest Contentful Paint zu verbessern.
  • Laden Sie eine kritische CSS-Datei oder ein JavaScript-Modul für schnelleres Rendering vor.

Anwendungsfalle

Praxisbeispiele

Beispiel

Webschriftarten-Vorladen

Eine Seite verwendet eine benutzerdefinierte Webschriftart. Das preload-Tag mit as='font' und crossorigin ruft sie früh ab und reduziert das Flackern von unsichtbarem Text.

Beispiel

Hero-Bild-Vorladen für LCP

Eine Landing Page lädt das Hero-Hintergrundbild mit as='image' vor, um die LCP-Zeit um mehrere hundert Millisekunden zu reduzieren.

Haufige Fehler

  • Zu viele Ressourcen vorzuladen, was Bandbreite verschwendet.
  • Preload ohne das erforderliche as-Attribut zu verwenden.
  • Preload für Cross-Origin-Schriftarten ohne crossorigin hinzuzufügen.

Überprüfung

  1. Öffnen Sie das Chrome DevTools Netzwerk-Panel und prüfen Sie, ob die vorgeladene Ressource früh im Request-Wasserfall mit der richtigen Priorität erscheint.
  2. Prüfen Sie die Browser-Konsole auf fehlende Preload-Warnungen.

Vergleich

preload vs prefetch vs modulepreload

Aspectpreloadprefetchmodulepreload
What it loadsResources needed for the current pageResources likely needed for the next navigationES module scripts for the current page
When the browser fetches itImmediately, at high priority during page loadDuring idle time after the current page finishes loadingImmediately at high priority, similar to preload, but fetches the module and its dependencies
What it is best forCritical fonts, hero images, above-the-fold CSSNext-page resources such as docs, images, or scripts for the likely next pageES module entry points and their dependency trees in modern bundler output
Required attributesrel="preload" and the as attributerel="prefetch"rel="modulepreload"
Browser support milestoneChrome 50+, Safari 9+, Firefox 56+Chrome 50+, Safari 9+, Firefox 2+Chrome 80+, Safari 15+, Firefox 115+

Preload fetches current-page resources early at high priority. Prefetch fetches likely next-page resources during idle time. Modulepreload is a specialized preload for ES module scripts and their dependencies.

FAQ

Fragen zu Preload-Tag-Builder

Was ist der Unterschied zwischen preload und prefetch?

Preload ruft Ressourcen für die aktuelle Seite so früh wie möglich ab. Prefetch ruft Ressourcen ab, die wahrscheinlich für die nächste Navigation benötigt werden.

Sollte ich alles vorladen?

Nein. Laden Sie eine kleine Anzahl wirklich kritischer Ressourcen vor. Zu viele preload-Hinweise verzögern wichtige Ressourcen.

Benötige ich das as-Attribut auf jedem preload-Link?

Ja. Das as-Attribut ist bei preload-Links erforderlich. Es teilt dem Browser den Ressourcentyp mit (style, script, font, image, fetch usw.) für korrekte Priorität, CSP-Prüfungen und Caching-Regeln.

Was passiert, wenn eine vorgeladene Ressource nicht innerhalb weniger Sekunden genutzt wird?

Der Browser gibt eine Konsolenwarnung aus und die Ressource kann verworfen werden. Unbenutzte Preloads verschwenden Bandbreite. Prüfen Sie immer, ob die vorgeladene Ressource innerhalb von etwa 3 Sekunden genutzt wird.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren