jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose Fetch-Priority-Attribut-Generator

Generiere fetchpriority-Attribute für Bilder, Skripte und Link-Tags zur Verbesserung der Core Web Vitals.

Tool wird geladen...

Was ist Fetch-Priority-Attribut-Generator?

Fetchpriority ist ein HTML-Attribut, das dem Browser einen Hinweis gibt, welche Ressourcen zuerst geladen werden sollen. Es hilft, den Largest Contentful Paint zu verbessern, wenn es auf Hero-Bilder angewendet wird, und kann nicht-kritische Ressourcen herabstufen. Es unterscheidet sich von preload und loading='lazy'.

Kurze Antwort

Verwenden Sie fetchpriority='high' nur für das eine Bild oder die Ressource, die am wahrscheinlichsten zum Largest Contentful Paint wird. Markieren Sie nicht viele Ressourcen als hochprior - der Browser entscheidet dennoch über die Ladereihenfolge.

Last updated: 2026-05-25

Einschränkungen

  • fetchpriority ist ein Hinweis, keine Anweisung. Der Browser kann ihn basierend auf Heuristiken ignorieren.
  • Ältere Browser einschließlich Safari 15.4 und niedriger unterstützen fetchpriority nicht.
  • Die übermäßige Verwendung von fetchpriority='high' verwässert den Hinweis.

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

So nutzt du dieses Tool

  1. Wählen Sie den Ressourcentyp: image, script oder link-Tag.
  2. Wählen Sie den Anwendungsfall: LCP-Hero-Bild, Inhalt unterhalb des Falzes oder nicht-kritisches Skript.
  3. Das Tool empfiehlt den fetchpriority-Wert basierend auf Ihrer Auswahl.
  4. Kopieren Sie das generierte Tag und testen Sie mit Lighthouse, um die LCP-Verbesserung zu bestätigen.

Wofür du es nutzen kannst

  • Wenden Sie fetchpriority='high' auf das LCP-Hero-Bild für schnelleres Laden an.
  • Stufen Sie Bilder unterhalb des Falzes mit fetchpriority='low' herab.
  • Priorisieren Sie kritische Skripte und Stylesheets, die das Rendering blockieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

LCP-Hero-Bild-Optimierung

Ein Hero-Bild, das das LCP-Element ist, erhält fetchpriority='high' plus ein optimiertes srcset. Der Browser lädt dieses Bild vor anderen Ressourcen.

Beispiel

Niedrigprioritäre Fußzeilenbilder

Fußzeilenbilder und Third-Party-Embeds erhalten fetchpriority='low', um Konflikte mit kritischen Ressourcen oberhalb des Falzes zu reduzieren.

Haufige Fehler

  • fetchpriority='high' auf viele Ressourcen anzuwenden, was den Vorteil zunichtemacht.
  • fetchpriority auf vorgeladene Ressourcen anzuwenden, wo es bereits auf das preload-Tag zutrifft.
  • Zu vergessen, fetchpriority mit passenden loading- und decoding-Attributen zu kombinieren.

Überprüfung

  1. Öffnen Sie das Chrome DevTools Netzwerk-Panel und prüfen Sie die Prioritätsspalte, um zu bestätigen, dass der fetchpriority-Hinweis in der Ladereihenfolge sichtbar ist.
  2. Vergleichen Sie die LCP-Zeit mit und ohne das Attribut im Performance-Panel.

Vergleich

fetchpriority vs loading="lazy"

Aspectfetchpriorityloading="lazy"
What it controlsRelative loading priority of a resource compared to other resources on the same pageWhether the browser delays loading the resource until it is near the viewport
When to useOn the LCP element to load it sooner, or on non-critical resources to deprioritize themOn images and iframes below the fold to defer their load until the user scrolls near them
Effect on LCPCan improve LCP when set to high on the hero imageCan worsen LCP if applied above the fold. Only use below the fold.
Valid on which elementsimg, link, script, iframeimg, iframe
Browser supportChrome 101+, Edge 101+, Safari 16+, Firefox 122+Chrome 77+, Edge 79+, Safari 15.4+, Firefox 75+

fetchpriority hints at relative priority for loading while loading="lazy" defers loading until the element is near the viewport. They address different performance concerns and can be used together on the same element.

FAQ

Fragen zu Fetch-Priority-Attribut-Generator

Wie viele Ressourcen sollten fetchpriority='high' erhalten?

Höchstens ein oder zwei kritische Ressourcen. Wenn alles hohe Priorität hat, hat nichts Priorität.

Garantiert fetchpriority schnelleres Laden?

Nein, es ist ein Hinweis. Der Browser entscheidet die endgültige Ladereihenfolge basierend auf vielen Faktoren.

Welche Ressourcen profitieren am meisten von fetchpriority='high'?

Das LCP-Bild (meist das größte sichtbare Hero-Bild), die Haupt-CSS-Datei und kritische Webfonts. Nur ein bis zwei Ressourcen sollten hohe Priorität erhalten.

Wann sollte ich fetchpriority='low' verwenden?

Verwenden Sie niedrige Priorität für Bilder weit unterhalb des Falzes, Analytics-Skripte, Chat-Widgets und Social-Media-Embeds, die nicht zum initialen Seiten-Rendering beitragen.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren