SEO-News

Speed ScoreMithilfe sogenannter Priority Hints lässt sich im HTML-Code die relative Wichtigkeit von Ressourcen gegenüber dem Browser ausdrücken. Das kann zu besseren Werten bei den Core Web Vitals führen.

Browser versuchen, beim Parsen einer Webseite die dort enthaltenen Ressourcen wie JavaScript, Bilder oder CSS mit einer Prioriät zu versehen, um die Ressourcen in der optimalen Reihenfolge zu laden. Diese hängt zum Beispiel von der Position oder der Art der jeweiligen Ressource ab. So können etwa Bilder im oberen Viewport eine hohe Priorität erhalten, während die Priorität von Elementen weiter unten auf der Seite niedriger sein kann.

 

Wovon hängt die Priorität von Ressourcen ab

Wann eine Ressource einer Webseite heruntergeladen wird, hängt von der Priotität der Ressourcen ab, die wiederum von verschiedenen Kriterien bestimmt wird:

  • Art der Ressource wie zum Beispiel CSS, Fonts, Skripte, Bilder oder Skripe von Drittanbietern
  • Der Ort und die Reihenfolge der Ressorcen im Dokument
  • Verwendung von preload, um Ressourcen vorab zu laden
  • Die Verwendung von async oder defer für Skripte.

Schon bisher war es möglich, die Reihenfolge des Ladens von Ressourcen zu beeinflussen:

  • Durch die Reihenfolge der Tags im Quellcode
  • Durch die Verwendung von preload zum vorzeitigen Laden wichtiger Ressourcen
  • Per async oder defer, um Skripe herunterzuladen, ohne andere Ressourcen zu blockieren
  • Per Lazy Loading von Bildern oder Iframes, die sich im unteren Seitenbereich befinden (Below the Fold).

Das alleine genügt jedoch nicht immer, um die optimale Priorisierung der Ressourcen zu erreichen. Das zeigen die folgenden beispielhaften Szenarien:

  • Es gibt verschiedene Bilder im oberen Bildschirmbereich (Above the Fold). Doch nur eines dieser Bilder benötigt eine hohe Priorität, etwa beim ersten sichtbaren Bild eines Bilderkarussells.
  • Hero Images im Viewport mit einer zunächst niedrigen Priorität, welche nach dem Abschluss des Layouts erhöht wird, was zu einer deutlich höheren Ladezeit führen kann.
  • Skripte mit async oder defer erhalten eine niedrige Priorität. Für Skripte, die wichtig für die User Experience sind, kann deren Priorität erhöht werden bei gleichzeitiger Wahrung des asynchronen Ladens der Skripte.
  • CSS und Fonts erhalten vom Browser eine hohe Priorität. Allerdings müssen diese Ressourcen nicht alle gleich wichtig oder überhaupt notwendig für den LCP sein. Mithilfe von Priority Hints kann die Priorität der betreffenden Ressourcen gesenkt werden.

 

Angabe der relativen Wichtigkeit von Ressourcen per Priority Hints - das importance Attribut

Priority Hints werden im HTML-Code mithilfe des Attributs importance gegeben. Google beschreibt in einem Beitrag auf web.dev das neue Attribut, mit dem man die relative Wichtigkeit von Ressourcen auf Webseiten im HTML angeben kann. Diese Priority Hints können dazu beitragen, bessere Werte bei den Core Web Vitals zu erreichen.

Ein Element, welches für den Largest Contentful Paint (LCP) verantwortlich ist, wie zum Beispiel ein Bild, kann durch die Angabe von importance="high" früher geladen werden, was den LCP reduziert.

 

Schnelleres Laden durch Priority Hints

 

Die Priorität von Skripten mit Angabe von async kann angehoben werden, wodurch sich die bisherige Behelfslösung per link rel="preload" für ein solches Skript vermeiden lässt.

Auch das Verringern der Priorität von Skripten weit unten im Body ist möglich, um ein besseres Sequencing mit Bilder zu erzielen.

Das Attribut importance kann drei Werte annehmen:

  • high: Der Browser soll der Ressource eine hohe Priorität beimessen, solange die Heuristiken des Browsers zur Bestimmung der Priorität dem nicht entgegenstehen.
  • low: Der Browser soll der Ressource eine niedrige Priorität zuweisen, solange die Heuristiken des Browsers dem nicht entgegenstehen.
  • auto: Standardwert, welcher dem Browser die Entscheidung über die passende Priorität überlässt.

Das importance Attribut kann im Zusammenhang mit den folgenden HTML-Tags verwenden werden:

  • link
  • img
  • script
  • iframe.

Wichig ist zu wissen, dass importance ein Hinweis und keine Direktive ist. Das bedeutet: Der Browser wird versuchen, dem Hinweis zu folgen, allerdings kann er auch seine eigenen Präferenzen anwenden, sollte dies zur Vermeidung von Konflikten notwendig sein.

Priority Hints sind als sogenanter Chrome Origin Trial von Version 96 bis 99 verfügbar. Version 96 steht jetzt schon als Canary bereit. Eine Registrierung ist auf dieser Seite möglich.

 

Fazit

Priority Hints bieten die Möglichkeit, die Priorität beim Laden von Ressourcen durch den Browser besser und genauer zu steuern, was sich positiv auf die Core Web Vitals und hier insbesondere auf den LCP und damit die Ladezeit auswirken kann.

Auch wenn die Verwendung des importance Attributs scheinbar einfach ist, dürfen Quereffekte mit Angaben wie preload oder async nicht vernachlässigt werden. Zudem gibt es keine Garantie dafür, dass der Browser den Priority Hints folgt.

Viel wird also von Tests mit unterschiedlichen Konfigurationen abhängen. Diese könnten dann auch in Produkten wie Templates oder in speziellen Plugins für Content Management Systeme zum Einsatz kommen.

 

Titelbild: Copyright Olivier Le Moal - Fotolia.com

 


Christian Kunz

Von Christian Kunz

SEO-Experte. Sie benötigen Beratung für Ihre Webseite? Klicken Sie hier.



Anzeigen

Artikelveröffentlichungen auf starken Magazinen und Blogs

Wir kooperieren mit unzähligen Verlagen und Bloggern und können daher auf über 4000 Blogs zu fast allen Themengebieten Artikelplätze anbieten:

    - Nachhaltiger Linkaufbau, kein SEO-Netzwerk
    - Hohe Sichtbarkeitswerte, keine expired Domains
    - Einmalzahlung, keine Vertragsbindung

Für jede Artikelveröffentlichung erstellen wir hochwertigen Content mit mindestens 400 Wörtern und publizieren den Artikel mit einem DoFollow-Bachlink zu deiner Seite auf einem Magazin oder Blog deiner Wahl.

Frag uns unverbindlich nach Beispielen



SEO-Vergleich





Verwandte Beiträge

{loadposiiton newsletter}

Anzeigen

Search One

 

Search One

 

 

 

Anzeige

rnkeffect

 

Premium-Partner (Anzeige)


Anzeigen

InterNetX

trust in time

SEO Agentur aus Darmstadt

SEO-Vergleich

Backlink-Kampagnen


SEO-Beratung

Suchmaschinenoptimierung und SEO-Beratung für Karlsruhe, Baden und die Pfalz

 

06340/351-943

 

info(at)seo-suedwest.de

Auszeichnungen

SEO-Vergleich.de: Top 30 SEO-Agenturen mit der höchsten Sichtbarkeit 2020

iBusiness Top-100-Liste SEO-Dienstleister

SEO Südwest: Platz 5 bei den SEO-Wahlen 2014 zum besten deutschen SEO-Blog

 

SEO-united.de Tipp 12/15

Sprecher auf

Onsite-Optimierung

Onsite-Optimierung

 

SEO- und Suchmaschinenblogs

Bekannt aus

Website Boosting


Internet World Business

SEO United


The SEM Post


Webselling

SEO selber machen

SEO selber machen

Jetzt vernetzen

SEO-Glossar

SEO-Glossar

 

SEO-Kalender 2020

SEO-Kalender 2019

 

SEO im Ohr, der Podcast von SEO Südwest: aktuell Folge

IMAGE Google Product Reviews Update Dezember 2021: SEO im Ohr - Folge 178
Freitag, 03. Dezember 2021
Google hat mit dem Rollout eines neuen Product Reviews Updates begonnen. Für deutschsprachige Websites ist das derzeit noch nicht unmittelbar relevant. Das könnte sich aber ändern. Noindex-URLs müssen normalerweise nicht in der Sitemap enthalten... Weiterlesen...

SEO-Tipps und SEO-Tricks

IMAGE 'Noindex' oder robots.txt - wann ist welches Instrument das richtige?
Freitag, 09. Februar 2018
Um zu steuern, welche Seiten von Google und anderen Suchmaschinen gecrawlt und indexiert werden... Weiterlesen...
IMAGE Lighthouse: ein Top-Tool für die Performancemessung von Webseiten und PWAs
Montag, 16. Oktober 2017
Lighthouse ist ein Tool, mit dem man die Performance und die Nutzerfreundlichkeit von Progressive... Weiterlesen...
IMAGE Tipp: Reddit für den Aufbau von Backlinks nutzen
Samstag, 17. Januar 2015
Die Social-News-Plattform Reddit erlaubt den Aufbau von guten Backlinks - wenn man sich an... Weiterlesen...

News aus dem Blog

IMAGE Google Webmaster Conference 2019 in Zürich – Recap
Mittwoch, 11. Dezember 2019
Auf der diesjährigen Google Webmaster Conference in Zürich, die erstmals im Raum EMEA... Weiterlesen...
IMAGE Google Webmaster Hangout: A visit at the Google Zurich office
Donnerstag, 05. Juli 2018
I was invited to Google Zurich to take part in a new episode of the Webmaster Office Hangout. I was... Weiterlesen...
IMAGE SEO-Rückblick 2020: Gespräch mit Markus Hövener
Dienstag, 01. Dezember 2020
Ein SEO-Rückblick in lockerer und entspannter Weise: Markus Hövener und ich sprechen über einige... Weiterlesen...

 Eine Auswahl zufriedener Kunden

Rebel - Bad Küche Raum
Schöne Haare Karlsruhe
kr3m
feel-perfect.eu - Die Nährstoffexperten border=
Flintec IT GmbH
ESM Academy
Ringladen

Verbinden und Informationen zu SEO Südwest

Impressum und Datenschutz

Social Networks und RSS-Feed