Beschleunigen Sie das Laden von Ressourcen mit Prioritätshinweisen und Abrufpriorität

Wie schnell werden Ihre wichtigsten Ressourcen geladen?

Genau diese Frage beschäftigt Website-Besitzer (und erfahrene Web-Experten) mit Nadeln und Nadeln. Und zufällig ist es das, was Ihre Website in den ersten Millisekunden macht oder bricht.

Wenn es um die Optimierung der Ressourcenbelastung geht, haben Sie zwei Möglichkeiten:

1. Verlassen Sie sich vollständig auf die Mechanismen der Browser, um Ressourcen in einer optimalen Reihenfolge herunterzuladen und abzurufen.
2. Versuchen Sie, ihnen zu helfen, indem Sie Ressourcenhinweise implementieren.

So gut moderne Browser auch sind, jede Site/Anwendung unterscheidet sich leider in Einrichtung und Kontext. Und obwohl sie ziemlich gut darin sind, Ressourcenprioritäten zuzuweisen, reicht das in einigen Fällen nicht aus.

Leider haben Ressourcenhinweise einen begrenzten Einfluss auf die Ressourcenpriorisierung.

Glücklicherweise gibt es einen neuen Hinweis, den Sie Ihrer Web-Performance-Toolbox hinzufügen können – Prioritätshinweise.

Und in diesem Artikel erfahren Sie mehr über:

• Was Prioritätshinweise sind;
• Wann man sie verwendet;
• Wie man sie über Fetchpriority implementiert;
• Wie Sie sie auf Ihrer Website testen können.

Lass uns anfangen!

Was sind Prioritätshinweise?

Prioritätshinweise sind ein Signal, das es Websitebesitzern und -entwicklern ermöglicht, die Priorität von Ressourcen (z. B. Bilder, Schriftarten, CSS, Skripte und iFrames) anzugeben, wenn Browser sie laden.

Der Browser muss beim Erstellen einer Webseite alle Arten von Ressourcen herunterladen. Als Prioritätsressource fordert es zuerst das HTML-Dokument an und lädt es herunter.

Aber wie bestimmt ein Browser, was als nächstes geladen werden soll?

Nun, Browser haben eine Reihe von vorgegebenen Prioritäten für jeden Ressourcentyp:

Diese Standardprioritäten funktionieren normalerweise ziemlich gut, was zu einer guten Webleistung führt.

Wie Addy Osmani jedoch in seinem Artikel über Prioritätshinweise erwähnte, können Browser ziemlich gut fundierte Vermutungen darüber anstellen, was als nächstes abgerufen werden soll.

Aber sie kennen Ihr Projekt nicht so gut wie Sie.

Es könnte also ein wenig Feintuning nötig sein:

„Browser wie Chrome verfügen über Heuristiken, um zu versuchen, Ressourcen mit der entsprechenden Priorität abzurufen, basierend auf Signalen, z. B. ob sie sich im Ansichtsfenster befinden. Allerdings kann Chrome ohne Prioritätshinweise die Priorität für Bilder im Ansichtsfenster nur nach dem Layout erhöhen abgeschlossen ist. Dies ist sehr oft zu spät, und zu diesem Zeitpunkt kann es mit allem anderen konkurrieren. Ein weiterer Grund, Hinweise zu verwenden, ist, dass Sie als Seitenautor wahrscheinlich wissen, was für Ihre Benutzer am wichtigsten ist, zuerst zu sehen und zu sehen kann den Browser informieren, damit er für Ihren Anwendungsfall optimiert werden kann."

Bisher konnten Sie nur entweder preload oder preconnect verwenden.

Und obwohl das Vorladen eine obligatorische Anweisung ist, die Browser einhalten müssen, kann die vorab geladene Ressource in einigen Fällen dennoch eine niedrige Priorität erhalten.

Beispielsweise kann ein vorinstalliertes Largest Contentful Paint (LCP)-Bild eine niedrige Priorität erhalten und von anderen Ressourcen mit hoher Priorität zurückgedrängt werden. In solchen Fällen können Prioritätshinweise das Vorladen perfekt ergänzen und helfen, wie schnell die Ressourcen geladen werden.

Hier ist ein Webinar zu Prioritätshinweisen, in dem Pat Meenan über Prioritätshinweise in Chrome spricht und sie sogar „einen Cheat-Code“ für LCP nennt:

Dies ist ein Paradebeispiel für die Leistungsfähigkeit von Priority Hints.

Sehen wir uns nun an, wann Sie Prioritätshinweise in Ihre Webleistungsstrategie implementieren sollten.

Wann Sie Prioritätshinweise verwenden sollten

Laut Google gibt es 5 Hauptszenarien, in denen Priority Hints helfen könnten:

1. Sie haben mehrere Bilder "above the fold", aber nicht alle müssen die gleiche Priorität haben. Beispielsweise benötigt in einem Bildkarussell nur das erste sichtbare Bild eine höhere Priorität im Vergleich zu den anderen.
   
2. Hero-Bilder im Ansichtsfenster beginnen mit niedriger Priorität. Nachdem das Layout abgeschlossen ist, erkennt Chrome, dass sie sich im Ansichtsfenster befinden, und erhöht ihre Priorität (leider zeigen die Entwicklertools nur die endgültige Priorität an – WebPageTest zeigt beide an). Dies führt normalerweise zu einer erheblichen Verzögerung beim Laden des Bildes. Durch die Bereitstellung des Prioritätshinweises im Markup kann das Bild mit einer hohen Priorität beginnen und viel früher geladen werden.

Hinweis: Das Deklarieren von Skripts als asynchron oder verzögert weist den Browser an, sie asynchron zu laden. Wie in der obigen Abbildung zu sehen, wird diesen Skripten jedoch auch eine "niedrige" Priorität zugewiesen. Möglicherweise möchten Sie ihre Priorität erhöhen und gleichzeitig einen asynchronen Download sicherstellen, insbesondere für alle Skripts, die für die Benutzererfahrung von entscheidender Bedeutung sind.

Sie können die JavaScript-API fetch() verwenden, um Ressourcen oder Daten asynchron abzurufen. Der Abruf erhält vom Browser eine hohe Priorität. Es kann Situationen geben, in denen Sie nicht möchten, dass alle Ihre Abrufe mit hoher Priorität ausgeführt werden, und stattdessen lieber unterschiedliche Prioritätshinweise verwenden. Dies kann hilfreich sein, wenn API-Aufrufe im Hintergrund ausgeführt und mit API-Aufrufen gemischt werden, die auf Benutzereingaben reagieren, z. B. bei der automatischen Vervollständigung. Die Hintergrund-API-Aufrufe können mit niedriger Priorität und die interaktiven API-Aufrufe mit hoher Priorität gekennzeichnet werden.

Der Browser weist CSS und Schriftarten eine hohe Priorität zu, aber alle diese Ressourcen sind möglicherweise nicht gleich wichtig oder für LCP erforderlich. Sie können Prioritätshinweise verwenden, um die Priorität einiger dieser Ressourcen zu verringern.

Fast jede Website fällt unter die ersten beiden Szenarien. Um festzustellen, ob Sie an den anderen arbeiten sollten, graben Sie sich entweder tiefer in Ihren (HTML/JS)-Code ein oder wenden Sie sich an einen Webentwickler.

So implementieren Sie Prioritätshinweise: Das Attribut fetchpriority

Sie können Prioritätshinweise mit dem HTML-Attribut fetchpriority implementieren.

Sie können das Attribut verwenden mit:

• Verknüpfung
• Bild
• Skript
• Iframe-Tags

Das Attribut fetchpriority akzeptiert einen von drei Werten:

• hoch: Gibt an, dass Sie die Ressource als kritisch erachten und möchten, dass der Browser sie priorisiert.
• niedrig: Signalisiert, dass Sie die Ressource für weniger wichtig halten und möchten, dass der Browser sie depriorisiert.
• auto: ein Standardwert, wenn Sie keine Präferenz haben und den Browser die entsprechende Priorität bestimmen lassen.

Alternativ können Sie die JavaScript-Fetch-API verwenden:

Einige Dinge, die Sie bei der Verwendung des Attributs fetchpriority beachten sollten:

• fetchpriority stellt nicht sicher, dass eine Ressource mit höherer Priorität vor anderen Ressourcen (mit niedrigerer Priorität) desselben Typs geladen wird.
• fetchpriority sollte nicht verwendet werden, um die Ladereihenfolge selbst zu steuern.
• fetchpriority ist keine obligatorische Anweisung und kann den Browser nicht zwingen, eine Ressource abzurufen, oder das Abrufen verhindern. Es liegt am Browser, ob er die Ressource abruft oder nicht.

Wichtig: Ähnlich wie bei den Ressourcenhinweisen sollten Prioritätshinweise mit Vorsicht verwendet werden, da eine übermäßige Verwendung eher zu Verlangsamungen als zu Leistungsverbesserungen führen kann.

So testen Sie Ihre Website mit Prioritätshinweisen

Bevor Sie Ihre Tests durchführen, sollten Sie wissen, dass Prioritätshinweise nur in Chrome 101 (oder höher) und Edge 101 (oder höher) verfügbar sind:

Nun zur eigentlichen Frage:

Am einfachsten wäre es, ein Tool zu verwenden, damit Sie Ihren Code nicht manuell ändern müssen.

Glücklicherweise können Sie mit der Experimentfunktion von WebPageTest Leistungsfunktionen wie Prioritätshinweise testen, ohne Ihren Code zu ändern.

Die Experiment-Funktion von WebPageTest ist jedoch Teil ihres kostenpflichtigen Abonnements, sodass Sie einige zusätzliche Ausgaben einplanen müssen.

Im Gegensatz dazu können Sie, wenn Sie über technische Fähigkeiten verfügen, den Code Ihrer Website selbst optimieren und die Auswirkungen der Prioritätshinweise testen.

Stellen Sie sicher, dass Sie nach jeder Änderung, die Sie vornehmen, Tests durchführen.

Rekapitulieren

Wir haben viel Boden abgedeckt, daher hier eine kurze Zusammenfassung der wichtigsten Punkte:

• Prioritätshinweise ermöglichen es Ihnen, die Priorität der Ressourcen Ihrer Site anzugeben.
• Prioritätshinweise können Ihnen dabei helfen, das Laden von „above the fold“-Bildern, Hero-Bildern (LCP-Element), asynchronen und zurückgestellten Skripts, CSS- und Schriftartdateien zu beschleunigen.
• Prioritätshinweise können durch das Attribut fetchpriority implementiert werden.
• Sie können das Attribut fetchpriority mit link-, img-, script- und iframe-Tags verwenden.
• Das Attribut fetchpriority akzeptiert einen von drei Werten: high, low und auto.
• Achtung: Prioritätshinweise sollten sparsam implementiert werden, da ihre übermäßige Verwendung eher zu einer verringerten Leistung als zu Geschwindigkeitsverbesserungen führen kann.
• fetchpriority ist keine obligatorische Anweisung und kann den Browser nicht zwingen, eine Ressource abzurufen, oder das Abrufen verhindern. Es liegt am Browser, ob er die Ressource abruft oder nicht.
• Prioritätshinweise sind in Chrome 101 oder höher verfügbar.

Führen Sie nach jeder Änderung Tests durch, um die Auswirkung von Prioritätshinweisen auf Ihre Website zu messen.

Beliebte Testwerkzeuge:

• PageSpeed-Einblicke
• GTMetrix
• WebseitenTest
• Leuchtturm
• Pingdom