Kernwaarden van het web: wat zijn ze en hoe verbeter je ze op 5 eenvoudige manieren?

Core Web Vitals zijn pagina-interactie-indicatoren die de gebruikerservaring van een website kwantificeren. Kort gezegd geven deze indicaties aan hoe snel consumenten kunnen interageren met uw website en wat voor resultaat ze zullen krijgen. Deze statistieken geven ook aan hoe eenvoudig het voor gebruikers is om door de website te navigeren.

Je pagina-ervaringsscores zullen verbeteren als je je gebruikerservaring en je website in het algemeen beter maken.

Wat zijn de drie belangrijkste statistieken van Core Web Vitals?

Er zijn drie parameters in de Core Web Vitals set:

1. Grootste inhoudsvolle verf (LCP)

De rendertijd van de grootste brokken die aan een populatie worden getoond, is een maatstaf van Core Web Vitals die sitebeheerders kunnen gebruiken om de gebruikerservaring te evalueren en te bepalen of een gebruiker een pagina nuttig zal vinden.

Voor een prettige gebruikerservaring moeten site-eigenaren hun pagina's snel laden. Niet alleen is de laadtijd van pagina's belangrijk voor een goede gebruikerservaring, maar een pagina die snel reageert heeft ook meer kans om hoger in Google te scoren. Bovendien is aangetoond dat snelle laadtijden, in vergelijking met een pagina met slechte laadtijden, van invloed zijn op de bekendheid en de betrokkenheid.

Hoe kan LCP in Core Web Vitals worden verbeterd?

• Begin met het verwijderen van onnodige scripts van derden: Volgens ons recente onderzoek naar pagespeed vertraagt elk script van een derde partij een pagina met 34 milliseconden.
• Upgrade uw webhostingservice: Over het algemeen staat betere hosting gelijk aan snellere laadtijden (inclusief LCP).
• vaststellen lui laden: Lazy loading voorkomt dat afbeeldingen worden geladen totdat de gebruiker naar beneden scrollt op de pagina. Hierdoor bereik je LCP veel sneller.
• Overweeg om de grote pagina-elementen te verwijderen: Google PageSpeed Insights kan je vertellen of een element op je pagina de LCP vertraagt.

2. Cumulatieve verschuiving in lay-out (CLS)

Om de betrokkenheid en verkoop te verhogen, moeten websitebeheerders het bezoekers zo gemakkelijk mogelijk maken om te communiceren met hyperlinks en pictogrammen op hun pagina's. Cumulatieve verschuiving van de lay-out is een statistiek die links of knoppen herkent die verschuiven nadat een webpagina is geladen, en het geeft aan hoe moeilijk het is voor mensen om te interageren met items op uw site nadat de pagina is weergegeven.

Een sterke gebruikerservaring vereist een goede UX en een goed ontwerp, en een klant zal onrustig worden als de website van een bedrijf van elementen wisselt terwijl ze aan het lezen zijn. CLS helpt programmeurs bij het bepalen of afbeeldingen of hyperlinks op een website verschuiven, waardoor auteursrechthebbenden de toegankelijkheid kunnen verbeteren, de doorklikratio kunnen verhogen en de online verkoop kunnen verhogen.

CLS vergelijkt de startpunten van onderdelen in de zichtbare viewport over twee weergegeven frames. Deze indicator helpt website-eigenaren eenvoudigweg om te bepalen of materiaal zoals tekst, pictogrammen en advertenties worden verplaatst terwijl iemand de inhoud op een bepaalde pagina leest.

Hoe kan FID in Core Web Vitals worden verbeterd?

• JavaScript moet minimaal zijn: Het is bijna moeilijk voor bezoekers om een pagina te bekijken terwijl de browser JS aan het laden is. Daarom is het voor FID van cruciaal belang om JS op je website te minimaliseren of uit te stellen.
• Elimineer scripts van derden die niet absoluut noodzakelijk zijn: Scripts van derden (zoals Google Analytics, heatmaps, enzovoort) kunnen een negatieve invloed hebben op de FID, net als bij FCP.
• Maak gebruik van de stash van je browser: Dit versnelt het laden van inhoud op je pagina. Hierdoor kan de browser van je gebruiker het laden van JS nog sneller voltooien.

3. Eerste invoervertraging (FID)

Consumenten willen pagina's die snel laden en waarmee ze gemakkelijk kunnen communiceren op het internet. First Input Delay is een metriek die interactievertragingen analyseert (de tijd die een websitecomponent nodig heeft om te reageren op de invoer van een gebruiker) om pagina's te ontdekken die je publiek kunnen frustreren.

Om materiaal aan hun kijkers aan te bieden, maken moderne websites gebruik van een verscheidenheid aan opkomende oplossingen en dynamische toewijzingswidgets. Hoewel deze vorm van materiaal de levering van inhoud kan verhogen, kan het ook vertragingen veroorzaken, waardoor gebruikers moeten wachten tot hun browser reageert op hun verzoeken.

Om de betrokkenheid en bruikbaarheid op de hele site te verbeteren, moeten ontwikkelaars de tijd die klanten besteden aan het wachten op een website om te reageren op hun activiteit, beperken.

Hoe minimaliseer ik FID in Core Web Vitals?

• Gebruik voor alle media (video, foto's, GIF's, infographics, enzovoort) de volgende set afmetingen van de eigenschap: Op deze manier weet de browser van de gebruiker precies hoeveel opslagruimte het onderdeel inneemt op de pagina. Het verandert niet on the fly totdat de pagina helemaal geladen is.
• Zorg ervoor dat alle advertentie-elementen een eigen ruimte hebben: Anders kunnen ze onverwacht op de website verschijnen en informatie naar links, rechts of opzij duwen.
• Voeg onder de vouw nieuwe UI-elementen toe: Op deze manier duwen ze geen inhoud naar beneden waarvan de gebruiker "verwacht" dat die blijft staan.

Manieren om de kern van Web Vitals te verbeteren

Je moet een korte evaluatie van internetprestatiemonitoring vooruit uitvoeren om te zien hoe je website functioneert in termen van belangrijke webvitalen. Je kunt dit doen met tools van Google zoals Search Console en Page Speed Insights, maar ook met onafhankelijke tools zoals GTmetrix.

Daarnaast is het implementeren van end-to-end QA testen helpt bij het valideren dat prestatieoptimalisaties effectief zijn op verschillende apparaten en browsers, zodat de verbeteringen van Core Web Vitals zich vertalen in echte verbeteringen van de gebruikerservaring.

Het is de moeite waard om gegevens te vergelijken en je pagina zuiniger te upgraden als je prestatierapporten maakt met meerdere tools.

1. Verbeter de productiviteit waarmee je server reageert

"Hoe langer een browser erover doet om informatie van de domeincontroller te krijgen, hoe langer het duurt om alles op het scherm te genereren," voegt Google toe. Elke afzonderlijke paginametriciteit, inclusief LCP, wordt direct verbeterd door een snellere reactietijd van de server."

Het belangrijkste is dat een langere doorlooptijd van een server niet alleen schadelijk is voor je SEO, maar ook voor je gebruikerservaring.

Naast het verbeteren van de serverrespons is het van cruciaal belang om fundamentele SEO-praktijken te behandelen. Zorgen voor een goede sitestructuur, snelle laadtijden en geoptimaliseerde inhoud zal zowel de gebruikerservaring als de zoekresultaten verbeteren. Naast deze must-dos kan het gebruik van de juiste SEO-tools het proces een stuk eenvoudiger maken - tools zoals Ahrefs, Manngools en Semush zijn uitstekende opties. Voor degenen die op zoek zijn naar alternatieven, zijn er verschillende SEO tools vergelijkbaar met Semrush waarmee prestaties kunnen worden bijgehouden en rankings effectief kunnen worden verbeterd.

Gebruik Time to First Byte (TTFB) om de reactietijd van de server te bepalen. Deze metriek bepaalt wanneer de webbrowser van de gebruiker de allereerste byte van de uitvoer van je publicatie ontvangt.

Verzamel echter eerst statistieken over de huidige prestaties van je server voordat je begint te begrijpen hoe je presteert. Hier zijn enkele tips om te overwegen wanneer je het rapport hebt voltooid:

• Onderzoek de snelheid van de hosting van je site.
• Maak gebruik van een content delivery netwerk (CDN) voor je website.
• Onderzoek je plug-ins. Waarom? Omdat elke extensie je pagina zwaarder maakt, wat de snelheid van je website kan vertragen. Alleen het essentiële blijft over.

Volgens Google moet de reactietijd van een server minder dan 600 milliseconden zijn.

Moet je lezen: Hoe webdesign uw verkoop kan stimuleren

2. Beeldoptimalisatie en -compressie

Vind je dat niet vanzelfsprekend? Afbeeldingen zijn daarentegen de belangrijkste elementen op veel websites. Als gevolg daarvan is het optimaliseren ervan cruciaal, hoewel het je pagina aanzienlijk lichter kan maken, waardoor de laadtijd, LCP-rating, UX en zoekmachine-ranking verbeteren.

Door foto's te verkleinen met micro jpg en je LCP prestaties te verhogen, kun je de hele paginagrootte minimaliseren. Je zou misschien kunnen denken dat beeldcompressie de beeldkwaliteit vermindert of de resolutie verlaagt. Blijkbaar is het verschil alleen zichtbaar als je erin gluurt of als de momentopname in het verkeerde formaat is opgeslagen. Probeer landschapsfoto's bij voorkeur op te slaan in jpg-formaat en grafische afbeeldingen in png-formaat. De volgende generatie formaten zoals JPEG 2000, JPEG XR en WebP kunnen ook worden gebruikt, maar we raden aan om eerst wat onderzoek te doen.

Naast comprimeren is het ook belangrijk om het Content Delivery Network (CDN) voor foto's in te schakelen. Een content delivery network (CDN) is een wereldwijd netwerk van servers die je materiaal in de cache plaatsen. Omdat de servers over de hele wereld verspreid zijn, kunnen foto's sneller worden gerenderd vanaf de host die het dichtst bij de gebruikers staat.

3. Lui laden implementeren

Als u foto's op uw site gebruikt, is het noodzakelijk om gebruik te maken van lui laden om de UX en belangrijkste webvitaliteitsscore van uw site te beschermen. Met lui laden kun je afbeeldingen precies op het moment leveren waarop kijkers naar beneden scrollen, waardoor de laadsnelheid van de website behouden blijft en een uitstekende LCP-score wordt behaald.

Andere voordelen van traag laden zijn:

• De functionaliteit van je website wordt verbeterd.
• Dit stelt een limiet in op de hoeveelheid bandbreedte die kan worden gebruikt.
• Dit kan helpen bij de zoekmachineoptimalisatie van je site.
• Hierdoor blijven klanten langer op de website en daalt het bouncepercentage.

Heeft uw site baat bij lui laden? Volgens HubSpotLui laden is een noodzaak voor pagina's met veel afbeeldingen, animaties of video's (zware elementen genoemd). Er zijn echter geen harde criteria voor welke pagina's uitgesteld laden moeten gebruiken. Als de LCP-score van uw site laag is, kunt u overwegen om lazy loading te implementeren en de prestaties ervoor en erna te rapporteren.

4. JavaScript (JS) uitvoering verminderen

Als je FID-gehalte laag is, suggereert dit dat je pagina meer dan 300 milliseconden bij gebruikers blijft hangen. Je kunt overwegen om je JS-uitvoering te optimaliseren en te minimaliseren. Dit vermindert de tijd die de browser nodig heeft om JS-code uit te voeren en de pagina weer te geven.

Het is ook van vitaal belang om zo min mogelijk geheugen te gebruiken. Waarom? Wanneer de code van je site een verzoek doet aan de browser, maakt deze een nieuw geheugenblok aan, waardoor JavaScript wordt uitgeschakeld en de pagina traag kan laden.

Het uitstellen van overbodige JS is volgens Google één methode om de verwerkingstijd te verkorten.

Volg de onderstaande stappen om te controleren of je website ongebruikte JavaScript bevat:

• Om te beginnen ga je naar je website en klik je er met de rechtermuisknop op en selecteer je vervolgens 'Inspecteren'.
• Ga dan naar 'Bronnen' en controleer onderaan voor de drie puntjes. Je zou een tool genaamd 'Dekking' moeten invoegen. Zodra je het hebt ingevoegd, druk je op de laadknop.
• Wanneer het laden is voltooid, kun je controleren hoeveel JavaScript er niet wordt gebruikt op je pagina.

Als je hebt uitgezocht hoeveel JS je over hebt, moet je dat gaan verminderen. Je kunt dat op verschillende manieren doen, waaronder het splitsen van code. Dit betekent het splitsen van een JavaScript-bundel (gecombineerde bestanden in één bundel) om te voorkomen dat er te veel HTTP-verzoeken moeten worden gedaan om een pagina te laden.

5. Zorg ervoor dat je afbeeldingen en embeds de juiste grootte hebben

Een CLS-score van meer dan 0,1 wordt als slecht beschouwd en wordt vaak veroorzaakt door elementen in het CSS-bestand zonder afmetingen, zoals foto's, advertenties of embeds. Afmetingen zijn van belang als je je CLS-score wilt verhogen. De mogelijkheid om breedte en hoogte in te stellen zorgt ervoor dat de browser de juiste hoeveelheid ruimte op de site toestaat terwijl de inhoud wordt geladen.

Als bijvoorbeeld de verhoudingen van een afbeelding onjuist zijn, zal deze normaal gesproken later op een pagina verschijnen. Wanneer een gebruiker het materiaal consumeert, kan het plotseling wegvallen doordat een afbeelding die niet de juiste afmetingen had, te langzaam laadt. In dit scenario kon de browser niet bepalen hoeveel ruimte er nodig was voor die specifieke afbeelding.

Om deze verschuiving van afbeeldingen te omzeilen, kun je van tevoren een plek reserveren waar de afbeelding wordt weergegeven. Als het buiten het scherm wordt geüpload, zal deze handeling de migratie van het arrangement voorkomen.

Zorg ervoor dat je de juiste afmetingen hebt ingesteld voor embeds, zoals bij het insluiten van YouTube-video's in je site. De video kan er aan de achterkant normaal uitzien, maar aan de voorkant overdreven groot of helemaal verknald. Als dat het geval is, is er een probleem met de specificaties en moet u deze aanpassen met tools zoals FlexClip.

Hieronder vind je een stap-voor-stap handleiding om een Youtube-video te embedden. Leer hoe je de afmetingen kunt aanpassen zodat de video die je hebt gekozen er fantastisch uitziet op je website.

• Open de YouTube-video die je in je site wilt invoegen. 
• Ga vervolgens naar de knop Delen starten en selecteer de optie Insluiten.
• Daarna worden alle gegevens, inclusief metingen, weergegeven. Nu moet je de code in de backend van je website plakken en de breedte en hoogte naar wens aanpassen.

Conclusie

Hoewel Core Web Vitals pas over drie maanden wordt geïmplementeerd, is het belangrijk dat u er nu al mee aan de slag gaat. Aangezien de vitale gegevens toegankelijk zijn, kunt u de bovenstaande hulpmiddelen gebruiken om de gegevens van uw site te evalueren voor en nadat de fouten zijn hersteld.

Vergeet niet dat de achterkant van je website in wisselwerking staat met de voorkant, dus zorg ervoor dat de achterkant is geoptimaliseerd voor de beste gebruikerservaring op het gebied van verwerkingssnelheid, esthetische stabiliteit en betrokkenheid. Dit zou helpen als je de bestaande zoeksignalen van Google onthoudt, zoals mobielvriendelijkheid, veilig surfen, HTTPS en invasieve interstitiële standaarden.