Gebruik preload voor page speed en website vitals
Gebruik preload voor page speed en website vitals optimalisatie en verbeter hiermee de SEO van de website. Het voordeel hiervan is dat doordat je zo snel mogelijk begint met het laden direct zoveel mogelijk geprofiteerd wordt van de bandbreedte.
Page speed en website vitals worden steeds belangrijker voor SEO optimalisatie. Het is natuurlijk niet het belangrijkste onderdeel maar voor mensen die bezig zijn met SEO optimalisatie is dit een standaard onderdeel geworden. Hier gaat het er voornamelijk om dat een website snel en soepel geladen moet worden om een betere gebruikerservaring te bieden aan de bezoekers.
Hier zullen we de volgende onderwerpen bespreken:
- Waarom preload gebruiken voor page speed en website vitals?
- Gebruik preload voor page speed en website vitals
- Wanneer gebruik je preload voor page speed?
Het vooraf laden van bestanden heeft een groot voordeel om de LCP van Google core web vitals te optimaliseren.
Waarom preload gebruiken voor page speed en website vitals?
Soms worden afbeeldingen, files en fonts geladen vanuit een stylesheet of JavaScript. Deze moet eerst gelanden worden voordat bekend is welke extra bestanden extra geladen moeten worden. Dit kost extra tijd dat eenvoudig voorkomen kan worden door dergelijke bestanden vooraf te laden. Deze bestanden kunnen in sommige geval al geladen zijn voordat ze nodig zijn. Deze bestanden hoeven hierdoor niet meer geladen te worden en kunnen direct gebruikt worden.
Gebruik preload voor page speed en website vitals
Preload wordt in de <head> geplaatst en is een attribute voor de link tag. Deze kan gebruikt worden voor verschillende bestandstypes. Als bestanden al geladen worden via de link tag dan is deze optie niet nodig.
// Preload voor script
<link rel="preload" as="script" href="script.js" />
// Preload voor CSS
<link rel="preload" as="style" href="style.css" />
// Preload voor afbeeldingen
<link rel="preload" as="image" href="img.png" />
// Preload voor videos
<link rel="preload" as="video" href="video.mp4" type="video/mp4" />
// Preload voor lettertypen
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
In deze code is duidelijk te zien dat “as” gebruikt wordt voor de bestandentypen. Dit is belangrijk voor de browser om te weten wat er geladen moet worden. Bij video en font zijn meerder opties mogelijk en wordt meer de bestandsextentie toegevoegd. Bijvoorbeeld voor video kan mp4 vervangen worden door webm of mpeg. Voor font kan woff2 vervangen worden door ttf, otf, woff. Neem altijd het kleinst mogelijke formaat als dat mogelijk is.
Herhaal dit als je meerdere bestanden vooraf wilt laden. Vooral voor lettertypen kan dit nodig zijn. Voor meer informatie hierover zie:
- Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen
- Google webfonts lokaal laden
Tegenwoordig kan men voor het vooraf laden van afbeelding ook gebruiken van “imagesrcset” voor responsive afmetingen van de afbeelding. Voor meer informatie hierover zie Afbeelding voor Grootste weergave met content (LCP) vooraf laden
Vraag vrijblijvende een offerte aan.
Wanneer gebruik je preload voor page speed?
Het antwoord lijkt heel simpel maar belangrijk is dit niet te overdrijven. Eigenlijk zou dit altijd toegepast moeten voor alle kritische bestanden. Voornamelijk alle bestanden die nodig zijn om het begin scherm te tonen als men op de website komt. De eerder je begint met laden de sneller kan alles getoond worden.
Belangrijk is om bijvoorbeeld JavaScript files pas in de footer te laden en niet met preload. Denk ook aan de afbeeldingen die nog niet in beeld zijn. Hier kan het beste image lazy load gebruikt worden.
Bekijk dus goed wanneer wat nodig is en laad alleen wat direct nodig is en meer niet.
Er zijn nog geen reacties. Wees de eerste..!!