Afgelopen juni was het zover: de Experience update werd ein-de-lijk uitgerold. Niet dat wij hier per se op zaten te wachten, maar omdat het al meer dan een jaar eerder werd aangekondigd en vanwege COVID-19 nog een maand werd uitgesteld. Inmiddels hebben we dus tijd genoeg gehad om ons hierop voor te bereiden en eventuele noodzakelijke punten te verbeteren. Better safe than sorry! Maar goed, niet iedereen heeft de capaciteit of het budget om bepaalde technische zaken zo 1, 2, 3 te fiksen. Dus moet je een afweging gaan maken: bepaal of de kosten opwegen tegen het eventuele voordeel wat je hiermee wint.
Wat de Core Web Vitals precies zijn, leggen we je nog heel even kort uit, want we hebben al eerder een artikel geschreven over wat het precies inhoudt. We gaan er natuurlijk vanuit dat je die gewoon hebt gelezen. Dus alleen even om je geheugen op te frissen ;-).
Core Web Vitals in het kort
De Core Web Vitals zijn erop gericht om de gebruiksvriendelijkheid van een website te verbeteren, vandaar de naam: Experience update. Dus de Core Web Vitals kijken naar alle aspecten die meten hoe gebruikers een pagina ervaren. Er wordt gekeken naar 3 metrics: Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS). Wat dat inhoudt: je leest het hier.
De Core Web Vitals aanpakken met Screaming Frog en de PageSpeed Insights API key
Oké, ondertussen weet je nu wat de Core Web Vitals inhouden, maar hoe ga je nu gestructureerd te werk om je performance daarop te verbeteren; hoe pak je het aan? Wij leggen het je graag stap voor stap uit.
Wat heb je nodig? 3 dingen:
- Betaalde versie van Screaming Frog
- Een PageSpeed Insights API key (de API key kun je hier ophalen: https://developers.google.com/speed/docs/insights/v5/get-started)
- De website die je wilt gaan verbeteren
Stap 1: Koppel de PageSpeed Insights API key met Screaming Frog
Allereerst beginnen we met het koppelen van de API key met Screaming Frog. Deze koppeling maakt het mogelijk om op paginaniveau te analyseren en adviseren.
- Maak je API key aan door naar bovenstaande URL te gaan en de stappen te volgen. En door!
- Open Screaming Frog en ga naar > configuration > API access > PageSpeed Insights
- Plak hier jouw API key in de ‘secret key’ box
- Klik op ‘connect’
- Is de key gekoppeld? Klik dan op het tabblad ‘metrics’. Vink hier ‘all metrics groups’ aan. Hoe meer data, hoe beter. We kunnen daarna altijd nog zaken weglaten.
- Klik op OK.
Stap 2: Crawl de website
Dan is het nu tijd om de website te crawlen, dit kan even duren dus heb geduld. Kopieer de website en plak deze in de balk bovenaan waar staat: ‘enter URL to spider’. Terwijl de website aan het crawlen is, zie je twee progressiebalkjes: een met Crawl en de ander met API. Je moet wachten totdat ze beiden 100% aangeven, voordat je verder kunt gaan.
Stap 3: rapporteren waar de pijnpunten zitten
Voordat we helemaal de diepte in duiken is het goed om een globaal beeld te krijgen van de aard van het probleem (als er al een probleem is natuurlijk). Dat gaan we nu bekijken. Selecteer in de navigatiebalk > PageSpeed en klik dan op ‘Export’.
Er komt nu héél veel data uitrollen. Zoek de volgende kolommen en filter ze als volgt:
- Largest Contentful Paint Time (ms) – Filter alle pagina’s met een LCP van 4000ms of meer
- Total Blocking Time (ms) – Filter alle pagina’s met een Total Blocking Time van 300ms of meer
- Cumulative Layout Shift – Filter alle pagina’s met een CLS van 0,25 of meer
Op basis van deze filters kun je uitspraken doen over de 3 specifieke metrics van de Core Web Vitals. Zo weet je hoeveel procent van je pagina’s niet voldoet aan bijvoorbeeld de LCP-richtlijn. Jij (of je webbouwer) kan nu aan de slag met deze specifieke pagina’s om de gebruikerservaring van je website te verbeteren.
Stap 4: issues rapporteren en de juiste aanbevelingen geven
Hier gaan we kijken naar hoe we de problemen kunnen omzetten naar oplossingen. We weten nu dat bijvoorbeeld 23% van de pagina’s niet voldoet aan de LCP-richtlijn (en ook welke pagina’s dat zijn). Maar wat moet je hier nu mee doen?
Aan de rechterkant in het tabje ‘overview’ scroll je naar beneden tot je bij ‘PageSpeed’ bent. Hier vind je een lijst met aanbevelingen gerelateerd aan de websitesnelheid (en vooral de Core Web Vitals). Je kunt hier verder op klikken om te kijken voor welke pagina’s deze issues en aanbevelingen gelden. Je ziet ook wat het je uiteindelijk oplevert in bytes of milliseconden, zodat je weet bij welke issue je het eerste moet beginnen. Je telt dan simpelweg alle ‘savings’ bij elkaar op. Ta-da! Hoe meer winst het je oplevert, des te hoger de prioriteit om het probleem (als eerste) op te lossen.
Je kunt nu ook nog per pagina de hele dataset bekijken, maar we denken dat je nu toch al een behoorlijk goede lijst hebt waar je webbouwer mee aan de slag kan.
Stap 5: De laatste stap: checken na aanpassingen
Heeft je webbouwer veranderingen gemaakt? Dan is het goed om het hele riedeltje nog een keer te doorlopen om te vergelijken. Heeft het inderdaad opgeleverd wat we hadden gehoopt? Is hetgeen wat we hebben aangepakt, ook daadwerkelijk opgelost? Of zijn er misschien wel ‘andere’ problemen bijgekomen? Check het altijd even voor je eigen inzicht (of laat het checken natuurlijk).
Was dit verhaal toch iets te technisch voor je? Neem dan even contact met ons op en onze SEO-specialisten helpen je graag verder met de analyse!
