Die sinnvollen link-rel-preload-Tags erzeugen

Webteams nutzen es, wenn eine entscheidende Ressource Vorrang braucht, ohne durch wahlloses Preloading Bandbreite zu vergeuden.

Die sinnvollen link-rel-preload-Tags erzeugen. Ihre Daten bleiben lokal, während das Ergebnis leicht zu prüfen und erneut zu nutzen ist.

Bedienung

Liste eine Ressource pro Zeile auf, etwa eine Schriftdatei oder ein wichtiges Bild.
Verwende die genauen Pfade, die deine Seite anfordert.
Führe den Generator aus, um die link-rel-preload-Tags zu erzeugen.
Füge diese Tags im Head vor anderen vorrangigen Ressourcen ein.

Beispiel

Ein Team bemerkt, dass die Titelschrift zu spät ankommt und das Layout verschiebt. Es listet die von der Seite verwendete Schriftdatei auf, erzeugt die Preload-Tags und platziert sie im Head. So vermeidet es, jedes Asset der Website vorzuladen. Ein Test mit langsamem Netzwerk zeigt dann, ob die Schriftpriorität nützlich ist.

Eingabe

/assets/font.woff2
/assets/hero.webp

Grenzen und Formate

Preloading ist nur für wenige wirklich kritische Ressourcen nützlich.
Ein falscher Pfad verhindert, dass der Browser die Datei findet.
Zu viele Tags können andere nützliche Elemente verzögern.
Das Werkzeug prüft nicht, ob die Ressource bereits im Cache liegt.
Browser ignorieren möglicherweise ein unnötiges oder fehlerhaftes Preload.

Wo die Verarbeitung stattfindet

Die von dir eingegebenen Pfade werden in deinem Browser in Tags umgewandelt. Es wird keine Datei versendet und das Werkzeug löst keine Netzwerkaufrufe aus. Der erzeugte Code bleibt zum Kopieren verfügbar.

Häufige Fragen

Welche Ressourcen sollte ich vorladen?

Reserviere Preloading für Dateien, die im ersten Rendering benötigt werden, etwa eine Überschriftenschrift oder ein großes Titelbild. Zu viele Elemente vorzuladen schwächt das Prioritätssignal. Prüfe mit Browser-Werkzeugen, ob die Änderung hilft.

Wie unterscheidet sich das von Lazy Loading?

Preloading fordert den Browser auf, eine Ressource früher abzurufen. Lazy Loading verzögert Ressourcen, die noch nicht benötigt werden. Sie lösen entgegengesetzte Probleme und sollten für unterschiedliche Assets verwendet werden.

Kann ich eine externe Schriftart vorladen?

Du kannst je nach Setup einen relativen oder absoluten Pfad eingeben. Stelle sicher, dass er mit der Datei übereinstimmt, die deine Seite tatsächlich ausliefert. Cross-Origin- und Sicherheitsregeln können weiterhin beeinflussen, wie der Browser sie verwendet.