Wat zijn Google Core Web Vitals? En hoe ze impact hebben op SEO

Het gebruik van de mobiele telefoon neemt elke dag toe, en met smartphones kunnen mensen vanuit hun handpalm toegang krijgen tot het internet. Omdat het steeds populairder wordt om vanuit je mobiel te zoeken, gebruikt Google de mobielvriendelijkheid van je website als een rank signaal.

Dit heeft invloed op alle talen, over de hele wereld. De meeste Google gebruikers vinden de zoekmachine makkelijker te gebruiken als ze relevante zoekresultaten van hoge kwaliteit krijgen aangeboden, die ook nog eens geoptimaliseerd zijn voor mobiele gebruikers. Simpel gezegd, een mobielvriendelijke website houdt in dat je een bestaande desktop site transformeert en opnieuw indeed zodat het op het scherm van een mobiel past.

Rectief webdesign: De pagina gebruikt dezelfde URL en dezelfde code, ongeacht of de gebruiker een desktop of een mobiel gebruikt. Alleen de lay-out past zich wat aan, afhankelijk van de grootte van het scherm van de gebruiker. Een van de voordelen hiervan is dat je maar ‘een versie van de site hoeft te hebben, in plaats van twee.

Specifieke secties en stukken content moeten waarschijnlijk van plaats veranderen en opnieuw georganiseerd worden om design-technisch goed zichtbaar te worden op een kleiner scherm. De site rankt hoger als de mobiele versie snel op het scherm werkt, en snel reageert. Onthou dat Google graag dezelfde content op zowel mobiel als desktop vindt. Dit betekent ook dat desktop content niet dramatisch moet veranderen wanneer het geformatteerd wordt. Voorkom verborgen content als je je website omzet van de desktop versie naar de mobiele versie. Probeer je mobiele content zo dichtbij de desktop versie mogelijk te houden. Optimaliseer het alleen voor het kleine scherm.

Je zult je content moeten formatteren zodat het toegankelijk is op de mobiel, maar dat betekent niet dat je de content volledig moet veranderen. Een goede manier om dat te doen is via goed reagerend webdesign, om ervoor te zorgen dat je content zich aanpast voor het kleinere scherm, zonder dat je inlevert op de kwaliteit van je site op desktop of mobiel.

In 2007 introducerende Google “Safe Browsing” (Veilig Surfen) . Google wilde gebruikers beschermen tegen frauduleuze activiteiten. Safe Browsing controleert op basis van Google’s vaak geupdate lijsten of een domein al dan niet veilig is. Voorbeelden van onveilige domeinen zijn “social engineering sites,” (zoals phishing of andere misleidende sites) en sites die malware of andere ongewenste software hosten. Wanneer Google merkt dat je site gehackt is, of via de evaluatie merkt dat er mogelijk schadelijke content voor een bezoeker of hun apparatuur op je site staat, laat het rapport Beveiligingsproblemen dat zien. Safe Browsing beïnvloedt de ranking, omdat de veiligheid van gebruikers en de betrouwbaarheid van websites bij Google hoog in het vaandel staan.

Veilig Browsen werd geïntroduceerd om gebruikers te beschermen tegen frauduleuze activiteiten. Het is een van de manieren om zowel de betrouwbaarheid van websites, als de veiligheid van de gebruikers te garanderen.

Hypertext Transfer Protocol Secure (HTTPS) is de beveiligde versie van HTTP. Dit is het standaard protocol dat gebruikt wordt om data te versturen tussen een internetbrowser en een website. Door middel van HTTPS wordt de code versleuteld, zodat data met extra bescherming verstuurd kan worden.

Veiligheid staat voorop bij Google. Dat is waarom websites die beveiligd zijn met HTTPS een voordeel hebben ten opzichte van websites die gebruik maken van HTTP. Zelfs als er geen vertrouwelijke informatie in het spel is, bieden HTTPS links meer zekerheid dat er niet met data geknoeid kan worden. Veilige websites worden gekenmerkt door een klein slotje in de URL balk.

Als een website niet veilig is, geeft Google dat aan in de URL balk met de tekst “niet beveiligd.” Beveiligde sites hebben voordeel in de Google ranking, terwijl niet beveiligde sites een markering krijgen. Dit doet Google om de eigenaren van websites aan te moedigen HTTPS te gaan gebruiken, omdat dit zowel veiliger is voor bezoekers, als hun eigen privacy beter beschermt.

HTTPS = Vertrouwelijke informatie wordt veilig gehouden, bijvoorbeeld bankinformatie en maildiensten. Beveiligde websites ranken hoger, en niet beveiligde sites krijgen de markering 'niet beveiligd'.

Opdringerige pop-ups zijn grote hoeveelheden onbelangrijke content die de meerderheid van de pagina bedekken, en daarbij de activiteit van de bezoeker in de weg zit. Als de activiteit van een gebruiker significant verstoord wordt, leidt dit tot een slechte ervaring bij de gebruiker.

Op de mobiele versie zijn pop-ups nog problematischer dan op de desktop, omdat het scherm kleiner is. Meestal reageert de advertentie tussen de webpagina’s niet of nauwelijks. Dat betekent dat het moeilijk, of zelfs onmogelijk is om de advertentie op mobiel weg te klikken, waardoor de pagina nutteloos wordt voor mobiele gebruikers.

Opdringerige pop-ups voorkomen dat bezoekers websites kunnen browsen zonder onderbrekingen. Ze bedekken het hele scherm, en de gebruiker kan geen andere informatie zien tot de pop-up weg is.

Controleer je host provider en zorg ervoor dat je de meest recente PHP versie gebruikt, niet een oudere. Door dit up-to-date te houden verklein je de laadtijd, en wordt de website sneller. Controleer naast je webhost versie ook of je http/2, of een recentere versie gebruikt.

Het belangrijkst is dat je ervoor zorgt dat je webhost geupdate is naar de recentste versie. Dit is wat technisch, maar je support team kan waarschijnlijk helpen.

Houd uw webhost up-to-date, dit komt de reactie- en laadtijden ten goede.

Dit kan je vrij makkelijk doen. Afbeeldingen kunnen bijvoorbeeld gecomprimeerd, geconverteerd, of kleiner gemaakt worden. Door de juiste afbeeldingen te kiezen en formats te gebruiken die sneller laden. Door de juiste afmetingen te kiezen, en formats te gebruiken die sneller laden (zoals een video in plaats van een GIF), kan je je LCP score verhogen.

Next-gen type afbeeldingen hebben een verbeterde laadtijd, compressie, en kwaliteit. WebP is bijvoorbeeld een ideale vervanger voor JPEG en PNG, soms zelfs voor GIFs. Het format ondersteunt ook geanimeerde afbeeldingen, zonder afbreuk aan de kwaliteit van de afbeelding.

Je kan ook lazy-loading afbeeldingen “below the fold” plaatsen om je LCP te verlagen.* Dit zijn afbeeldingen die pas laden zodra alle content “above the fold” is geladen, of wanneer ze op het scherm van de gebruiker te zien zijn.

*De termen “above” en “below the fold” verwijzen naar de content die de gebruiker op zijn of haar scherm ziet voordat ze scrollen. Alles boven “the fold” is direct zichtbaar, alles eronder niet..

Gebruik next-gen, lazy-loading afbeeldingen, iframes, etc. om de afbeeldingen te optimaliseren en de laadtijd te verkleinen.

JavaScript is een programmeertaal op basis van tekst. Het wordt gebruikt aan zowel client-side als server-side om je website interactief te maken, en verandert je website van een statische pagina naar een interactieve. Het probleem waar je tegenaan zou kunnen lopen als je je LCP wil verbeteren, is dat je JavaScript verouderd is.

Als je JavaScript al een tijd niet meer geupdate is, kan je pagina vertraagd worden. De makkelijkste manier om dit op te schonen is door ongebruikte code te verwijderen, en ervoor te zorgen dat het geïntegreerd is met de recentste versies van veelgebruikte browsers.

JavaScripts kunnen lastig zijn. Hou ze geupdate, en haal ongebruikte of onnodige code weg.

CSS is een stijltaal, geschreven in een opmaaktaal zoals HTML. Het wordt gebruikt om de lay-out en structuur van een document te beschrijven. Als CSS-bestanden niet goed geoptimaliseerd zijn, kunnen ze problemen opleveren bij het laden. Dat betekent dat ze de server bezig houden voordat de rest van de pagina kan laden.

Kritieke CSS (Critical CSS) wordt gebruikt om de CSS van “above-the-fold” content zo snel mogelijk te laden. Dit zorgt ervoor dat de direct zichtbare content eerst laadt, en de rest pas erna. Het is totaal niet nodig alle content tegelijkertijd te laden, de rest van de CSS kan asynchroon geladen worden.

De beste manier om CSS te optimaliseren is door onnodige code weg te halen, niet te veel CSS bestanden toevoegen, en de CSS bestanden die de server te lang bezig houden te verwijderen.

De makkelijkste manier om FID te optimaliseren is om orde aan te brengen in de code. ALs je je website opschoont, verzeker je je ervan de de server minder tijd hoeft te besteden aan het ophalen van data uit meerdere bronnen, voordat het zich focust op de actie die de gebruiker op dat moment wil uitvoeren.

Optimalisatietools, zoals WP Rocket*, laten je zien welke code je website vertraagt, en wat de vertraging precies veroorzaakt. Een optimalisatietool versnelt het opschonen en helpt je daarnaast je SEO ranking te verbeteren, en je conversies te verhogen.

*WP Rocket is een oplossing voor WordPress websites

Je wilt voorkomen dat er een berg code is die de laadtijd van belangrijke acties vertraagt. Je kan een optimalisatietool gebruiken om verbeterpunten te identificeren.

Een third-party script is een JavaScript dienst die in een webpagina geladen is. Het belangrijkste doel ervan is om een extra functie aan de webpagina te geven. Als een third-party script in de achtergrond laadt, of als de server de code probeert te op te halen, kan het een Single Point of Failure (SPOF) veroorzaken.

Je wil altijd voorkomen dat er ongebruikte of onnodige code geladen wordt. Het vertraagt je website, en kan er zelfs voor zorgen dat je site crasht wanneer de server een berg aan informatie vanuit meerdere bronnen in één keer probeert te verwerken.

Leg je eerst toe op de belangrijkste functie van je webpagina, en besluit daarna of je een écht third-party code nodig hebt.

Een browser cache, of web cache, is een systeem dat het World Wide Web optimaliseert. Wanneer je een browser als Google Chrome gebruikt, slaat de cache de data van websites op. Het opschonen van de cache kan de laadsnelheid van een website versnellen, en problemen met het formatteren op een website oplossen.

Als je een browser cache gebruikt, heb je het voordeel dat alle informatie is opgeslagen in een databank, en de browser het niet van ver weg op hoeft te halen. In plaats dat een browser de hele website opnieuw moet downloaden, kan het simpelweg de gegevens uit de cache halen.

Caches slaan data op en helpen de browser informatie sneller op te halen, waardoor de laadtijd van websites minder lang wordt.

Voor zowel de laadtijd als de input-vertraging is het verstandig ervoor te zorgen dat de content op je pagina gebalanceerd is. Denk goed na over wat je laat zien op welke pagina, zeker wat betreft third party code en plugins. Zorg dat de code die geladen wordt altijd een specifiek doel dient.

Je hoeft bijvoorbeeld niet op elke pagina een “abonneer nu” pop-up te zetten. Dat is extra code die weer moet laden. Wees verstandig over waar je de content plaatst, en denk na over wat een specifieke pagina nodig heeft. Op die manier ga je slim om met de code die geladen wordt, bij bepaalde acties op bepaalde pagina’s.

Denk na waar je content plaatst, en wat je op een pagina laat zien. Als een pagina geen “abonneer je nu” knop nodig heeft, kan je het beter verplaatsen naar een pagina waar het wel relevant is.

De makkelijkste manier om je CLS te verbeteren is om de afmetingen van je afbeeldingen en video's vast te zetten. Een goede manier om een gezonde CLS score te behalen is door ingesloten content (embeds) te gebruiken, en afmetingen vast te leggen. Je kan ook gebruik maken van een plaatshouder, of van fallback, om te voorkomen dat specifieke elementen gaan rondbewegen.

Specificeer altijd afmetingen voor afbeeldingen en andere visuele content op je pagina.

Geef advertenties hun eigen blok, en zorg ervoor dat ze precies weten waar ze heen moeten. Anders kunnen advertenties zomaar op je website verschijnen zonder een specifieke plek, en content wegduwen.

Geef ruimte aan advertenties, zodat ze weten waar ze heen moeten en in wat voor frame ze moeten passen.

Je kan widgets instellen om content op je website in te sluiten. Denk hierbij bijvoorbeeld aan YouTube videos, Google Maps, posts op sociale media, enz. Om ervoor te zorgen dat deze content niet gaan schuiven, kan je vooraf genoeg ruimte beschikbaar maken voor ingesloten content om in te laden, met een plaatshouder of fallback.

Dit kan je bijvoorbeeld doen om met de ontwikkelaarstools van de browser de uiteindelijke ingesloten content te inspecteren, en de hoogte op te meten. Wanneer de ingesloten content laadt, zorgt de iFrame ervoor dat de content qua grootte wordt aangepast zodat het goed past.

Frames werken als plaatshouders voor content, en zorgen ervoor dat elementen op hun plaats blijven en geen ongewilde verschuivingen maken.

Probeer niet om nieuwe content boven bestaande content te zetten, tenzij het in een reactie is op een interactie van een gebruiker. Je moet dit vooraf plannen, zodat onverwachte lay-out shifts niet voorkomen als er nieuwe content opkomt. Wees ook hier duidelijk bij het coderen. Zorg ervoor dat je site weet waar een stuk content moet komen zodra de content geladen is.

Dynamische content moet ook specifieke instructies krijgen, over wanneer het moet laden en welke afmetingen het moet volgen.