Google hat einen Artikel veröffentlicht, in dem Entwickler und Herausgeber ermutigt werden, das neue (und experimentelle) Prioritätshinweisattribut „Wichtig“ zu verwenden, das dazu beitragen kann, Core Web Vitals und die Benutzererfahrung zu verbessern.
Das Chrome-Browserteam teilte ein Beispiel mit, in dem ein Hintergrundbild, das mit dem HTML-Attribut Priority Hint geladen wurde, 1,9 Sekunden Downloadzeit sparte, nur in diesem einen Bild.
Das Problem, das Prioritätshinweise lösen
Publisher können die Suche nach Webseitenressourcen beschleunigen, indem sie und kann auch steuern, wie und wann Skripte heruntergeladen und ausgeführt werden, unter Verwendung des „asynchron” und “verschieben“-Attribute.
Verlage können dem Browser jedoch nicht signalisieren, welche Ressourcen wichtig sind und welche nicht.
Google bietet diese Beispiele für die Probleme, die Priority Hints löst:
„Heldenbilder innerhalb des Ansichtsfensters beginnen mit einer niedrigen Priorität. Nachdem das Layout fertig ist, erkennt Chrome, dass sie sich im Darstellungsbereich befinden und erhöht ihre Priorität (leider zeigen die Entwicklungstools nur die endgültige Priorität an – WebPageTest zeigt beides an).
Dies führt normalerweise zu einer erheblichen Verzögerung beim Laden des Bildes. Wenn Sie den Prioritätshinweis im Markup angeben, wird das Bild mit hoher Priorität gestartet und viel früher geladen.
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.“
Werbung
Weiter unten lesen
Der Ressourcenhinweis für das Wichtigkeitsattribut
In HTML werden die Teile, aus denen eine Webseite besteht, als Elemente bezeichnet. Das wären das div, Überschriften, Absatz-Tags, Image-Tags, das Link-Element usw.
Ich bin mir ziemlich sicher, dass alles, was als HTML-Tag bezeichnet wird, tatsächlich ein HTML-Element ist. Das ist eine einfache Möglichkeit, sich daran zu erinnern, was ein Element ist.
Jedes Element kann mit einem sogenannten Attribut modifiziert werden. Erinnern Sie sich an das Nofollow-Attribut? Das nofollow-Attribut modifiziert das -Element.
Das Wichtigkeitsattribut modifiziert Webseitenelemente, indem es dem Webbrowser einen Hinweis gibt, ob ein Webseitenelement wichtig oder nicht wichtig ist oder ob der Browser einfach entscheiden soll.
Das Wichtigkeitsattribut wird als Prioritätshinweis bezeichnet. Das Attribut gibt dem Browser einen Hinweis, dass ein bestimmtes Element wichtig (oder nicht wichtig) ist und ihm eine höhere (oder niedrigere) Priorität zu geben.
Die Werte, die die „Bedeutung” Attribut kommunizieren können sind:
Werbung
Weiter unten lesen
Der Ressourcenhinweis für das Wichtigkeitsattribut gilt für die folgenden Elemente:
Wie die Ressourcenhinweise die Core Web Vitals verbessern
Browser berechnen automatisch Prioritätsstufen für das Herunterladen von Ressourcen.
Aktuelle Tools wie das Attribut „preload“ geben Hinweise auf den Download wichtiger Ressourcen wie beispielsweise Schriftarten und Bilder.
Andere Ressourcenhinweise sind asynchron und verzögert.
All dies trägt dazu bei, den Download des gesamten Dokuments zu beschleunigen und das Dokument schneller sichtbar und interaktiv zu machen.
Aber der Browser muss noch entscheiden, was wichtiger ist.
Laut Web.dev wird ein vorgeladenes Bild heruntergeladen, aber dennoch vom Browser mit niedriger Priorität und Verzögerung versehen.
Dies ist die Erklärung:
„Nehmen Sie ein Largest Contentful Paint-Bild, das, wenn es vorgeladen ist, immer noch eine niedrige Priorität erhält.
Wenn es von anderen frühen Ressourcen mit niedriger Priorität zurückgedrängt wird, kann die Verwendung von Prioritätshinweisen immer noch helfen, wie schnell das Bild geladen wird.“
Ein Beispiel dafür, wie hilfreich das Wichtigkeitsattribut ist, ist, wenn eine Webseite ein Bildkarussell oben im Darstellungsbereich hat (der Teil des Browsers, den der Site-Besucher derzeit sieht).
Wenn das Karussell fünf Bilder enthält, können alle vorgeladen werden. Aber wenn dem ersten die „hoch” Wichtigkeitsattribut und die anderen mit dem “niedrig”-Attribut wird die Webseite schneller angezeigt, da der Browser jetzt weiß, dass er dem ersten Bild eine hohe Priorität einräumt.
Ein weiteres Beispiel von Google ist das vorgestellte Bild oben auf der Webseite. Der Browser gibt dem Bild eine niedrige Priorität und rendert es erst, nachdem der Rest des Webseiten-Layouts abgeschlossen ist.
Google erklärt:
„Durch die Bereitstellung des Prioritätshinweises im Markup kann das Bild mit einer hohen Priorität beginnen und viel früher geladen werden.
Beachten Sie, dass für die frühzeitige Erkennung von LCP-Bildern, die als CSS-Hintergründe enthalten sind, immer noch ein Vorladen erforderlich ist und mit Prioritätshinweisen kombiniert werden kann, indem im Vorladen die Wichtigkeit=’high’ eingefügt wird, andernfalls wird es immer noch mit der Standardpriorität „Niedrig“ für Bilder beginnen .“
Werbung
Weiter unten lesen
Dasselbe passiert mit Skripten, die asynchron oder verzögert heruntergeladen werden. Beiden wird eine niedrige Priorität zugewiesen.
Durch Hinzufügen eines Prioritätshinweises zu den wichtigen Skripten kann der Browser die Seite schneller rendern und eine bessere Benutzererfahrung bieten.
Website-Besucher erfahren schnelleres Laden
Die Priority Hints durchlaufen eine von Google so genannte Origin-Testversion. Chrome hat vor zwei Jahren einen Testlauf durchgeführt, der jedoch nicht viel Aufmerksamkeit auf sich gezogen hat.
Chrome führt dies in Chrome 96 ein, das am 21. November 2021 veröffentlicht werden soll. Prioritätshinweise sind bereits auf Chrome Canary, der Testversion von Chrome, verfügbar.
Diese Funktionen können in aktuellen Chrome-Versionen aktiviert werden, indem Sie Folgendes in die Adressleiste eingeben:
chrome://flags/
Scrollen Sie dann nach unten und aktivieren Sie den Abschnitt mit der Bezeichnung: Funktionen der experimentellen Webplattform
Screenshot: Experimentelle Webplattformfunktionen
So überprüfen Sie die Ressourcenprioritätsstufe
Die Prioritätsstufen von Ressourcen können in jeder Chrome-Version in den Entwicklungstools auf dem Tab “Netzwerk” überprüft werden.
Werbung
Weiter unten lesen
Klicken Sie oben rechts auf die drei Punkte (Menü mit Auslassungspunkten), > Weitere Tools > Entwicklertools (wählen Sie dann die Registerkarte Netzwerk).
Von dort laden Sie eine Webseite hoch, klicken mit der rechten Maustaste auf eine der Spalten (wie Zeit oder Wasserfall) und wählen Priorität und Sie können die Prioritätsstufen anzeigen.
Wenn Sie sich für die Testversion von Priority Hints registriert haben, können Sie Chrome Canary verwenden, um die aktualisierte Priorität für die Ressourcen anzuzeigen, und auch in Chrome-Version 96, wenn es eingeführt wird.
Wenn Sie an dieser Testversion teilnehmen, werden die Prioritätshinweise in den Browsern Ihrer Site-Besucher angezeigt und alle Verbesserungen an Core Web Vitals werden darin berücksichtigt.
Es ist jedoch wichtig zu beachten, dass dies vorrangige Hinweise und keine Richtlinie sind.
Das bedeutet, dass der Browser die Prioritätshinweise nicht strikt befolgen muss. Der Browser kann die Hinweise ignorieren und dem Computer seine eigene Reihenfolge zuweisen.
Dies kann in den Chrome Dev Tools auf der Registerkarte “Netzwerk” wie oben beschrieben überprüft werden.
Werbung
Weiter unten lesen
So melden Sie sich für die Priority Hints-Testversion an
Publisher müssen sich bei Chrome registrieren, um an den Origin-Tests teilzunehmen, um Prioritätshinweise zu erhalten.
Das Anmeldeformular für Prioritätshinweise finden Sie hier:
https://developer.chrome.com/origintrials/#/view_trial/365917469723852801
Prioritätshinweise Origin Trial
Dies ist die zweite Version dieser Origin-Testversion. Beim ersten Test gab es keine große Resonanz. Aber dieses Mal könnte aufgrund von Core Web Vitals anders sein.
Die Testversion kann ab sofort registriert werden und läuft bis zum 22. März 2022. Der Zweck der Testversion besteht darin, das Interesse der Entwickler zu messen und zu sehen, ob sie zu sinnvollen Verbesserungen führt.
Ob die Funktion nach diesem Datum fortgesetzt wird, hängt von Ihrem Feedback ab. Dies ist eine großartige Gelegenheit, die Benutzererfahrung zu verbessern und einer der ersten zu sein, der diese neue Funktion nutzt.
Zitate
Lesen Sie die Ankündigung der Origin-Testversion der neuen Prioritätshinweise
Optimieren des Ressourcenladens mit Prioritätshinweisen
Registrieren Sie sich, um an der Origin-Testversion teilzunehmen
Prioritätshinweise Registrierungsseite
Werbung
Weiter unten lesen
Folgen Sie dem Fortschritt der Chrome-Prioritätshinweise
Statusseite mit Hinweisen zur Chrome-Priorität
Lesen Sie den Erklärer für Prioritätshinweise in GitHub
Prioritätshinweise
Laden Sie Chrome Canary für Entwickler mit den neuesten Funktionen herunter
Chrom Kanarienvogel