Magento en Core Web Vitals: Daarom zijn we er zo druk mee

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 Core Web Vitals haalt?

Navigeer snel door dit 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 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. 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 belangrijkste aspect. Denk daarnaast ook aan de juistheid van de informatie op je webshop, het aantal stappen dat de bezoeker moet nemen om bij het gewenste product terecht te komen en hoe gemakkelijk het bestelproces in de webshop is. In dit artikel wordt duidelijk gemaakt welke factoren belangrijk zijn voor een goede 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 3 Core Web Vitals belangrijk is. Om ze verder te begrijpen is het belangrijk om te weten uit welke metrics de Core Web Vitals bestaan. Dat zijn namelijk drie kernelementen:

• Largest Contentful Paint (LCP)
• Interaction to Next Paint (INP)
• 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 Contentful 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.

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 weleens een site tegengekomen waarbij tijdens het lezen 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 CLS metric.

De 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 binnen Google Search Console 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 je direct inzicht krijgt 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 front end 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 front end 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 page experience dermate veel invloed heeft op het doel dat de bezoeker wilt bereiken, heeft Google aangegeven dat de Core Web Vitals een onderdeel van de ‘Page Experience signals’ zijn in de Search Engine Results Page (SERP).

“This past May, we announced that page experience signals would be included in Google Search ranking. These signals measure how users perceive the experience of interacting with a web page and contribute to our ongoing work to ensure people get the most helpful and enjoyable experiences from the web. (…)

Today we’re announcing that the page experience signals in ranking will roll out in May 2021. The new page experience signals combine Core Web Vitals with our existing search signals including mobile-friendliness, HTTPS-security, and intrusive interstitial guidelines.” – Google Search Central Blog

In de praktijk zien we verschillende positieve resultaten bij klanten wanneer zij slagen voor de Core Web Vitals. Zo zagen we na het verbeteren van de Core Web Vitals score van De Notenshop een sterke toename in goede URL’s en, logischerwijs, een afname in ‘Slechte’ URL’s en URL’s die ‘Verbetering nodig hebben’. Daarnaast ervaarde Parfumwebshop een stijging van 50% in klikken en vertoningen nadat zij met het HYPERstack Vitals Kickstart thema de Core Web Vitals vlekkeloos haalde.

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. 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, bij 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 van de Core Web Vitals binnen Magento vraagt om expertise over dit specifieke e-commerce platform. Wij bij HYPER zijn gespecialiseerd in Magento 2 webshop bouwen 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. Het Vitals theme is vergaand geoptimaliseerd is op het gebied van Magento performance, UX en best practices. Hiermee bieden wij een ijzersterke basis! Het thema is vanaf de grond code technisch 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 compatibel met third party extensie / oplossingen. Dit zorgt ervoor dat ontwikkelingskosten 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 LCP 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.

Wil je jouw afbeeldingen nog verder optimaliseren voor je Magento 2 webshop? In deze blog geeft Jelle je 5 tips.

HYPER Script Optimizer

Een veelgemaakte fout binnen Magento is dat er vaak willekeurige externe scripts worden toegevoegd en ingeladen in de webshop. 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 vanaf 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. De Magento media gallery die wordt gebruikt op de PDP is namelijk van Fotorama. Fotorama is een op Javascript gebaseerde image gallery die al sinds 2015 niet meer geüpdatet is en problemen veroorzaakt voor de Core Web Vital score.

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 productpagina’s de Web Vitals wél halen.

Daarnaast laadt Fotorama standaard maar 3 afbeeldingen in op de HTML pagina, wanneer er meer afbeeldingen zijn worden deze on-click toegevoegd. Idealiter worden alle productafbeeldingen netjes in de HTML geladen bij het laden van de pagina. Met de HYPER Media Gallery module hebben we dit opgelost.

Gebruik maken van SVG voor iconen

Op jouw webshop maak je vast gebruik van een aantal iconen om items, zoals de winkelwagen, visueel aantrekkelijker en duidelijker te maken voor je bezoeker. In het verleden werd er veelal gebruikgemaakt van externe font libraries, voor deze 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 en bleek dit degelijk impact te hebben.

Het gebruik van een font library voor iconen, zoals FontAwesome, zorgt voor een flinke lading aan assets. Dit is omdat het volledige font eerst ingeladen moet worden voordat jouw webshop de iconen laat zien.

Om 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 hoeft te 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 voor iconen die middels een font library worden ingeladen 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.

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 HYPER, zowel een hogere positie in de organische zoekresultaten krijgen als 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! Niet inzichtelijk wat er geoptimaliseerd kan worden? Vraag een Magento performance audit aan.