WebsiteNazorg wenst je fijne feestdagen. Van 25 december t/m 1 januari zijn wij gesloten.
Voor spoedgevallen is onze helpdesk beschikbaar.

Fetchpriority definiëren voor een snellere website

Google Chrome Network Tab

In April 2022 lanceerde Google Priority Hints. Een nieuwe HTML feature die het mogelijk maakt om de browser aan te geven welke elementen eerst moeten worden geladen voor de beste gebruikerservaring en is daarmee een uitbereiding op de DNS prefetch die al langer bestaat. Dit maakt het mogelijk om meer controle te krijgen over het verbeteren van de tijd die nodig is voor de ‘Largest Contentfull Paint’.

Standaard zal de browser alle afbeeldingen namelijk laden met een lage prioriteit en de voorkeur geven aan de scripts omdat die de functionaliteit van een site kunnen breken. Ook is het zo dat de browser bij het initiaal laden van de pagina echt nog moeite heeft om te bepalen welke afbeeldingen bovenaan op de pagina moeten komen en dus prioriteit zouden moeten krijgen.

In de Chrome bowser kun je onder dev tools en dan netwerk zien met welke prioriteit afbeeldingen standaard worden geladen. Door het HTML element van afbeeldingen die meteen inbeeld moeten komen uit te breiden met fetchpriority=”high” kun je er voor zorgen dat die afbeeldingen zo snel mogelijk worden geladen.

Naast afbeeldingen, kun je dit ook toepassen op script, link en iframe tags. Zo krijg je ook over die bestanden meer controle om de optimale laadvolgorde voor jouw pagina’s te bepalen.

Browser ondersteuning

Fechpriority is een standaard die door Google in het leven is geroepen en werkt op zowel de Google Chrome als de Microsoft Edge browser. En belangrijker nog, wordt aangehouden door Google PageSpeed. Safari, Firefox en Opera ondersteunen hem niet. Dat die browsers geen ondersteuning bieden is vooral een gemis voor de gebruikerservaring op jouw website, maar heeft verder geen negatieve invloed. Die browsers zullen fetchpriority simpelweg negeren. Je hoeft dus niet bang te zijn voor problemen op jouw website.

Op mobiel front is de dynamiek overigens anders. Samsung Internet, Opera Mobile en de standaard Android browser bieden ondersteuning voor fetchpriority.

En toch is er een uitzondering op het hele bovenstaande verhaal. Hoewel de fetchpriority standaard van Google wel iframes dekt, is er nog geen enkele browser die fetchpriority voor iframes ondersteunt. Ons advies is dan ook om het al wel te implementeren als dat belangrijk is voor jouw website, wetende dat het nog even duurt voor je er de vruchten van plukt in de gebruikerservaring van de website. Wil je zelf zien wat de actuele situatie is, bezoek dan caniuse.com.

Arjan Olsder