Magento en Core Web Vitals: daarom zijn we er zo druk mee
Waarom zijn de Core Web Vitals belangrijk en moet je er iets mee doen?
Iedereen weet dat één van de grootste succesfactoren (of pijnpunten) van een webshop de gebruikerservaring is. Ook Google weet dat en daarom hebben zij een nieuwe ranking factor in het leven geroepen: de Core Web Vitals. Je bent deze term ongetwijfeld al ergens tegengekomen.
Maar wat zijn de Core Web Vitals nu eigenlijk, hoe werken ze, wat zijn de richtlijnen voor de laadtijden en het allerbelangrijkst: hoe zorg je ervoor dat jouw Magento webshop de web vitals haalt?
Navigeer snel door deze blog heen:
- Waarom zijn ze belangrijk en moet je er iets mee doen?
- Het belang van een goede gebruikerservaring voor jouw webshop
- De Core Web Vitals score bepaald op basis van drie metrics
- De Core Web Vitals meten en verbeteren
- Verschillende soorten data: Lab & field data
- De invloed van de Core Web Vitals op SEO
- Slagen voor de Core Web Vitals met je Magento 2 webshop? Zo gaan we aan de slag
- Dus daarom zijn wij er zo druk mee, nu jij nog!
Waarom zijn de Core Web Vitals zo belangrijk en moet je er iets mee doen?
De Core Web Vitals van Google zijn drie statistieken waarmee de gebruikerservaring op webshops gemeten en beoordeeld wordt. De richtlijnen hebben voornamelijk te maken met de snelheid van je webpagina, de ‘bezoeker – pagina’ interactie en de visuele stabiliteit. Daarnaast, als jouw webshop een goede algehele ‘page experience’ heeft, wordt dit ook beloond door een betere positie in de zoekresultaten. De Core Web Vitals zijn namelijk een bekende ranking factor.
Het belang van een goede gebruikerservaring voor jouw webshop
Gebruikerservaring of user experience is hoe de bezoeker elke interactie ervaart met jouw webshop. Hoe tevredener de bezoeker is over het gebruik van jouw webshop, hoe groter de kans is dat deze zal overgaan tot conversie (Baymard.com). Van het plaatsen van een bestelling tot het inschrijven voor de nieuwsbrief en de webshop delen met vrienden en familie.
De tevredenheid over jouw webshop wordt door verschillende aspecten beïnvloed, met de gebruikerservaring als meest belangrijke aspect. Denk daarnaast ook aan de juistheid van de informatie op je webshop, het aantal stappen dat de bezoeker moet nemen om bij het juiste product terecht te komen en hoe gemakkelijk het bestelproces in de webshop is. In dit artikel wordt duidelijk gemaakt welke factoren doorslaggevend zijn voor de gebruikerservaring van jouw webshop.
Met jouw website heb je een doel voor ogen, of het nu het verkopen van producten is, het opzetten van een community of het verspreiden van informatie. Op het moment dat een bezoeker doet waar jij de pagina voor hebt opgezet, praat je over conversie.
Conversies zijn voor jou het belangrijkste doel van de webshop en daarom is het noodzakelijk om bij elke pagina die je creëert een doel voor ogen te hebben en de conversie te meten.
De Core Web Vitals score bepaald op basis van drie metrics
Het is duidelijk waarom het voldoen aan de Core Web Vitals belangrijk is. Om ze verder te begrijpen is het belangrijk om te begrijpen uit welke metrics de Core Web Vitals bestaan. Dat zijn namelijk drie kernelementen:
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP) (voorheen First Input Delay (FID))
- Cumulative Layout Shift (CLS)
Of je op elk van deze metrics ‘Good’, ‘Needs Improvement’ of ‘Poor’ scoort hangt af van de laadtijden van verschillende elementen binnen jouw webshop.
Largest Contentful Paint (LCP)
LCP staat voor Largest Content Paint. Dit is de metric waarmee de waargenomen snelheid gemeten wordt. Dit punt op de laad-tijdlijn geeft aan wanneer de belangrijkste elementen op de pagina waarschijnlijk geladen zijn. Een snelle LCP zorgt ervoor dat de bezoeker gerustgesteld is dat de pagina daadwerkelijk nuttig is.
Het gaat bij de Largest Contentful Paint dus om de tijd die nodig is om de belangrijkste onderdelen van je pagina, zoals tekstblokken, producten, afbeeldingen en video’s te laden zodat de bezoeker aan de slag kan met jouw shop.
Om ‘Good’ te scoren moeten de belangrijkste elementen binnen 2,5 seconde geladen zijn. Red jouw shop dat niet maar blijft de laadtijd onder de 4 seconde, dan scoor je ‘Needs Improvement’. Alle laadtijden daarboven worden beoordeeld als ‘Poor’.
Interaction to Next Paint (INP)
De Interaction to Next Paint (INP) meet de tijd die het duurt voordat de browser reageert op een gebruikersinteractie, zoals een klik of scroll. Elk interactief moment op een webpagina wordt gemeten voor de INP-score.
De voorganger van de INP was de First Input Delay (FID) metric. Deze mat de tijd die tussen de eerste interactie van de bezoeker met de pagina en het moment waarop er daadwerkelijk event-handlers in actie komen. Het is dus niet de laadtijd die hier gemeten wordt, maar de vertraging die optreedt. Bij Google kwamen ze tot de conclusie dat de nadruk meer op de interactie moest liggen, dan op het responsieve aspect.
Voor een ‘Good’ scoren moet de reactiesnelheid 200 milliseconden of sneller zijn. Hierbij wordt de waarde bepaald aan de langstdurende interactie, enkele uitschieters worden genegeerd. Duurt de interactie tussen de 200 milliseconden en 500 milliseconden? Dan scoor je ‘Needs improvement’. Zodra het langer duurt dan 500 milliseconden wordt het beoordeeld met ‘Poor’.
Cumulative Layout Shift (CLS)
Deze laatste maar net zo belangrijke metric heeft betrekking op de visuele stabiliteit van jouw webshop. Cumulative Layout Shift (CLS) geeft een score aan de hoeveelheid verschuivingen van afbeeldingen, teksten en andere elementen op een pagina vanaf het moment dat de pagina laadt tot hij volledig geladen is.
Onverwachte verschuivingen in de pagina zijn erg vervelend voor de gebruiker. Je bent vast wel eens een site tegengekomen waarbij tijdens het lezen van een stuk tekst, het bekijken van een afbeelding of zelfs op het moment dat je op een link wilt klikken de elementen op de pagina verschoven. Super vervelend voor de gebruiker en daarom vindt Google dit ook een erg belangrijke metric.
De oorzaken van Layout Shifts zijn meestal bronnen die asynchroon geladen worden en DOM-elementen die dynamisch aan de pagina worden toegevoegd. Denk aan afbeeldingen of video’s waarbij de afmetingen onbekend zijn, maar ook tekst fonts of sizes, advertenties en widgets die later worden ingeladen.
Om te voldoen aan de richtlijnen dient de CLS score onder de 0.1 te liggen. Tussen de 0.1 en 0.35 scoor je ‘Needs Improvement’ en pagina’s met meer Layout Shift scoren ‘Poor’. Zorg er daarom voor dat de elementen op de juiste volgorde inladen, of dat er op de pagina ruimte gereserveerd wordt voor elementen die later inladen. Zo creëer je de beste gebruikerservaring en scoort jouw webshop voldoende voor de metric Cumulative Layout Shift.
Core Web Vitals meten en verbeteren
Een goede score voor de drie Core Web Vitals is belangrijk voor jouw webshop. Zorg ervoor dat je verschillende URL’s van je webshop test voor een zo volledig mogelijk overzicht van de sterke punten en verbeterpunten van jouw webshop. Meet bijvoorbeeld apart de scores van de homepage, categoriepagina’s en verschillende productpagina’s.
Maar hoe meet je deze vitale elementen binnen je eigen webshop? Er zijn verschillende tools en checkers beschikbaar die de score van jouw webshop meten en aangeven waar winst te behalen valt. Wij hebben de meest betrouwbare voor je op een rijtje gezet:
Google PageSpeed Insights
Voer gemakkelijk je URL in en Google PageSpeed Insight geeft je een score voor de snelheid van jouw webshop. En dat niet alleen, je krijgt ook een duidelijk overzicht van de Google Core Web Vitals en aanbevelingen om de snelheid van de specifieke pagina te optimaliseren.
Google Search Console
Deze handige tool laat in een oogopslag de real user data zien. De tool laat per URL zien of die ‘slecht’, ‘heeft verbetering nodig’ of ‘goed’ scoort. Als je doorklikt kun je zelfs zien hoe de URL scoort op de drie losse elementen.
RUMvision
Deze tool is niet van Google, maar erg handig. RUMvision staat voor Real User Monitoring en geeft je field data over de gebruikers van jouw website. Doordat je te maken hebt met real user data is de data 100% betrouwbaar. Het voordeel van deze tool is dat je een aantal door jou gekozen URL’s kunt monitoren, waardoor je per type pagina de data overzichtelijk in een dashboard hebt.
Verschillende soorten data: Lab & field data
De meeste tools geven je uitgebreide lab data (momentopnamen), gemaakt door de ‘bot’ die jij hebt gestuurd om de webshop te analyseren. Deze lab data met bijbehorende performance score laten zien wat je kunt optimaliseren, maar zegt niets over het wel of niet slagen voor de Core Web Vitals. Daar is field data voor nodig. Field data is gebaseerd op daadwerkelijke bezoekersgegevens. De field data bepaalt of jouw Magento 2 webshop de Core Web Vitals haalt of niet.
Onze favoriete tool voor Real User and Sitespeed Monitoring
RUMvision heeft als groot voordeel dat we direct inzicht krijgen in de actuele field data. Waar Google hier 28 dagen over doet om deze data te verzamelen en inzichtelijk te maken, heeft RUMvision deze data vrijwel direct inzichtelijk.
Met RUMvision zijn wij in staat om frontend performance optimalisaties, maar ook bottlenecks, binnen een aantal uur in te zien. Zo weten we vrijwel direct of onze optimalisaties goed uitpakken en kunnen we snel inspringen bij frontend performance problemen. Voorkomen is immers beter dan genezen.
Verder geeft RUMvision ons de mogelijkheid om diepgaande metrics in te zien. Door meerdere metrics als filter toe te voegen kunnen wij de shops van onze klanten nog beter optimaliseren.
De invloed van de Core Web Vitals op SEO
De Core Web Vitals geven je inzicht in hoe je de gebruikerservaring van jouw webshop kunt optimaliseren. Maar omdat de user experience dermate veel invloed heeft op het doel dat de bezoeker wilt bereiken, heeft Google aangegeven dat de Core Web Vitals steeds meer onderdeel worden van de ranking factoren in de Search Engine Results Page (SERP).
“Today, we’re building on this work and providing an early look at an upcoming Search ranking change that incorporates these page experience metrics. We will introduce a new signal that combines Core Web Vitals with our existing signals for page experience to provide a holistic picture of the quality of a user’s experience on a web page.As part of this update, we’ll also incorporate the page experience metrics into our ranking criteria for the Top Stories feature in Search on mobile, and remove the AMP requirement from Top Stories eligibility. Google continues to support AMP, and will continue to link to AMP pages when available. We’ve also updated our developer tools to help site owners optimize their page experience.” – Google Search Central Blog
In de praktijk zijn er nog geen concrete resultaten gemeten van directe ranking improvements naar aanleiding van verbetering van de Core Web Vitals. Maar we zien wel in Search Console dat de doorgevoerde verbeteringen resulteren in een toename in Goede URL’s en, logischerwijs, een afname in ‘Slechte’ URL’s en URL’s die ‘Verbetering nodig hebben’. Zo zagen we na het verbeteren van de Core Web Vitals score van De Notenshop een sterke toename in goede URL’s.
Het wordt steeds duidelijker dat er een sterk verband is tussen het halen van de Core Web Vitals en de rankings in Google’s SERP. Dat, en het feit dat het behalen van de CWV bijdraagt aan een verbeterde UX én conversieratio, is reden genoeg om er direct mee aan de slag te gaan.
Slagen voor de Core Web Vitals met je Magento 2 webshop? Zo gaan we aan de slag
Als je de Core Web Vitals scores per type pagina in jouw webshop in kaart hebt gebracht weet je aan welke metrics je nog kunt werken, maar de uitvoering is niet altijd even makkelijk. Want hoe zorg je er nu precies voor dat de te trage elementen in jouw Magento shop wél snel genoeg laden?
Maak je geen zorgen, binnen HYPER zijn we continu bezig met het optimaliseren voor de Core Web Vitals. Dat doen we niet op één moment, maar continu. Zo weet je zeker dat je bezoekers de beste gebruikerservaring ondervinden en je voldoet aan de eisen van Google.
Het optimaliseren voor de Core Web Vitals binnen Magento vraagt om expertise over dit specifieke e-Commerce platform. Wij bij HYPER zijn gespecialiseerd in Magento en kunnen jou helpen met de over-all optimalisatie. Binnen onze Hyperstack hebben we een aantal modules (ofwel optimalisaties) ontwikkeld die wij inzetten om de kans van slagen mogelijk te maken binnen Magento. De belangrijkste? Die vind je hieronder:
Hyperstack Vitals Theme
HYPER heeft een thema ontwikkeld dat volledig geoptimaliseerd is voor de Core Web Vitals. Met het Vitals theme, dat vergaand geoptimaliseer is op het gebied van performance, UX en best practices bieden wij een ijzersterke basis. Het thema is vanaf de grond codetechnisch lean & mean opgebouwd en is voor developers zeer prettig om mee te werken. Met het thema zijn wij in staat volledig maatwerk design te implementeren. Ook is het Vitals thema compatible met third party extensie / oplossingen. Dit zorgt ervoor dat development kosten beheersbaar blijven.
HYPER Performance
Uiteraard is elke webshop anders, met eigen doelen en een andere look. Deze creativiteit vinden wij bij HYPER belangrijk en daarom hebben we de HYPER Performance module ontwikkeld. Een succes module met een aantal tools en optimalisaties die de gebruikerservaring van de bezoeker verbeteren, zonder dat jouw webshop zijn uniekheid verliest.
Een belangrijk onderdeel van de HYPER Performance module is de Image Optimiser die de Largest Contentful Paint van de pagina enorm bevordert. In plaats van het serveren van afbeeldingen op de reguliere manier, gaan we bij HYPER een aantal stappen verder.
Ten eerste maken we gebruik van webP afbeeldingen. Dit formaat wordt door het grootste gedeelte van de browsers ondersteund en is in bestandsgrootte een stuk kleiner dan een reguliere JP(E)G of PNG afbeelding.
Daarnaast zorgen wij er binnen onze module voor dat iedere afbeelding op het optimale formaat wordt geserveerd voor de 3 belangrijkste viewports: mobile, tablet en desktop. Dit noemen we sourcesets. Zo kunnen we voor de 3 genoemde viewports de afbeeldingen op het exacte formaat serveren waarop deze getoond worden.
Ook binnen deze sourcesets maken we vervolgens gebruik van webP formaten. Dit alles resulteert in een optimale LCP.
HYPER Script Optimizer
Een veelgemaakte fout is het willekeurig inladen van externe scripts. We zien vaak dat er externe scripts aan een shop toegevoegd worden. Omdat deze scripts extern zijn worden ze bij elke pageload opnieuw ingeladen, waardoor de initiële laadtijd van de webshop verhoogd wordt.
Om grip te krijgen op de manier waarop deze scripts worden ingeladen, hebben wij de HYPER Script Optimizer module ontwikkeld. Deze module stelt jou in staat om scripts in te laden op basis van zogenaamde interactions. Dit kan een klik-actie zijn, maar bijvoorbeeld ook een mouse-over of een touch-actie. Zo ben je zelf in staat om te bepalen op welke interactie bepaalde scripts uitgevoerd moeten worden. Geen vertraging dus!
HYPER Media Gallery
Het is algemeen bekend dat binnen Magento 2 de Product Detail Page (PDP) een pagina is die de Core Web Vitals vaak niet haalt. Magento 2 maakt voor de PDP namelijk gebruik van Fotorama. Fotorama is een op Javascript gebaseerde image gallery die al sinds 2015 niet meer geupdated is en problemen veroorzaakt voor de Core Web Vital score.
Daarbij laadt Fotorama standaard maar 3 afbeeldingen in de HTML pagina, en voegt additionele afbeeldingen toe onclick (indien aanwezig). Idealiter worden alle productafbeeldingen netjes in de HTML geladen bij het laden van de pagina. Uiteraard met de image optimalisaties van de HYPER Performance module.
Om de laadtijd omlaag te brengen en de core web vitals score te verbeteren hebben wij een HYPER Media Gallery ontwikkeld die op al deze problemen inspeelt. Dit zorgt ervoor dat de belangrijke productdetail paginas de web vitals wél halen.
Gebruik maken van SVG voor iconen
Op jouw webshop maak je vast gebruik van een aantal iconen om de webshop voor je bezoeker visueel aantrekkelijker en duidelijker te maken. In het verleden werd veelal gebruik gemaakt van externe font libraries voor het gebruik van iconen. Dit werkte perfect en had geen grote negatieve impact op de performance. Maar na de uitrol van de Core Web Vitals zijn de statistieken veranderd.
Het gebruik van een font library voor iconen, zoals bijvoorbeeld FontAwesome, zorgt voor een flinke lading aan assets omdat al deze fonts eerst ingeladen moeten worden voordat jouw webshop de iconen laat zien.
Om de vertraging door de iconen te voorkomen werken we bij HYPER zoveel mogelijk met Scalable Vector Graphics ofwel SVG’s. Dit zijn geen reguliere afbeeldingen maar iconen op basis van lijnen. De iconen zijn gebaseerd op XML en kunnen oneindig vergroot worden. De SVG’s zijn daarom altijd scherp, ongeacht de schermgrootte en kunnen ook zodanig geschaald worden.
Het inladen van een SVG heeft als voordeel dat deze geen extra verzoeken naar de browser doen om ingeladen te kunnen worden, dat maakt ze een stuk sneller!
SVG’s zijn onderdeel van de HTML van jouw webpagina en kunnen dus direct getoond worden. Binnen HYPER raden wij dan ook altijd ten zeerste aan om de iconen die ingeladen worden middels een font library te vervangen voor SVG’s.
Dus daarom zijn wij er zo druk mee, nu jij nog!
De gebruikerservaring van jouw webshop is ontzettend belangrijk voor het succes van je webshop in het algemeen. Tegenwoordig kun je dit eenvoudig meten en optimaliseren met de Core Web Vitals. Wij bieden ook de mogelijkheid via een performance audit waar je momenteel staat.
Het optimaliseren van de laadtijd, de interactie en snelheid van jouw webshop is echter makkelijker gezegd dan gedaan, zeker voor een Magento 2 webshop. Gelukkig kan jouw webshop, in samenwerking met onze SEO specialisten, hogere ranken in de organische zoekresultaten en slagen voor de Core Web Vitals!
Met onze specifiek voor Magento 2 ontwikkelde modules optimaliseer jij jouw webshop, de gebruikerservaring en SEO. Dus waar wacht je nog op, neem contact op met ons team en samen optimaliseren wij jouw Magento 2 webshop!
