Google Core Web Vitals in WordPress: hoe u uw site kunt optimaliseren

Is het je al gelukt om je site te optimaliseren voor Google Core Web Vitals?

Je kunt nee zeggen, het is oké. Je bent niet alleen. Searchmetrics ontdekte zelfs dat tot 96% van de top 2 miljoen sites^[1] mislukte Core Web Vitals-tests. Ik ben geen wiskundige, maar dat klinkt als veel.

Google Core Web Vitals is de nieuwste tool waarmee Google uw website kan analyseren. Google zal zaken als snelheid, inhoudskwaliteit en mobielvriendelijkheid nog steeds gebruiken om websites te rangschikken. Dus als je goed scoort, kun je een beetje ontspannen.

Maar een klein beetje omdat je concurrenten op zoek zijn naar het voordeel dat hen naar de top brengt. Hoe blijf je ze voor? Je zorgt voor geweldige gebruikerservaringen, en dat is precies wat Google ook wil.

En u krijgt grote beloningen als uw website geweldige ervaringen biedt en geweldige inhoud. In dit artikel gaan we je helpen om zo’n website te maken.

We beginnen met een duik in Google Core Web Vitals, zodat u precies weet wat ze betekenen en wat ze meten. Vervolgens delen we onze beste tips voor het bouwen van pagina’s die altijd slagen voor Core Web Vitals.

Hoewel er een verschuiving in de tijdlijn heeft plaatsgevonden en de update pas half juni wordt uitgerold, hebben we nog veel werk te doen. Laten we beginnen!

📚 Inhoudsopgave:

Wat zijn Google Core Web Vitals (en waarom zou u er om geven)?

Als Google-updates niet jouw ding zijn, vraag je je waarschijnlijk af waar het allemaal om draait. Laten we snel naar de details kijken.

In mei 2020 kondigde Google een nieuwe toevoeging aan hun zoekranglijst aan, Core Web Vitals. Een aankondiging als deze betekent meestal veel werk voor iemand. Met meer dan 200 unieke factoren die worden gebruikt om websites te rangschikken^[2]Google-ranglijst dekking alles.

U zult zelfs merken dat de leeftijd van uw domein een rol speelt in uw ranking. In dit geval richten Google Core Web Vitals zich op gebruikerservaring, of hoe het is om uw website te gebruiken.

In de toekomst zullen Google Core Web Vitals een reeks statistieken hebben, maar de update van 2021 bevat er drie: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) en First Input Delay (FID).

Grootste Contentful Paint (LCP)

Uw LCP is een meting van hoe lang het duurt voordat het grootste stuk inhoud is gedownload. Dit kan een afbeelding zijn of gewoon tekst. Wat het ook is, zodra het is geladen, de website voelt klaar.

Beter nog, de Largest Contentful Paint meet alleen inhoud in de viewport van de gebruiker. Afbeeldingen onder de vouw tellen niet mee voor je LCP-score.

Als u een goed resultaat wilt behalen, moet uw LCP minder dan 2,5 sec. zijn.

Cumulatieve lay-outverschuiving (CLS)

De CLS meet de stabiliteit van uw pagina tijdens het laadproces. Het meet alle verschuivingen die kunnen optreden wanneer afbeeldingen te laat worden geladen of wanneer lettertypen van stijl veranderen. Zelfs zaken als knoppen kunnen onverwachte verschuivingen op de pagina veroorzaken.

Als uw elementen plotseling bewegen (en meer dan 0,1), moet u een CLS-probleem oplossen.

Eerste ingangsvertraging (FID)

De FID meet hoe snel een browser interactief wordt. Dit betekent dat bezoekers in staat zijn om te doen spullen en krijg een reactie. Het omvat zaken als het klikken op links, het indrukken van knoppen of het invullen van selectievakjes.

U kunt deze statistiek doorgeven als gebruikers dingen kunnen doen zoals het invoeren van gegevens in formulieren en enquêtes binnen 100 ms.

Hoe u uw Google Core Web Vitals-score kunt testen (en lezen).

Een van de geweldige dingen van Core Web Vitals is hun gebruiksvriendelijke aanpak. Dit is geen stel geheimzinnige statistieken die moeilijk te testen zijn (laat staan ​​te begrijpen). In plaats daarvan alles kan heel eenvoudig met een aantal officiële Google-tools voor het testen en corrigeren van uw website.

Als het op testen aankomt, moet u de twee hoofdcategorieën kennen: hulpmiddelen voor laboratoriumtests en hulpmiddelen voor veldtesten. Tools voor veldtesten worden ondersteund door gegevens uit de echte wereld die afkomstig zijn van daadwerkelijke gebruikers die zich aanmelden voor het Chrome User Experience Report. Dit maakt ze waardevoller voor Core Web Vitals. We gaan ons concentreren op twee opties:

• Google Core Web Vitals-rapport van de Google Search Console.
• De Page Speed ​​Insights-test die zowel veld- als laboratoriumresultaten heeft.

Laten we beginnen met het Google Core Web Vitals-rapport, omdat het ons zal vertellen welke URL’s het probleem zijn.

Google Search Console gebruiken

Als je eenmaal in de console bent, scroll je naar beneden om te vinden Ervaring → Core Web Vitals. Als u hier klikt, wordt een volledig siterapport geopend waarin elke URL is gecategoriseerd als Goed, Moet worden verbeterd of Slecht.

⚠️ Als je Google Search Console nog niet hebt ingesteld, neem dan even de tijd om onze handleiding voor het gebruik van Google Search Console met WordPress door te lezen.

Klik op Rapport openen om meer specifieke informatie te krijgen over welke Core Web Vitals-statistiek de meeste problemen veroorzaakt.

Als je op de Type je krijgt een volledige lijst met URL’s die vervolgens kunnen worden getest Inzichten in paginasnelheid voor meer informatie.

Insights voor paginasnelheid gebruiken

Voer uw pagina-URL in en klik Analyseren om de proef te starten. Het zou niet lang moeten duren om de analyse te voltooien, die standaard de mobiele resultaten als eerste zal weergeven. U kunt echter Core Web Vitals-gegevens van zowel mobiel als desktop bekijken zonder een nieuwe test uit te voeren. Je vindt de resultaten helemaal bovenaan de pagina:

Als u uw hele pagina wilt testen, klikt u op Oorsprong Samenvatting. Zoals u kunt zien, zijn de Core Web Vitals handig gemarkeerd met percentages die aangeven hoe vaak ze passeren. Deze pagina is een solide pass, maar wat kunnen we doen voor falende pagina’s?

Wat kan ik doen om mijn Google Core Web Vitals-score te verbeteren?

Eigenlijk kunnen we heel wat doen om de Core Web Vitals-scores te verbeteren (zelfs zonder technische vaardigheden). Laten we eens kijken naar onze beste tips voor het verbeteren van de gebruikerservaring en Core Web Vitals.

Upgrade uw hosting

Ja, er is geen betere manier om de serverrespons te verbeteren dan een goede te hebben. In werkelijkheid kan het wisselen van host moeilijk zijn (en niet te vergeten prijzig), maar u hoeft niet over te stappen van shared hosting naar dedicated hosting. Ik bedoel, die sprong zal veel prestatieproblemen oplossen, maar zelfs een kleine sprong naar een snellere server kan ook merkbare prestatieverbeteringen opleveren.

Dat gezegd hebbende, als je al hebt besloten om de wijziging door te voeren, lees dan eerst onze vergelijking van de best presterende WordPress-hosts. Maar als je echt haast hebt, bekijk dan de onderstaande tabel:

Naast de standaard optimalisaties, biedt elk van de bovenstaande hosts een vorm van server-side caching. Caching is het proces waarbij een HTML-versie van uw site op uw server wordt opgeslagen, zodat deze gemakkelijker kan worden opgehaald. Server-side caching kan lastig zijn om te beheren en te configureren, dus u zult uw potentiële host naar hun proces moeten vragen.

Een caching-plug-in gebruiken

Niet alle hosts bieden echter caching aan de serverzijde, maar u kunt genieten van enkele voordelen met een plug-in voor paginacaching. Zelfs caching op paginaniveau levert content snel genoeg op om je Largest Contentful Paint te verbeteren.

Als het gaat om het gebruik van een plug-in, raad ik WP Super Cache aan omdat het volledig gratis is (geen upgrades) met eenvoudige en geavanceerde opties (zoals preload).

Hoe gemakkelijk is WP Super Cache te gebruiken? Bekijken:

Nadat de plug-in is geïnstalleerd en geactiveerd, opent u de instellingen via Instellingen → WP Super Cache. Klik op Eenvoudig en draai Caching aan en toen Status bijwerken.

Op een gegeven moment zul je wat problemen tegenkomen met je cache. Je hebt niet alleen te veel pagina’s in de cache, maar nieuwe wijzigingen worden ook niet op de site weergegeven. Als dit gebeurt, kunt u de cache wissen door op te klikken Cache verwijderen.

WP Super Cache biedt ook de mogelijkheid om uw meest populaire pagina’s vooraf te laden. Het vooraf laden zal echter waardevolle bronnen in beslag nemen, dus u moet verstandig kiezen en uw CPU dagelijks controleren.

Het instellen is eenvoudig. Klik op de Voorladen optie. U kunt de regelmaat van de cachevernieuwing instellen en of oude bestanden moeten worden verwijderd of niet.

Als je eenmaal tevreden bent met de instellingen, klik je op Cache nu vooraf laden starten. Zodra het cacheproces is voltooid, bevinden de bestanden zich in uw wp-content/cache map op de server.

Optimaliseer uw afbeeldingen

Mensen houden van foto’s. En we gebruiken er allemaal veel van, toch? Maar afbeeldingen kunnen uw Core Web Vital-scores schaden. Daar zijn een paar redenen voor:

• Het beeld is misschien te zwaar.
• De afmetingen van de afbeelding zijn te groot.
• Je laadt elke afbeelding op de pagina.
• De afbeeldingen worden vanaf uw server naar mensen over de hele wereld verzonden.

Gelukkig is er een eenvoudige manier om al het bovenstaande op te lossen.

Overweeg eerst een paar dingen als het om afbeeldingen gaat:

• Heb je elke afbeelding nodig?
• Welke afmetingen gebruik je? We streven naar >2000px.
• Probeer voor achtergronden patronen, verlopen of SVG’s te gebruiken.
• Beperk afbeeldingen boven de vouw tot een logo en een heldenafbeelding.
• Gebruik geen schuifregelaars of carrousels boven de vouw.

Nadat u uw afbeeldingen hebt opgeruimd, kunt u de rest optimaliseren. Afbeeldingsoptimalisatie kan afbeeldingsformaten verkleinen, hun afmetingen verbeteren en ze leveren vanaf een Content Delivery Network (CDN) met behulp van servers die dichter bij uw gebruikers staan. Voor dit alles raad ik aan Optimol.

Optimole bespaart uw servers veel werk door al het bovenstaande in de cloud te doen. Ga naar Optimol en meld u aan voor een API-sleutel (u hebt deze nodig om toegang te krijgen tot de cloudactiviteiten).

U ontvangt een e-mail om uw account te valideren via het Optimole-dashboard. Pak de API-sleutel en ga naar uw WordPress-site.

Nadat u Optimole hebt geïnstalleerd en geactiveerd, gaat u naar de instellingen van de Media → Optimole menu. Plak je API-sleutel erin en klik op verbinden.

U moet ook inschakelen Schaal afbeeldingen en Lazy load.

Door de afbeeldingen te schalen, verzendt Optimole afbeeldingen met het perfecte formaat voor het apparaat (ongeacht wat het is) om het verschuiven van de lay-out te verminderen.

Lazy loading betekent dat u alleen de afbeeldingen laadt die uw gebruikers in de viewport kunnen zien. Laat Optimole met die opstelling de rest afhandelen.

Code-optimalisaties

Het ding met het runnen van een WordPress-site zijn alle bewegende delen. Tussen de thema’s en plug-ins en de talen die ze aandrijven, is het moeilijk voor een niet-technisch persoon om code te optimaliseren.

Uiteraard kunnen we kiezen voor thema’s met geoptimaliseerde codebases en plug-ins met opgeblazen code vermijden. Daarnaast kunnen we code op twee manieren optimaliseren:

Een nadeel, Autoptimize heeft veel instellingen, wat betekent dat er geen echte one-size-fits-all oplossing is.

Dat gezegd hebbende, kunt u er gerust voor kiezen Optimaliseren alles van JavaScript, CSS, HTML. Deze instelling verkleint uw code door zaken als spaties en regeleinden te verwijderen. Naast minificatie heeft Autoptimize geweldige prestatie-opties voor iedereen die meer wil leren en veel wil testen.

U kunt bijvoorbeeld aanzienlijke snelheidsboosts krijgen met behulp van geavanceerde taken, zoals CSS voorladen en inline kritische CSS, maar u moet elke optie lezen voordat u deze gebruikt.

Lettertypen en iconen

U kunt Autoptimize gebruiken om uw lettertypen te verwerken, vooral als u vastbesloten bent om Google Fonts te gebruiken. U kunt zelfs proberen uw Google-lettertypen vooraf te laden om de ‘flash of unstyled text’ te voorkomen die uw cumulatieve lay-outverschuiving schaadt.

Ik raad je aan een paar verschillende opties uit te proberen en te kijken wat het beste werkt voor jouw site. Helaas, als u Elementor gebruikt, ziet u nog steeds dat de lay-out verandert. Als dit uw geval is, overweeg dan om over te schakelen naar systeemlettertypen.

Praktische tips voor advertenties

Als het gaat om het verschuiven van de lay-out, zijn advertenties een van de grootste problemen. Meestal duwen de advertenties inhoud naar beneden, wat een slechte gebruikerservaring creëert. Gelukkig is het mogelijk om de verschuiving te verminderen door best practices te volgen.

Het belangrijkste is dat de plaatsing van de advertentie een evenwicht moet vinden tussen meer klikken en impact op uw lay-out. Plaats bijvoorbeeld geen advertenties bovenaan de viewport. Als het uiteindelijke advertentieformaat groter is dan de container, wordt al uw inhoud naar beneden geduwd. Richt op het midden van de pagina waar de advertentie minder schade zal aanrichten.

Wanneer u de beste plaatsing heeft gekozen, reserveert u een plaats voor de advertentie. Hoewel je hierdoor misschien wat lege ruimte overhoudt, kan het de afweging waard zijn.

Gevolgtrekking

Met deze tips zou u onmiddellijk een verbetering van uw resultaten moeten zien. Beter nog, elk van de opties geeft u een goed startpunt voor verdere optimalisaties.

We hebben veel terrein bestreken, dus om samen te vatten:

• Het upgraden van uw hostingplan kan helpen om uw resultaten te verbeteren.
• Het gebruik van een caching-plug-in zou de levering van inhoud moeten versnellen.
• Het optimaliseren van afbeeldingen en het gebruik van een CDN zou de prestaties van de site moeten verbeteren.
• Met code-optimalisaties kunt u bepalen hoe uw site wordt geladen.
• Met een weloverwogen lettertypeselectie en vooraf laden, kunt u genieten van snelheidsboosts.
• Door praktische tips voor advertenties te volgen, kunt u lay-outverschuivingen verminderen.