Deze evolueren door de jaren heen en als Google Search Console gekoppeld is aan je website kun je soms zomaar onbegrijpelijk mailtjes ontvangen. In dit artikel meer achtergrond informatie zodat je er uit kan pikken wat voor jou en je bezoekers belangrijk is.
Wat zijn de Core Web Vitals?
De Core Web Vitals zijn een set van statistieken die Google gebruikt om je te helpen jouw website optimaliseren voor een prettig gebruik. De bezoeker van je website is ook de klant van Google en zij willen jou de beste match voorschotelen als je een zoekopdracht indient.
Voor website eigenaren is het dus belangrijk om hier in mee te gaan, wil je beter gevonden worden via zoekopdrachten in Google.
Core Web Vitals INP-problemen gevonden op je website
Grote kans dat jij deze melding hebt gekregen in je mailbox. INP staat voor Interaction For Next Paint. En gaat erover hoe lang het duurt voordat de browser reageert als ik op een pagina iets aanklik.
Deze statistiek gaat in maart 2024 de First Input Delay (FID) statistiek vervangen die je nu zit staan als je jouw website url invoert bij de PageSpeed test, zie verder naar beneden. En jij krijgt nu al meldingen, paniek, paniek! Als jij niet totaal afhankelijk bent van klanten via de zoekmachine is er geen reden tot paniek. Het zijn allemaal leidraden die jou of je websitebouwer kunnen helpen om je website zo te optimaliseren dat je eindgebruiker hem makkelijk kan vinden en gebruiken.
Vind je het belangrijk dat jouw website goed wordt gevonden en hoog in de zoekresultaten komt? Maak dan wat budget vrij om de problemen te laten aanpassen door je websitebouwer / webdesigner.
Wat kan jij doen?
- Jij als website eigenaar kan zorgen voor afbeeldingen die niet te lang duren met inladen. Dus verklein je foto’s voor ze op je website te zetten. Meer over afbeeldingen verkleinen lees je hier: 08 | Verklein je foto’s voor je ze upload naar je website
- Gebruik geen ALT teksten op decoratieve afbeeldingen, plaats h2 kopjes etc. Lees over toegankelijkheid: 07 | Digitale Toegankelijkheid
- Zorg dat je website is gekoppeld aan Google Search Console. Deze zal jou een bericht sturen als er wat aan de hand is, wat aanpassingen vereist. Lees: 03 Google Search Console, wat kan je er mee?
- Zorg dat je website op mobiel goed te bekijken is. Deze wordt door Google gebruikt in hun metingen.
- Lees de tips die ik hieronder geef door en bepaal wat jij hiervan zelf kan doen. En welke je moet uitbesteden.
PageSpeed Insights rapportage
Begin met het invullen van je domeinnaam op pagespeed.web.dev. Hier rollen al de eerste statistieken uit. Scoor je laag? Schakel je website bouwer in!
Er wordt een rapport getoond met 4 punten waarop jouw website is beoordeeld.
- Prestaties
- Toegankelijkheid
- Praktische tips
- SEO
Acht tips voor een goede mobiele weergave van je website
Begin 2018 is Google begonnen om de mobiel vriendelijkheid van je website mee te rekenen in zijn ranking. Het is belangrijker dan je desktop versie. Hoe gebruiksvriendelijker je website des te beter je vindbaarheid in de Google zoekresultaten. De laadtijd van je mobile website speelt mee in je ranking. Overweeg om minder te tonen en alleen wat echt van belang is. De meeste mensen komen binnen op je homepage. De snelste slag is om te zorgen dat deze in ieder geval goed laad. Laat je een nieuwe website maken, vraag dan ook naar de mobiele weergave en check deze ook zelf voor hij live gaat. Heb je al een wat oudere website overweeg dan nieuwbouw of restyling. Zorg dat je mobiele versie ook echt goed werkt!
#1 Zorg dat je makkelijk terug kunt naar de homepage
Zorg dat je logo terug linkt naar de homepage.
#2 Gebruik een responsive en adaptive thema
Jouw website moet zich aanpassen aan het type apparaat waar het op wordt bekeken. Gebeurd dit niet dan heb je geen responsive theme en raad ik je aan een andere te gebruiken. De nieuwe thema’s zijn allemaal responsive, maar niet altijd handmatig bij de stellen naar eigen wensen.
Responsive is de meest bekende term, maar steeds vaak hoor je ook de term adaptive. De eerste houd in (kort door de bocht) dat je website mee verkleind of vergroot naar gelang je browser scherm verkleind of vergoot. En bij adaptive design zie je dat de website zich aanpast aan het apparaat waar deze op word getoond. Als je handmatig je browserscherm verkleind of vergoot zie je dat bij bepaalde formaten (breakpoints) de blokken van je website verschieten. Dan gaat het bijvoorbeeld van 3 kolommen naar een 2 kolommen op een tablet, en 1 kolom op mobiel formaat. Als je geluk hebt kan je dit instellen als je een pagina gaat opmaken in rijen en kolommen. Of voor mobiel een bepaalde afbeeldingen niet te laden of te switchen naar kleinere (in kb) afbeeldingen.
In sommige thema’s kan je er zelfs voor kiezen een hele andere layout te tonen, blokken met informatie weglaten of juist wel te tonen. Of je menu veranderen in een mobiel uitklapmenu (hamburgermenu). De websites die ik maak met het Yootheme Pro thema hebben standaard dit responsive en adaptive gedrag. Bij alle widgets die je plaats kan je aangeven of je ze wel of niet wil tonen op een mobiel, tablet of desktop. Of het aantal kolommen wijzigen.
#3 Houd je bezoekers op je website
Vaak gebruik je voor externe links de optie om ze in een nieuw tabblad te openen. Je browset dan verder op een ander tabblad waardoor je de weg naar jouw website kwijt raakt. Zorg voor een goede balans met het plaatsen van externe linkjes.
# 4 Zorg dat de call-to-actions goed in beeld staan
Zet de trigger tekst en button op de foto ipv er onder. Qua laadtijd zou een kleurvlak nog beter zijn.
#5 Menu-items kort en bondig houden
Kies voor een speciaal menu voor je mobiel. Dit heet een hamburgermenu (3 streepjes), zodat alle menu-items in beeld staan. En zet er het woordje “menu” naast. Je kan ook een tweede menu aanmaken en daar een verkorte lijst van menu-items opzetten.
Zorg dat de benaming duidelijk is en je bezoeker snel naar de juiste pagina kan navigeren.
#6 Zorg dat er geen pop-ups over het scherm staan
Leuk zo’n pop-up, maar op mobiel blokkeert hij het zicht op je hele website.
#7 Zorg dat je formulier goed werkt
Niks irritanter dan een formulier wat je niet kan verzenden maar geen melding geeft van waar de fout zit of ergens iets ontbreekt. Houd het compact. Overweeg om het formulier er uit te halen als het geen toegevoegde waarde heeft.
# 8 Zorg voor relevante zoekresultaten
Soms is het makkelijker op mobiel om de zoekfunctie te gebruiken i.p.v. door de website te navigeren.
Een goede zoekfuctie gebruikt auto aanvul, verbeterd typefouten en doet zoeksuggesties.
Zorg dat hij duidelijk in beeld komt niet verstopt in het menu. De standaard zoekfunctie van WordPress is niet altijd optimaal. Hiervoor zou je dan de plugin WP search voor kunnen gebruiken. Een bijkomend voordeel is dat dit inzichten oplevert over wat men zoekt.
Een goed thema heeft de optie om zelf een plek te kiezen.
Veelgemaakte fouten
In veel gevallen is het thema geschikt voor mobiele weergave. Maar plaatst men grote foto’s, sliders of slideshows pop-ups of video’s bovenin de pagina. Zelf plaats ik die ook, maar ik let wel op de laadtijd. Vaak zie ik dat hier te grote foto’s worden geplaatst die voor mobiel verkleind moeten worden. Mijn advies is om te kijken naar het aantal Kb’s van een foto en deze als jpg voor web te plaatsen. Wil je zelf proberen het aantal kb’s van je foto’s te verkleinen? Lees hierover dit blog: afbeeldingen te verkleinen.
Daarnaast is het in sommige gevallen beter om voor mobiel en tablet een aparte weergave aan te maken. Dus twee content blokken. De een is alleen zichtbaar op grote apparaten en de ander voor de kleinere.
Sliders en slideshows
Ze zien er heel mooi uit, maar vragen ontzettend veel van je laadtijd. Als je dit gegeven zet tegenover het feit dat veel mensen niet de tijd nemen om alle slides te bekijken. Dan lijkt het me een logische keuze om deze te weren bovenin je pagina. Heb je Lazy load aangezet in je website dan kan het zelfs betekenen dat bezoekers eerst een wit vlak zien totdat alles geladen is.
Pop-ups
Over pop-ups kan je enorme discussies starten. De een vind ze super irritant en de ander ziet meer de voordelen. Als je een pop-up gebruikt, zorg dan dat je deze niet direct laat inladen maar
Laadtijd
Waarom is laadtijd nu zo belangrijk? Dit is vanwege de beleving van de bezoeker, maar ook voor de ranking van je website in Google. Snel ladende website krijgen meer punten dan niet goed ladende websites. Bedenk wat je zelf zou doen als een pagina maar blijft laden. Dan ga je toch naar de volgende website?
De laadtijd kan ook liggen aan de server van je hostingpartij. Hier zit heel veel verschil. Het is wijs om een hosting pakket te kiezen welke geschikt is voor WordPress. Maar ook goed scoort op laadtijd. Ik ben in het verleden overgestapt van hostingpartij, en mijn website laad nu echt stukken sneller.
En hier vind je een test om je laadtijd te checken.
Andere redenen waarom een website langzaam is kan komen door afbeeldingen, externe scripts, slechte code van plugins, instellingen van je WordPress website.
Scripts
Je zult in de resultaten zien dat veel laadtijd op gaat aan scripts voor bijvoorbeeld een Facebook Pixel, de Google Tag manager, misschien een pop-up van MailChimp, Google Fonts. Overweeg of je het allemaal nodig hebt, en zo ja wat je kan laten verbeteren. Maar ook voor alle CSS en javascript bestanden vragen veel laadtijd.
Installeer een goede caching plugin
Een goede plugin om je website sneller te maken is WP Rocket, maar dit is een betaalde plugin. Als je de instellingen goed zet verbeterd dit de laadtijd gigantisch. Een gratis alternatief is W3 Total Cache. Overigens is het instellen vaak een klusje voor de ervaren website bouwer. Maar je kan er uiteraard eerst zelf ook mee experimenteren.
Google Search Console
Log eens in in je Google Search Console, hier vind je interessante rapportages (onder het kopje prestaties) over je website. Hier vind je ook hoeveel personen daadwerkelijk je website op mobiel bekijken. In mijn geval is desktop nog steeds populair. Onder het kopje gebruiksgemak vind je verbeterpunten.
YOOtheme paginabouwer
Photo by Paul Hanaoka on Unsplash
Schrijf een online marketingplan
Doe je mee met de online training vol praktische oefeningen en de aansluitende samen doe sessie?
1-op-1 kan ook.
Geef een reactie