Kernwebvitalen zullen nu de belangrijkste statistieken vormen waarmee Google zal beoordelen hoe de website van een uitgever presteert.

Gebruikerservaring is een van de belangrijkste aspecten voor een website om hoog te scoren in de zoekresultaten. De tijd dat uitgevers hun webpagina's konden laten ranken door middel van keyword stuffing is voorbij. Met elke update van het Google-algoritme is de focus van zoekresultaten steeds meer gericht op het voldoen aan de intentie en ervaring van de gebruiker. Daarom moeten uitgevers de algehele prestaties van hun website verbeteren om een ​​positieve gebruikerservaring te garanderen.

Google biedt diverse tools om de prestaties van een pagina te meten. Sommige uitgevers vinden het echter lastig om deze effectief te gebruiken vanwege hun technische complexiteit. Om het uitgevers, ontwikkelaars en marketeers wat gemakkelijker te maken, heeft Google onlangs een reeks prestatiemetingen gelanceerd, genaamd Web Vitals.

Onder de verschillende Web Vitals bevinden zich de Core Web Vitals , de belangrijkste statistieken. In deze uitgebreide gids bespreken we de Core Web Vitals en hun belang, hoe uitgevers hun scores voor deze statistieken kunnen verbeteren en hun toekomst in de adtech-industrie.

Kernwebvitalen zullen nu de belangrijkste statistieken vormen waarmee Google zal beoordelen hoe de website van een uitgever presteert.

Gebruikerservaring is een van de belangrijkste aspecten voor een website om hoog te scoren in de zoekresultaten. De tijd dat uitgevers hun webpagina's konden laten ranken door middel van keyword stuffing is voorbij. Met elke update van het Google-algoritme is de focus van zoekresultaten steeds meer gericht op het voldoen aan de intentie en ervaring van de gebruiker. Daarom moeten uitgevers de algehele prestaties van hun website verbeteren om een ​​positieve gebruikerservaring te garanderen.

Google heeft verschillende tools om de prestaties van een pagina te meten. Maar sommige uitgevers vinden het misschien lastig om deze effectief te gebruiken vanwege hun technische complexiteit.

Om het uitgevers, ontwikkelaars en marketeers iets gemakkelijker te maken, heeft Google onlangs een reeks prestatiemetingen gelanceerd genaamd Web Vitals.

Onder de verschillende Web Vitals bevinden zich de Core Web Vitals , de belangrijkste statistieken. In deze blog bespreken we de Core Web Vitals en hun belang, hoe uitgevers hun scores voor deze statistieken kunnen verbeteren en hun toekomst in de adtech-industrie.

Na uitgebreid onderzoek heeft Google drie belangrijke criteria vastgesteld voor het meten van de interactie van gebruikers met een website: laadtijd, interactiviteit en visuele stabiliteit.

De statistieken waaruit Core Web Vitals bestaat, zijn:

1. Grootste inhoudsvolle verf (LCP) - laden

2. Eerste invoervertraging (FID) - interactiviteit

3. Cumulatieve lay-outverschuiving (CLS) - visuele stabiliteit

Zoals al vermeld, maken deze statistieken deel uit van een groter concept genaamd Web Vitals dat zich ook richt op het meten van de gebruikerservaring. 

Core Web Vitals kwantificeren in feite de allereerste indruk die de gebruiker krijgt na het openen van een website. Door deze statistieken te gebruiken, kunnen uitgevers controleren hoe gebruikers omgaan met hun sites. Dit komt de uitgevers ten goede, want als de gebruikersbetrokkenheid hoog is, krijgen uitgevers meer mogelijkheden om hun advertentie-inkomsten te optimaliseren 

Laten we de drie Core Web Vitals eens gedetailleerd bekijken.

Lighthouse introduceerde Largest Contentful Paint als een van de belangrijkste prestatiestatistieken in 2020

Later kondigde Google LCP aan als een belangrijke rankingfactor en maakte het onderdeel van Core Web Vitals. Als Core Web Vital- metric telt LCP voor 25% mee in de Performance Score, waardoor het een van de belangrijkste metrics is om te optimaliseren.

In dit gedeelte gaan we uitgebreid in op Largest Contentful Paint en leren we ook manieren om de beste LCP-scores te optimaliseren:

Wat is de grootste inhoudsvolle verf?

LCP meet hoe lang het duurt voordat een webpagina het 'grootste inhoudselement' op de pagina weergeeft. Hier kan de 'grootste' inhoud van alles zijn, waaronder:

Een “inhoudselement” is elk HTML-element, zoals: 

• Een beeldelement

• Een video-element

• Een SVG-elementEen element waarvan de achtergrondafbeelding wordt geladen via de URL-functie 

• , , , , of andere elementen op blokniveau

Volgens Google:

“LCP is een belangrijke, op de gebruiker gerichte maatstaf voor het meten van de waargenomen laadsnelheid, omdat het het punt in de laadtijdlijn van de pagina markeert waarop de hoofdinhoud van de pagina waarschijnlijk is geladen. Een snelle LCP helpt de gebruiker gerust te stellen dat de pagina nuttig is.”

Eerste inhoudsvolle verf versus grootste inhoudsvolle verf

We hebben onlangs een bericht gepubliceerd over ' First Contentful Paint ', en sommigen van jullie vragen zich misschien af ​​wat het verschil is met ' Large Contentful Paint '. Hier volgt een eenvoudige uitleg:

First Contentful Paint (FCP): FCP meet hoe lang het duurt voordat een pagina na de eerste laadbeurt de eerste weergegeven inhoud op het scherm toont.

Largest Contentful Paint (LCP): LCP meet de weergavetijd van het grootste zichtbare afbeeldings- of tekstblok in het weergavegebied, vergeleken met het moment waarop de pagina voor het eerst begon te laden.

Wat is een goede LCP-score?

Volgens de richtlijnen van Google moet een goede LCP-score minder dan 2.5 seconden zijn. Dit zorgt voor een goede UX.

LCP-drempels zijn als volgt:

Goed: LCP van 1200 milliseconden of minder (hier hoeft niets te gebeuren)

Verbeterpunt: LCP tussen 1200 en 2400 milliseconden

Slecht = LCP hoger dan 2400 milliseconden.

Hoe meet je de grootste contentful paint-score?

Webmasters of uitgevers kunnen een Largest Contentful Paint-test uitvoeren met behulp van de volgende tools:

1. Rapport over de gebruikerservaring van Chrome ;

2. PageSpeed ​​Insights ;

3. Search Console (Core Web Vitals-rapport).

4. Chrome DevTools.

5. Vuurtoren.

Omdat LCP een door Google goedgekeurde statistiek is, kunnen we de LCP-score gemakkelijk vinden in al deze tools. 

Hoe u de First Contentful Paint (FCP)-tijd kunt verbeteren:

Nu we hebben begrepen wat FCP is en waarom het belangrijk is, gaan we eens kijken hoe we de FCP-timing kunnen verbeteren:

Elimineer weergaveblokkeringsbronnen:

Render-blocking resources zijn de bestanden op een website die moeten worden weergegeven. Dit kunnen lettertypen, CSS-bestanden, JavaScript en HTML zijn . Deze bestanden worden 'render-blocking' genoemd omdat ze prioriteit hebben boven andere elementen van de pagina (bijvoorbeeld afbeeldingen, tekst of andere content die de gebruiker te zien krijgt).

Deze vertraging zorgt voor een plotselinge toename van de LCP, omdat renderblokkeringsbestanden meestal groot zijn en niet eens site-inhoud bevatten. 

De LCP-tijd kan worden verkort als u weergavebronnen uit het kritieke weergavepad verwijdert, niet-kritieke bronnen uitstelt of onnodige JS verwijdert.

Verwijder overbodige CSS :

Als je bestanden in je stylesheets hebt die niet worden gebruikt, maar die veel snelheid vergen, heeft het geen zin ze te bewaren. Daarom moet alle ongebruikte of oude code worden verwijderd, zodat deze geen invloed heeft op de laadtijd van uw site. 

Minimaliseer HTML, JavaScript en CSS :

Het verkleinen van HTML, JavaScript en CSS kan de LCP-tijd van uw website aanzienlijk verkorten. Met minificatie worden alle extra tekens, zoals spaties, verwijderd uit de CSS-, HTML- en JavaScript-bestanden van uw site. 

Hoewel spaties de leesbaarheid bevorderen, hebben browsers deze niet nodig. Deze spaties nemen feitelijk bytes in beslag en het minimaliseren ervan zou de paginagrootte verkleinen en de First contentful paint-timing verbeteren.

Optimaliseer de afbeeldingsgrootte :

Gebruik altijd afbeeldingen met de juiste afmetingen. U kunt een plug-in voor beeldoptimalisatie zoals SSmush of Hummingbird gebruiken om de afbeeldingsgrootte te verkleinen. Door de omvang te verkleinen wordt overbelasting voorkomen, wat een hoge LCP kan genereren. U kunt ook een image-CDN gebruiken om de LCP-tijd te verkorten. 

Kies een goede hostingprovider :

Uw hostingservice heeft ook invloed op de laadtijd van pagina's. Probeer dus een goede hostingprovider die een adequate infrastructuur biedt voor de grootte en het toegangsniveau van uw site.

Bottomline:

Google beschouwt Largest Contentful Paint als een relevant onderdeel van Core Web Vitals. Het is daarom een ​​belangrijke parameter om te evalueren en websites moeten hier een goede score op behalen.

Omdat LCP gerelateerd is aan de laadtijd van een pagina, heeft het direct invloed op hoe Google een site rangschikt in de zoekresultaten. Gebruikerservaring is een fundamentele parameter voor websites om gevonden te worden op het web. Daarom is het niet voldoende om aantrekkelijke producten, een goede UX of kwalitatieve content te hebben. Een goede LCP-score is niet alleen gunstig voor de gebruiker, maar zorgt er ook voor dat Google de content goed zal rangschikken.

In 2019 kondigde Google aan dat ze websites zouden rangschikken op basis van twee extra prestatiemaatstaven: First Contentful Paint en First Input Delay. Later introduceerde Google drie Core Web Vitals : First Input Delay en Cumulative Layout Shift.

In dit gedeelte zullen we het hebben over First Contentful Paint, omdat dit nog steeds een belangrijke maatstaf voor gebruikerservaring is en verantwoordelijk is voor de algehele prestatiescore van een website

Wat is de eerste inhoudsscore?

De eerste contentful paint van een website is wanneer de browser het eerste DOM-element van de pagina ophaalt en weergeeft. Canvaselementen, afbeeldingen of tekst, niet-witte elementen en SVG's worden beschouwd als DOM-inhoud.

Simpel gezegd is FCP de tijd die een websitegebruiker nodig heeft om inhoud in zijn browser te zien nadat hij op de websitelink heeft geklikt. Een razendsnelle FCP zorgt er dus voor dat gebruikers iets nuttigs vinden zodra ze op de pagina terechtkomen.

In dit gedeelte zullen we het hebben over First Contentful Paint, omdat dit nog steeds een belangrijke maatstaf voor gebruikerservaring is en verantwoordelijk is voor de algehele prestatiescore van een website

In de vorige delen van deze handleiding bent u wellicht de term 'Eerste invoervertraging' tegengekomen. Als je het hebt gelezen, vraag je je misschien af ​​wat het verschil is tussen First Contentful Paint en First Input Delay?

Dverschil tussen eerste inhoudsvolle verf en eerste invoervertraging:

Bent u ooit een pagina tegengekomen waar de inhoud op de pagina plotseling verandert? Zonder waarschuwing verplaatst de tekst zich, is er extra witruimte en ben je je plaats kwijt.

Waarschijnlijk heb je die vervelende ervaring gehad vanwege 'Cumulative Layout Shift'. De Cumulatieve Layout Shift werd in 2020 door Lighthouse geïntroduceerd als prestatiemetriek.

Later werd CLS ook een van de statistieken waaruit Core Web Vitals bestaat.

In deze blogpost leren we wat Cumulative Layout Shift (CLS) is, waarom het deel uitmaakt van de Core Web Vitals-statistiek, hoe het gebeurt, hoe je het kunt meten en hoe webmasters het kunnen optimaliseren.

Voor de onervarenen: First paint is wanneer een render door de browser wordt gedetecteerd. Deze weergave kan net zo subtiel zijn als de achtergrondkleur:

Bent u ooit een pagina tegengekomen waar de inhoud op de pagina plotseling verandert? Zonder waarschuwing verplaatst de tekst zich, is er extra witruimte en ben je je plaats kwijt.

Waarschijnlijk heb je die vervelende ervaring gehad vanwege 'Cumulative Layout Shift'. De Cumulatieve Layout Shift werd in 2020 door Lighthouse geïntroduceerd als prestatiemetriek.

Later werd CLS ook een van de statistieken waaruit Core Web Vitals bestaat.

In deze blogpost leren we wat Cumulative Layout Shift (CLS) is, waarom het deel uitmaakt van de Core Web Vitals-statistiek, hoe het gebeurt, hoe je het kunt meten en hoe webmasters het kunnen optimaliseren.

Hoe meet je de eerste inhoudsvolle verf?

Webmasters of uitgevers kunnen de First Contentful Paint van hun website meten via meerdere tools, waaronder: 

1. Vuurtoren

2. Webpaginatest

3. Chrome DevTools

4. PageSpeed ​​Insights

5. Chrome-gebruikerservaringrapport

Hoe meet je de eerste inhoudsvolle verf?

Volgens de richtlijnen van Google zou de eerste inhoudelijke verf van een webpagina binnen 1.8 seconden moeten plaatsvinden. Wanneer een webpagina binnen 2 seconden wordt geladen, zorgt dit voor een goede gebruikerservaring voor de bezoekers, omdat ze sneller toegang hebben tot de informatie. Als het laden van de eerste inhoud van een website langer dan 3 seconden duurt, wordt deze als traag beschouwd.

Google beoordeelt FCP-timing in drie verschillende categorieën:

1. Goed – tussen 0 seconden en 1.8 seconden

2. Moet worden verbeterd – tussen 1.8 seconden en 3 seconden

3. Slecht – meer dan 3 seconden

Hoe u de First Contentful Paint (FCP)-tijd kunt verbeteren:

Nu we hebben begrepen wat FCP is en waarom het belangrijk is, gaan we eens kijken hoe we de FCP-timing kunnen verbeteren:

Elimineer weergaveblokkeringsbronnen:

Renderblokkerende bronnen zijn de bestanden die op een website moeten renderen. Dit kunnen lettertypen, CSS-bestanden, JavaScript en HTML zijn. Deze bestanden worden 'weergaveblokkering' genoemd omdat ze voorrang hebben op andere elementen van de pagina (bijvoorbeeld afbeeldingen, tekst of andere gebruikersgerichte inhoud). 

Deze vertraging zorgt voor een plotselinge toename van de FCP, omdat renderblokkeringsbestanden meestal groot zijn en niet eens site-inhoud bevatten. De FCP-tijd kan worden verkort als u weergavebronnen uit het kritieke weergavepad verwijdert, niet-kritieke bronnen uitstelt of onnodige JS verwijdert. 

Verkort de responstijd van de server:

TTFB of Tijd tot eerste byte is de totale tijd die een browser nodig heeft om de eerste byte van een pagina-inhoud te ontvangen. Als TTFB kleiner is, zal de FCP-timing ook minder zijn. 

FCP = TTFB + Rendertijd + Laadtijd van de inhoud

Zoals u kunt zien, is FCP afhankelijk van de TTFB. Het optimaliseren van TTFB zou dus automatisch de FCP-score verbeteren. U kunt de TTFB verlagen door een kwaliteits-CDN te gebruiken, caching voor uw website mogelijk te maken en een snelle hostingprovider te kiezen. 

Verwijder overbodige CSS

Als je bestanden in je stylesheets hebt die niet worden gebruikt, maar die veel snelheid vergen, heeft het geen zin ze te bewaren. Daarom moet alle ongebruikte of oude code worden verwijderd, zodat deze geen invloed heeft op de laadtijd van uw site.

Verklein HTML, JavaScript en CSS

Het verkleinen van HTML, JavaScript en CSS kan de FCP-tijd van uw website aanzienlijk verkorten. Met minificatie worden alle extra tekens, zoals spaties, verwijderd uit de CSS-, HTML- en JavaScript-bestanden van uw site. Hoewel spaties de leesbaarheid bevorderen, hebben browsers deze niet nodig. Deze spaties nemen feitelijk bytes in beslag en het minimaliseren ervan zou de paginagrootte verkleinen en de First contentful paint-timing verbeteren. 

Omdat Google paginasnelheid als een belangrijke prestatiestatistiek waardeert, zal First Contentful Paint een belangrijke statistiek voor websites blijven. Het hebben van een lage FCP-tijdlijn zorgt er niet alleen voor dat gebruikers op uw site blijven, maar verbetert ook de algehele gebruikerservaring. We zijn het ermee eens dat FCP een lastige maatstaf kan zijn om vast te stellen, maar een beetje optimalisatie van het verminderen van FCP zal zeker de UX en de algehele laadtijden van uw site verhogen. 

Bent u ooit een pagina tegengekomen waar de inhoud op de pagina plotseling verandert? Zonder waarschuwing verplaatst de tekst zich, is er extra witruimte en ben je je plaats kwijt.

Waarschijnlijk heb je die vervelende ervaring gehad vanwege 'Cumulative Layout Shift'. De Cumulatieve Layout Shift werd in 2020 door Lighthouse geïntroduceerd als prestatiemetriek.

Later werd CLS ook een van de statistieken waaruit Core Web Vitals bestaat.

In deze blogpost leren we wat Cumulative Layout Shift (CLS) is, waarom het deel uitmaakt van de Core Web Vitals-statistiek, hoe het gebeurt, hoe je het kunt meten en hoe webmasters het kunnen optimaliseren.

Laten we deze prestatiestatistiek begrijpen door deze op te splitsen:

Cumulatief: het betekent een toename van de hoeveelheid

Ter afsluiting

Op dit moment adviseren wij uitgevers om zo vertrouwd mogelijk te raken met Core Web Vitals en Web Vitals. Hoe eerder ze leren hoe ze hun websites kunnen optimaliseren om de best mogelijke gebruikerservaring te bieden, hoe beter het voor hen zal zijn als de overstap van Google daadwerkelijk plaatsvindt.

Het goede nieuws is dat uitgevers nu gekwantificeerde kennis kunnen hebben over de prestaties van hun pagina's. Daarnaast krijgen ze begeleiding bij het oplossen van problemen die de gebruikerservaring van hun pagina's belemmeren. Dit alles zal uitgevers helpen de gebruikersbetrokkenheid voor hun website te vergroten, het verkeer te vergroten en meer inkomsten te genereren.

Zodra uitgevers de taak hebben doorstaan ​​om belangrijke details over Core Web Vitals te begrijpen, zullen ze zien dat deze statistieken van groot nut zullen blijken te zijn.