Google's Core WebVitals ‑ Hoger scoren door te focussen op gebruikerservaring

Google's Core WebVitals ‑ Hoger scoren door te focussen op gebruikerservaring

LCP – Grootste contentful paint

LCP is hoe lang het duurt voordat een pagina wordt geladen vanuit het oogpunt van een werkelijke gebruiker. Met andere woorden: het is de tijd van het klikken op een link naar het zien van de meerderheid van de inhoud op het scherm. Hier volgen enkele dingen die u doen om de LCP van uw site te verbeteren:

1. Alle scripts van derden verwijderen
2. Je webhost upgraden: betere hosting=snellere laadtijden in het algemeen (inclusief LCP).
3. Lazy loading instellen: Lazy loading maakt het zo dat afbeeldingen alleen worden geladen wanneer iemand naar beneden schuift op je pagina. Dat betekent dat u LCP aanzienlijk sneller bereiken.
4. Grote pagina-elementen verwijderen: Google PageSpeed Insights zal u vertellen of je pagina een element heeft dat de LCP van je pagina vertraagt.
5. Minify je CSS: Omvangrijke CSS kan de LCP-tijden aanzienlijk vertragen.
6. Caching: Het opslaan van zware delen van een website, zodat deze sneller kan worden geladen. Dit kan client-side, server-side of in de browser, om laadsnelheden en gebruikerservaring te verbeteren.

FID – Eerste invoervertraging

FID meet de tijd die een gebruiker nodig heeft om daadwerkelijk met je pagina te communiceren. Voorbeelden van interacties zijn:

• Een optie kiezen in een menu
• Klikken op een link in de navigatie
• Je e-mail invoeren in een veld
• Het openen van “accordeontekst” op mobiele apparaten.

Google vindt FID belangrijk omdat het rekening houdt met de manier waarop gebruikers in het echte leven omgaan met websites. En net als LCP, ze hebben specifieke criteria voor wat een aanvaardbare FID.

FID meet technisch hoe lang het duurt om iets te gebeuren op een pagina. Dus in die zin is het een pagina snelheid score. Maar het gaat een stap verder dan dat en meet de tijd die het duurt voor gebruikers om daadwerkelijk iets te doen op je pagina. Hier zijn enkele dingen die u doen om de FID-scores van je site te verbeteren. Minimaliseer (of uitstel) JavaScript: Het is bijna onmogelijk voor gebruikers om te communiceren met een pagina, terwijl de browser is het laden van JS. Dus het minimaliseren of uitstellen van JS op je pagina is de sleutel voor FID.

1. Alle niet-kritieke scripts van derden verwijderen: Net als bij LCP kunnen scripts van derden (zoals Google Analytics, heatmaps enz.) een negatieve invloed hebben op FID.
2. Een browsercache gebruiken: zo u inhoud op je pagina sneller laden. Dat helpt de browser van je gebruiker nog sneller door JS-laadtaken te blazen.

CLS – Cumulatieve lay-out Shift

Cumulatieve Layout Shift (CLS) is hoe stabiel een pagina is als het laadt (aka “visuele stabiliteit”). Met andere woorden: als elementen op uw pagina bewegen als de pagina wordt geladen, dan heb je een hoge CLS. Wat slecht is. In plaats daarvan wilt u dat uw pagina-elementen vrij stabiel zijn naarmate deze worden op geladen. Op die manier hoeven gebruikers niet opnieuw te leren waar koppelingen, afbeeldingen en velden zich bevinden wanneer de pagina volledig is geladen. Of klik per ongeluk op iets. Dit zijn de specifieke criteria die Google heeft voor CLS:

<Nerd alert>

Google gebruikt een statistiek genaamd “Layout Shift Score”. Deze score wordt berekend door 2 hoofdfactoren te vermenigvuldigen:

1. Impact fractie: meet hoe instabiele elementen het viewportgebied tussen twee frames beïnvloeden: het resultaat wordt weergegeven als a
2. Afstandsfractie: de afstandsfractie is de grootste afstand die een instabiel element in het frame heeft verplaatst (horizontaal of verticaal) gedeeld door de grootste dimensie van de viewport (breedte of hoogte, afhankelijk van welke groter is); dit wordt ook weergegeven als een %
   Dus, Layout Shift Score = Impact Fractie * Afstandsfractie. Bijvoorbeeld; als je IF 75% was en je DF 25% was, dan is je Layout Shift-score: 0,75 * 0,25 = 0,1875

</Nerd alert>

Hier zijn enkele eenvoudige dingen die je doen om CLS te minimaliseren:

1. Afmetingen van de instelgroottekenmerken gebruiken voor alle media (video, afbeeldingen, GIF’s, infographics enz.): Op die manier weet de browser van de gebruiker precies hoeveel ruimte dat element op die pagina in beslag neemt. En zal het niet veranderen on the fly als de pagina volledig laadt.
2. Zorg ervoor dat advertentie-elementen een gereserveerde ruimte hebben: anders kunnen ze plotseling op de pagina verschijnen en de inhoud omlaag, omhoog of aan de zijkant duwen.

Nieuwe UI-elementen onder de vouw toevoegen: op die manier duwen ze de inhoud niet naar beneden dat de gebruiker “verwacht” te blijven waar het is.

Tools voor testen

PageSpeed Insights

Je eerste stop meten web vitals moet PageSpeed Insights zijn. U krijgt zowel labgegevens als veldgegevens (indien beschikbaar) in één rapport. U krijgt ook verschillende andere statistieken die grotendeels verband houden met het verbeteren van falende pagina’s, met name bevindingen die van invloed zijn op de snelheid van een pagina en het downloaden van assets.

Check PageSpeed Insights

Web Vitals Chrome Extension

Met de Chrome-extensie hebt u toegang tot Web Vitals bij het laden van pagina’s en zoals besproken, u communiceren met de pagina om problemen op te lossen voor het geval u problemen hebt met First Input Delay en of Content Layout Shift. Het is ook beschikbaar voor u pagina-to-page als u websites bladert.

Check de Web Vitals Chrome Extentie

WebPageTest

Met deze onafhankelijke testtool u uw aanpak met verschillende voorwaarden configureren. Gebouwd door Google-technici die deel uitmaken van het Chromium-team, is de informatie net zo gezaghebbend als alles wat je van Google zelf krijgt en maakt RESTful API’s beschikbaar.

Check de WebPageTest

Google Search Console

Als u het eigendom van uw website nog niet hebt geverifieerd om Google Search Console te gebruiken, moet u dit gaan doen om hulp te bieden bij het insinteveren in probleemgebieden met pagina’s die niet in het veld zijn, ervan uitgaande dat u in CrUX wordt weergegeven. U inzoomen om groepen pagina’s met vergelijkbare problemen te zoeken. Uiteindelijk linkt het je aan PageSpeed Insights.

Bekijk de Google Search Console

Web Vitals JavaScript API’s

Gebruik JavaScript om rechtstreeks vanuit de browser toegang te krijgen tot de statistieken en ze door te sturen naar een repository naar keuze. U de test ook introduceren in uw ontwikkelingsproces en ervoor zorgen dat wijzigingen die u aanbrengt, uw scores niet negatief beïnvloeden nadat u naar productie bent drijft.

Check de Web Vitals Javascript API

Chrome Dev Tools

Chrome zelf biedt de ultieme set tools voor het ontdekken of traceren van rugproblemen met behulp van de zeer gedetailleerde informatie die beschikbaar is in rapporten en paginabelastingopnames op het tabblad Prestaties. The extensive array of tools and endless switches and options are ideal for the most exacting optimization work.

Check de Chrome Dev Tools

Hoe beïnvloedt dit je website?

Er zijn bepaalde richtlijnen en statistieken die traditioneel worden gebruikt in webontwikkeling om prestatieoptimalisatie en SEO-ranking te bieden. Deze zullen aanzienlijk veranderen; Als u nu een eerste pagina Google-zoekwebsite bent, is dat mogelijk niet het geval zodra Google in mei 2021 zijn Core Web Vitals-statistieken implementeert. Google’s “top verhalen” zal ook worden gebaseerd op dezelfde statistieken; meer nadruk te leggen op hoe belangrijk het is om voorbereid te zijn op deze statistieken.

Om u voor te bereiden op deze verandering in het speelveld, raden we u aan een Core Web Vitals-audit te krijgen om je huidige score te beoordelen en te bepalen welke gebieden verbeterd moeten worden. Zodra deze gebieden zijn geïdentificeerd, is het tijd om te beginnen met het verbeteren van deze scores!

Voor meer informatie over Core Web Vitals, hoe dit je website zal beïnvloeden, of als u wilt informeren over het krijgen van een audit, neem dan hieronder contact met ons op.