Blog

Hoe zorg je ervoor dat je website voldoet aan Google’s Core Web Vitals

In dit artikel bekijken we hoe u uw website kunt optimaliseren om een goede score te krijgen in het Core Web Vitals-rapport van Google. Google geeft de voorkeur aan websites met snelle laadtijden en goede websiteprestaties. Zolang u weet welke stappen u het beste kunt volgen, kunt u ook hoger scoren in de zoekresultaten.

In de snelle wereld van vandaag wil iedereen interactieve websites met snelle laadtijden.

Google meldt dat mobiele webpagina’s gemiddeld binnen 22 seconden laden. Echter, 53 procent van de mobiele gebruikers zal een pagina verlaten die er langer dan drie seconden over doet om te laden.

Deze cijfers bewijzen dat het optimaliseren van uw site om de prestaties te maximaliseren een topprioriteit moet zijn. Daarom kondigde Google de oprichting aan van Core Web Vitals, dat drie metrieken omvat: Largest Contentful Paint (LCP), First Input Delay (FID), en Cumulative Layout Shift (CLS).

Vanaf medio juni 2021 is deze Google page experience update een ranking factor in zoekmachines.

Hoe kunt u ervoor zorgen dat uw website voldoet aan Google’s Core Web Vitals?

Om te beginnen, bespreken we de volgende onderwerpen in dit artikel:

Wat Google’s Core Web Vitals metrics zijn
Hoe Core Web Vitals te meten
Wat een goede score is voor Google’s Core Web Vitals
Hoe u uw score voor Core Web Vitals kunt verbeteren
Hulpmiddelen om Core Web Vitals te verbeteren
Wat zijn de meetwaarden van Google’s Core Web Vitals?
Dit is het belangrijkste wat je moet weten over de Core Web Vitals:

Largest Contentful Paint (LCP). Dit is een Core Web Vitaal die meet hoeveel tijd het kost om de hoofdinhoud of het grootste inhoudselement dat zichtbaar is op de pagina te renderen.
Eerste invoerweergave (FID). Hiermee wordt gemeten hoe snel een pagina reageert op de handelingen van een gebruiker.
Cumulatieve Lay-out Verschuiving (CLS). Hiermee wordt de onverwachte verplaatsing van inhoud gemeten tijdens het bekijken van een pagina.
Voor een meer diepgaande, diepe duik, kunt u onze gids over de Core Web Vitals bekijken.

Hoe meet ik Core Web Vitals metrieken?
Het meten van Core Web Vitals is snel en eenvoudig met Google PageSpeed Insights.

Plaats de URL van uw volledige site in het tekstvak, klik op de knop Analyseren en laat de tool de rest doen.

De kernwebvitalen zijn te vinden onder Veldgegevens en Labgegevens.

Fieldgegevens verwijzen naar historische rapporten over de prestaties van een webpagina op basis van geanonimiseerde rapporten van Chrome-gebruikers. Labgegevens gebruiken een gesimuleerde laadpagina met specifieke netwerkomstandigheden om een site te beoordelen.

Google PageSpeed Insights gebruikt voor de labtest een langzamere netwerkverbinding om rekening te houden met gebruikers met een lage internetsnelheid.

In het hierboven afgebeelde voorbeeld is de veld LCP-data 1,7 seconden, terwijl de lab LCP 3,4 seconden is. Ondertussen is de FID 19ms, terwijl de Cumulative Layout Shift 0 is.

Wat is een goede score voor Google’s Core Web Vitals?
Laten we nu eens kijken naar de scores waarnaar u moet streven om te slagen voor het Chrome User Experience Report. Laten we het uitsplitsen:

LCP: een goede LCP-score is ongeveer 2,5 seconden of minder. Websites die binnen 2,6 tot 4 seconden laden, moeten worden verbeterd, terwijl websites met een laadtijd van meer dan vier seconden een slechte LCP hebben.
FID: een goede drempel voor de FID-score zou een vertraging van minder dan 100 ms vereisen. Een vertraging van meer dan 300 ms wijst echter op een slechte gebruikerservaring.
CLS: een CLS-score van minder dan 0,1 wordt als goed beschouwd, maar alles boven 0,25 wordt als slecht beschouwd.
Het optimaliseren van uw website lijkt een uitdaging, vooral als uw landingspagina veel elementen bevat. Het goede nieuws is dat het mogelijk is – zolang u de volgende best practices toepast om uw score voor Google’s Core Web Vitals te verbeteren.

Specifieke technieken voor het verbeteren van de grootste inhoud
Laten we eens kijken naar een aantal populaire tactieken om uw LCP-score te verbeteren.

Beeldcompressie
Beeldcompressie houdt in het minimaliseren of groeperen van delen van een afbeeldingsbestand zodat het minder ruimte inneemt. Ondanks de vermindering in beeldgrootte, heeft dit proces in de meeste gevallen geen significante invloed op de algemene kwaliteit van een afbeelding.

De beste beeldcompressieprogramma’s zijn Ezgif, Jpeg Optimizer, Tiny PNG, en Compressor. Door gebruik te maken van afbeeldingsformaten zoals JPEG en WebP kunnen afbeeldingen ook sneller worden gerenderd.

Maak gebruik van een content delivery netwerk (CDN)
Een CDN kan de afstand tussen de gebruiker en de server verkleinen, wat leidt tot een snellere laadtijd van de pagina en een betere LCP. Zelfs als uw server in Amerika is gevestigd, kan een gebruiker uit Frankrijk of Australië genieten van een positieve pagina-ervaring en snelle downloadtijden, ongeacht hun locatie.

Hoe kiest u het beste CDN voor uw bedrijf? Met CDN-vergelijking kunt u de kenmerken van elke CDN-provider vergelijken op basis van prijs, belangrijkste kenmerken, beveiliging en ondersteuning.

Neem een betrouwbare webhost
Een hostingprovider kan de laadervaring van uw website maken of breken.

Een goedkoop of zwak hostingplan zal je niet helpen om een voldoende LCP-score te halen, ook al probeer je tal van tactieken om de laadtijd van je website te versnellen.

U kunt onze gids over de beste webhostingproviders raadplegen om de meest prominente spelers in de industrie te ontdekken.

Client-kant rendering
Client-side rendering laat ontwikkelaars een website bouwen die verwerkt wordt door JavaScript.

Achteraf gezien kan dit de laadtijd verbeteren. Na verloop van tijd kan het toevoegen van grotere JavaScript-bestanden uw site echter vertragen, vooral wanneer deze niet goed is geoptimaliseerd.

Door codes te minimaliseren en te comprimeren kun je deze gevolgen vermijden. Een andere optie is server-side, zodat LCP op de server wordt verwerkt, wat de LCP-score ten goede komt.

Verwijder ongebruikte plugins
Plugins kunnen de prestaties van uw site verbeteren, maar te veel van het goede kan uw ranking factor beïnvloeden.

Als u meer plugins heeft, moeten browsers extra taken en HTTP-verzoeken uitvoeren voordat ze de landingspagina kunnen tonen.

Een goede tip is om verouderde en ongebruikte plugins te verwijderen. Probeer een lijst te maken van alle plugins op uw website en evalueer of ze nog steeds nuttig zijn voor uw e-commerce winkel.

U kunt ook tools zoals GTmetrix gebruiken om te bepalen welke bestanden of plugins tijd kosten om te laden.

Plaats gewoon je WordPress URL in de zoekbalk. U zult dan in staat zijn om traag ladende plugins te identificeren die een grote impact hebben op de snelheid van uw site.

Specifieke technieken om de eerste invoervertraging te verbeteren
Hier zijn enkele trucs om je FID score te verbeteren.

Verminder JavaScript uitvoeringstijd
Van zoekmachines wordt verwacht dat ze de inhoud van webpagina’s binnen een paar milliseconden parseren. Helaas kunnen scripts en stylesheets die veel tijd nodig hebben om te worden uitgevoerd, de prestaties van uw pagina vertragen.

Gelukkig kan Google Lighthouse JavaScript-bestanden vinden die er langer dan twee seconden over doen om te laden. Zodra u weet wat de grootste bijdrage levert aan de uitvoeringstijd, kunt u onnodige JavaScript asynchroniseren, uitstellen of verwijderen.

Web werkers gebruiken
Webwerkers kunnen scripts op achtergrondthreads uitvoeren en de belasting van de hoofdthread verminderen. Een goede tip is om niet-UI operaties of sommige JavaScript code te delegeren naar de worker thread. Als u het goed doet, is er minder invoervertraging.

Minify code bestanden
Sommige ontwikkelaars hebben de gewoonte om witruimte, tekens en commentaar toe te voegen in codebestanden. Hoewel deze toevoegingen de duidelijkheid van de code kunnen verbeteren bij het werken met teams, zullen zoekmachines meer tijd nodig hebben om de code te parseren en uit te voeren.

Net als afbeeldingscompressie zal het minifiëren van codebestanden de laadtijd van pagina’s verkorten. Hostingbedrijven en CDN’s kunnen codebestanden automatisch minifiëren. Als deze functie niet standaard beschikbaar is, kun je ook gratis tools gebruiken zoals Closure Compiler, Yuri Compressor, cssnano, en CSSO om JavaScript en CSS bestanden te minifiëren.

Evalueer scripts van derden
Niet-kritieke scripts van derden kunnen de hoofdthread blokkeren, wat invloed kan hebben op de First Input Delay.

Sommige essentiële scripts van derden moeten in een oogwenk worden uitgevoerd om webverkeer bij te houden, maar andere hoeven niet meteen prioriteit te krijgen. Neem bijvoorbeeld pop-ups voor aanmeldingen en abonnementen, die ook na een paar minuten kunnen verschijnen zonder dat het kwaad kan.

Dat gezegd hebbende, bedenk welke scripts bovenaan uw lijst moeten staan en voer ze meteen uit. Als ze niet essentieel zijn, stel ze dan uit of verwijder ze.

Specifieke technieken voor het verbeteren van de cumulatieve lay-outverschuiving
Tijdens het laden van de webpagina vindt er soms een onverwachte lay-outverschuiving plaats naarmate er meer elementen aan de pagina worden toegevoegd. Om dit probleem op te lossen, zijn hier enkele trucs om uw pagina visueel stabiel te maken.

Voeg breedte- en hoogte-attributen toe voor visuele stabiliteit
Door breedte- en hoogte-attributen voor afbeeldingen en video’s te plaatsen, kunt u voorkomen dat ze over de pagina verschuiven. U kunt er ook ruimte voor vrijmaken met CSS-vensters voor beeldverhouding. Deze strategie zorgt ervoor dat elementen, zoals koppen of paragrafen, niet verschuiven zodra afbeeldingen op de pagina zijn geladen.

Gereserveerde ruimte voor de advertentieruimte
Dynamische advertentieformaten kunnen layout-verschuivingen veroorzaken. Dit gebeurt wanneer een site de advertentie invoegt of wanneer de ad tag bibliotheek laadt en de grootte van de container aanpast.

Het goede nieuws: u kunt dit fenomeen elimineren door ruimte te reserveren voor de ad slot.

Er zijn verschillende manieren om dit voor elkaar te krijgen:

Stel een specifieke hoogte en breedte in voor de ad slot met behulp van een

element.
Reserveer ruimte voor de grootst en kleinst mogelijke grootte voor de advertentieruimte.
Kijk naar historische gegevens om de meest waarschijnlijke grootte voor de advertentieruimte te bepalen.
Vermijd het plaatsen van advertenties bovenaan de viewport, omdat hierdoor meer elementen in de lagere delen van de pagina worden verplaatst. Advertenties in het midden zullen niet zo veel elementen verplaatsen.
Voeg inhoud dynamisch toe voor visuele stabiliteit
Je hebt vast wel eens meegemaakt dat de lay-out verschuift door pop-ins zoals banners en formulieren. Terwijl de site begint te laden, kunnen extra elementen de pagina-inhoud verschuiven en verplaatsen.

Net als bij advertenties kunt u ruimte reserveren voor verschillende inhoudstypen voor visuele stabiliteit. Als alternatief kunt u ook dynamisch inhoud toevoegen.

Geef gebruikers de mogelijkheid om de inhoud te laden door interactie met de pagina. Als je meer producten wilt tonen, integreer dan een “Meer laden”-optie zodat gebruikers niet worden verrast door de verschuiving. Probeer te voorkomen dat nieuwe inhoud automatisch wordt geladen, tenzij dit het resultaat is van gebruikersinput of gebruikersinteractie.

Een andere goede tip is om de oude inhoud te vervangen door een nieuwe die in een container met vaste afmetingen past. Vergeet niet om links uit te schakelen terwijl het laden begint om onbedoelde gebruikersinteracties te voorkomen.

Hulpmiddelen om uw Core Web Vitals Score te verbeteren
Er zijn talloze hulpmiddelen beschikbaar om de snelheid en prestaties van je site te verbeteren.

NitroPack
NitroPack is een alles-in-een pakket om je website te versnellen. De tool heeft caching, image optimalisatie, kritische CSS, code optimalisatie, en resource loading en JavaScript uitvoering functie die uw LCP score kan verbeteren.

Voor gebruiksgemak wordt het geleverd met een vooraf gedefinieerde configuratie, zodat u uw website naadloos kunt afstemmen.

De belangrijkste configuratiemodi zijn de volgende:

Standaard. Met deze basisconfiguratie kunt u uw site opzetten zonder prioriteit te geven aan paginasnelheid.
Gemiddeld. Met dit optimalisatieniveau draait uw site gegarandeerd op gemiddelde snelheid.
Sterk. Maakt gebruik van premium configuratiefuncties, zoals het wijzigen van de lettertypedefinitie, het lui laden van afbeeldingen en het laden van bronnen, die bijdragen aan een betere LCP-score.
Waanzinnig. Het beste voor het bereiken van de hoogst mogelijke snelheidsscore. Merk op dat dit type optimalisatie ondermaats kan zijn voor websites die afhankelijk zijn van JavaScript.
Handmatig. Gebruik dit om handmatig de technische aspecten te optimaliseren die nodig zijn voor LCP verbeteringen.
Om te beginnen, kunt u proberen hun gratis plan, of check out hun premium plan dat begint vanaf $ 17,50 per maand.

Met GTMetrix kunt u de prestaties van uw webpagina testen.

Hier zijn enkele top functies van de tool:

Test de pagina op een Android-apparaat of gesimuleerde mobiele apparaten om de snelheidsprestaties van mobiele sites te meten.
Maak gebruik van Google Lighthouse om bruikbare inzichten te krijgen voor prestatie-optimalisaties.
Bekijk de prestaties van de site in verschillende browsers, landen en verbindingssnelheden.
Het rapport Core Web Vitals biedt een overzicht van de prestaties van uw website. U kunt mijlpalen krijgen voor Grootste inhoud, Totale blokkeringstijd en Cumulatieve lay-outverschuiving.
GTMetrix heeft een gratis plan voor altijd met basisfuncties en betaalde plannen vanaf $10 per maand.

Core Web Vitals Booster

Shopify’s Core Web Vitals Booster is een app die automatisch uw prestaties kan optimaliseren op desktop apparaten of mobiele apparaten.

Hier zijn enkele van zijn top functies:

Geef prioriteit aan storefront resources en stel al het andere uit
Google Analytics en Tag Manager Snelheidsoptimalisatie
Klaviyo snelheid optimalisatie
Prioriteit geven aan bronnen voor Shopify storefront en al het andere uitstellen
24×7 ondersteuning
De tool is beschikbaar voor $9/maand in de Shopify App store.

Conclusie
Het bouwen en ontwerpen van webpagina’s die voldoen aan Google’s Core Web Vitals kan een uitdaging lijken.

Gelukkig zijn er veel tips en trucs die je kunt gebruiken om je score te verbeteren en de laadtijd van je website te versnellen. Als u uw website niet zelf wilt afstemmen, kunt u ook tools proberen die uw website automatisch optimaliseren of de mobiele vriendelijkheid verbeteren.

Hopelijk heeft dit artikel je geholpen om de prestaties van je website te verbeteren.

    Dienst:

    error: Niet toegestaan