Hoe u uw website kunt optimaliseren voor Core Web Vitals (Adsense)

De race om Core Web Vitals te verbeteren is niet gemakkelijk. Het wordt moeilijker als u vertrouwt op een advertentieprogramma zoals Google AdSense om inkomsten te genereren met uw website.

Websites met Google AdSense hebben 10 keer meer kans om de Core Web Vitals-test te doorstaan ​​dan dezelfde website zonder Google AdSense erop. Dit komt vooral door het aantal verzoeken en items van derden die Google AdSense aan uw website toevoegt. De meeste van deze activa zijn niet-geoptimaliseerd, groot en niet-gebruiksvriendelijk.

Buiten AdSense en advertentieplatforms, als u veel niet-geoptimaliseerde afbeeldingen, JavaScript en CSS heeft, vooral boven de vouw, dan is de kans groot dat u niet slaagt voor de Core Web Vitals-test.

Als u moeite heeft gehad om de Core Web Vitals-test te doorstaan ​​en uw positie in zoekmachines te verbeteren, vindt u in dit artikel praktische oplossingen.

Wat zijn Core Web Vitals?

Core Web Vitals zijn door Google Lighthouse aangedreven statistieken die bepalen hoe een site een goede pagina-ervaring levert. Hoewel er veel meetwaarden zijn bij het uitvoeren van een test, zijn de belangrijkste meetwaarden de Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulatieve Layout Shift (CLS).

Google heeft aangekondigd dat deze gegevens vanaf mei 2021 onderdeel zullen uitmaken van de rankingfactoren die worden gebruikt om de positie van webpagina's in de zoekresultaten te bepalen.

Samenvattend kun je zeggen dat Core Web Vitals niet bedoeld was als een schrik voor webmasters, maar als een middel om de pagina-ervaring van websites te verbeteren.

Largest Contentful Paint (LCP) : LCP meet de tijd die nodig is om de grootste zichtbare afbeelding of tekstblok op een webpagina te laden. Als de grootste zichtbare tekst of afbeelding snel laadt, wordt aangenomen dat de rest van de afbeeldingen en tekst ook snel zullen laden. De minimale laadtijd om te slagen is 2.5 seconden.

Eerste invoervertraging (FID) : FID meet de interactiviteit van een webpagina. Deze wordt bepaald door de tijd die de browser nodig heeft om gebeurtenisafhandelaars te verwerken nadat een gebruiker op uw site heeft geklikt. Dit wordt algemeen beschouwd als de eerste indruk van uw website. De vereiste tijd om te verstrijken is 100 milliseconden.

Cumulatieve lay-outverschuiving (CLS) : CLS meet de lay-outverschuiving die optreedt op een webpagina. Wanneer een webpagina laadt en er plotseling iets verschijnt of verdwijnt, waardoor de pagina groter of kleiner moet worden, wordt die verschuiving gemeten. Het is verschrikkelijk voor de gebruikerservaring, en daar ben ik het mee eens. De minimale score om te slagen is 0.1.

Hoe u uw website kunt optimaliseren voor Core Web Vitals

Volg deze stappen om uw website te optimaliseren:

1. Begin met een snelle webhost

Als je een webhost hebt met een verschrikkelijke responstijd, dan levert al het andere dat ik hier zal opsommen misschien niet de gewenste resultaten op. Hoe sneller uw server reageert op verzoeken, hoe beter.

Waarom is een webhost met een snelle Time to first byte (TTFB) belangrijk? Sommigen zullen beweren dat TTFB er niet toe doet, maar dat doet het wel. Dat is de basis van al het andere. Als u gebruikers heeft in steden met traag internet, betekent alles hoe snel uw webhost kan reageren. Elke webhost kan goed presteren als u voornamelijk gebruikers heeft uit steden met supersnel internet.

Probeer te testen hoe uw webhost reageert op 3G of 2G in plaats van 4G. Want als veel gebruikers verbinding maken via 3G of 2G, telt dit op voor uw Core Web Vitals-score. Elke milliseconde telt dus. Het verschil tussen het halen van 100 ms in je FID en het halen van 101 ms is dat je met 100 ms wel slaagt, maar met 101 ms niet. Dus als iemand je vertelt dat 1 ms er niet toe doet, kan die persoon het mis hebben.

Bij het kiezen van een webhost is het belangrijk om altijd een datacenter te kiezen dat zich dichter bij de meeste bezoekers van je website bevindt. Je kunt hun locaties achterhalen door je websiteanalyses te bekijken. Waar komen de meeste van je bezoekers vandaan? Kies dan een datacenter dat daar het dichtst bij ligt. Hoe dichterbij, hoe beter.

Ik heb persoonlijk een significante verandering opgemerkt in de Field Data of Core Web Vitals van een website na het veranderen van de webhost. Ik deed niets anders.

Als je op zoek bent naar een snelle webhost, zijn er talloze aanbevelingen die puur gebaseerd zijn op affiliate marketing en weinig oprechtheid tonen. Als je WordPress gebruikt en het je kunt veroorloven, raad ik Kinsta ten zeerste aan . Zij zijn de beste voor WordPress. Als je iets goedkopers zoekt of geen WordPress gebruikt, is Cloudways ook een zeer goede optie.

2. Gebruik een lichtgewicht en voor snelheid geoptimaliseerd thema

Deze tip is vooral erg handig voor niet-codeerders en zelfs voor codeerders met minder tijd. Vooral als je WordPress gebruikt waar er zoveel opties zijn, zorg er dan voor dat je een lichtgewicht en voor snelheid geoptimaliseerd thema gebruikt.

Omdat het thema is als het skelet van uw website, als het skelet wordt gebroken, wordt het lichaam ook gebroken. Dat is het gewoon.

Er is een lange lijst met best practices waar je op moet letten bij het kiezen van een thema. Enkele veelvoorkomende slechte praktijken zijn overmatige afhankelijkheid van jQuery, het laden van te veel CSS/JS wanneer dit niet nodig is, een te grote themagrootte, en meer. Je kunt altijd een tool zoals Yellowlabs gebruiken om de demo te testen.

Als je WordPress gebruikt, kun je de lijst met de snelste WordPress-thema's bekijken.

3. Optimaliseer uw afbeeldingen

Beelden zijn gaaf. Ze maken content zo aantrekkelijk. Maar ze kunnen een last zijn als ze niet geoptimaliseerd zijn. Het hebben van grote afbeeldingen zoals 3 MB heeft zeker invloed op uw snelheid. En als deze afbeeldingen zichtbaar zijn wanneer uw site wordt bezocht voordat u scrolt, hebben ze zeker invloed op uw LCP-statistieken.

De waarheid is dat niet-geoptimaliseerde afbeeldingen de grootte van uw pagina vergroten. Hoe groter het paginaformaat, hoe langer het duurt om te laden.

Persoonlijk geef ik er de voorkeur aan om elke afbeelding te optimaliseren voordat ik ze upload. Ik maak geen gebruik van een externe dienst voor beeldoptimalisatie. Als u echter WordPress of een vergelijkbaar CMS gebruikt, zijn er plug-ins en oplossingen om afbeeldingen automatisch te optimaliseren. Er zijn ook cloudoplossingen, ongeacht wat u gebruikt.

4. Achtergrondafbeeldingen verwijderen of verkleinen

Achtergrondafbeeldingen zijn meestal erg groot. En het kan uw laadtijd vertragen, omdat het eerst moet worden geladen voordat zinvolle inhoud wordt weergegeven.

U kunt de achtergrondafbeelding volledig verwijderen om een ​​snellere website te hebben. Als ze zo belangrijk zijn, overweeg dan om ze zo klein mogelijk te maken of patronen te gebruiken in plaats van afbeeldingen.

5. Browsercaching gebruiken

Als je veel trouwe lezers hebt, moet je browsercaching overwegen. Wanneer een gebruiker uw website voor de eerste keer bezoekt, zal de browser die website in de cache opslaan. Voor elk ander bezoek wordt het in een oogwenk geladen. Dit kan FID en LCP vanaf het tweede bezoek aanzienlijk verbeteren.

Voor WordPress-gebruikers kunnen de meeste caching-plug-ins u helpen dit te bereiken.

6. Verklein JavaScript en stel ongebruikt JavaScript uit

Hoewel JavaScript geweldig is, blokkeert het vaak de weergave. Dit betekent dat het uw laadtijd en uiteindelijk uw FID kan beïnvloeden.

Probeer JavaScript te verkleinen door de spaties en opmerkingen te verwijderen om de bestandsgrootte te verkleinen. Zorg er ook voor dat u niet-kritieke JavaScript uitstelt. Dit zou je FID moeten verbeteren.

Voor WordPress-gebruikers zijn er plugins zoals Autoptimize , WP Rocket en andere die dit voor u kunnen doen.

7. Stel het AdSense-formaatkenmerk in

Als u AdSense op uw website gebruikt en u worstelt met CLS, dan kan dit al uw problemen oplossen. Het deed het voor mij en het zou voor jou moeten doen.

Als u een advertentieblok heeft dicht bij de koptekst die zichtbaar is wanneer een gebruiker deze bezoekt, is een probleem dat de advertentie mogelijk niet onmiddellijk wordt geladen. Het kan worden geladen nadat de pagina al is geladen, en als dat het geval is, is er een verschuiving in de lay-out. Dit is heel gebruikelijk voor responsieve advertentieblokken. Als dat gebeurt, is het onmogelijk om de CLS-metriek te halen.

De beste manier om hiermee om te gaan, is door uw AdSense-code een beetje aan te passen. Geen zorgen, het is zeer legitiem. Geef gewoon het maatkenmerk voor de advertentie op, met name de hoogte. Nadat je dat hebt gedaan, zul je geen lay-out meer merken wanneer de advertentie wordt geladen.

Hieronder ziet u een voorbeeld van een responsief advertentieblok dat ik op mijn blog heb gebruikt, net onder de koptekst. Ik heb mijn uitgever-ID en advertentieruimte vervangen door XXXXXX. Merkte op dat ik het hoogte-attribuut (min-height: 300px) heb toegevoegd. Op het moment dat ik dat deed, waren alle CLS-problemen voorgoed verdwenen.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Wat dit doet, is die maat op de pagina reserveren. Dus wanneer advertenties worden weergegeven, is er geen lay-outverschuiving, omdat u de grootte al had ingesteld.

8. Stel het formaatkenmerk in voor uw afbeeldingen en andere media

Net als bij advertenties kunnen afbeeldingen en andere media lay-outverschuivingen veroorzaken wanneer ze op uw website worden geladen. Misschien ben je gewoon iets aan het lezen, dan wordt een afbeelding geladen en plotseling is er een lay-outverschuiving, wat je aan het lezen was, is uit het zicht en alles wat je ziet is iets anders of je klikt zelfs per ongeluk op iets anders.

U kunt dit allemaal vermijden door het groottekenmerk voor uw mediabestanden in te stellen. Uw CLS-statistiek zal blij zijn dat u dat deed.

9. Lazy Load afbeeldingen.

Je hebt misschien wel eens op PageSpeed ​​Insight het advies gezien om afbeeldingen die niet op het scherm verschijnen, uit te stellen . Dit betekent simpelweg dat je je afbeeldingen pas laadt als ze niet volledig zichtbaar zijn.

Wat lui laden doet, is de paginagrootte verkleinen en ook de laadtijd van uw pagina verminderen wanneer een gebruiker deze bezoekt. Dat is goed voor de CWV-statistieken.

Dit zal met name helpen om LCP te verbeteren.

10. Optimaliseer CSS door kritische CSS te verkleinen en te genereren

CSS zorgt ervoor dat een website er cool uitziet, maar een groot CSS-bestand kan een groot probleem zijn omdat het de weergave van de pagina voor de gebruiker zal vertragen.

Wanneer een gebruiker uw website bezoekt, zal de browser bij normaal gedrag de weergave van uw webpagina aan de gebruiker vertragen totdat deze alle CSS heeft geladen, geparseerd en uitgevoerd waarnaar wordt verwezen in de koptekst van uw webpagina. Als u een groot CSS-bestand heeft, kan dit een groot probleem zijn. Het zal je site vertragen.

Kritische CSS kan helpen door alleen de CSS te laden die nodig is om de pagina te laden. Terwijl de rest van de CSS asynchroon kan worden geladen.

Ook het verkleinen van uw CSS door spaties en opmerkingen te verwijderen om de bestandsgrootte te verkleinen, kan helpen.

Je kunt ook ongebruikte CSS verwijderen . Als een service die je gebruikt CSS-bestanden doorstuurt die niet nodig zijn, kun je die gerust verwijderen.

Als je WordPress gebruikt, zijn er plugins zoals WP Rocket , LiteSpeed ​​Cache, FlyingPress en andere die je hierbij kunnen helpen.

11. AdSense slim laden implementeren

Met deze methode kunt u vrijwel alle problemen oplossen als AdSense de oorzaak is van de vertraging van uw website.

Dit gaat over het slim laden van AdSense. AdSense wordt pas geladen als een gebruiker een actie onderneemt, zoals scrollen of klikken. Dit zal de laadtijd en eventuele essentiële webvitaliteit die door AdSense worden beïnvloed, aanzienlijk verbeteren.

Er zijn veel WordPress-plugins die je hierbij kunnen helpen, WP Rocket en Flying Scripts zijn daar voorbeelden van. Deze methode is, voor zover ik weet, niet in strijd met het beleid van Google AdSense.

Let op: hoewel deze methode de waargenomen laadsnelheid en paginascores kan verbeteren, kan dit wel invloed hebben op uw AdSense-inkomsten. Ik raad u aan een experiment uit te voeren om te bepalen of het de moeite waard is.

12. Gebruik het lettertype System Stack als je kunt

Lettertypen voegen extra laadtijd toe op elke website. En voor webpagina's zonder afbeeldingen kan uw tekstblok verantwoordelijk zijn voor uw LCP-classificatie. In dat geval wordt uw LCP-score direct beïnvloed door uw lettertype.

Hoewel Google Font en Font Awesome blijven verbeteren, biedt het gebruik van het systeemstacklettertype een aanzienlijke verbetering. Hoewel niet zo fantasievol, afhankelijk van het apparaat.

13. Gebruik een CDN

Als u gebruikers uit verschillende delen van de wereld heeft, kan het gebruik van een CDN uw snelheid en indirect uw Core Web Vitals-statistieken helpen verbeteren.

Een CDN maakt in eenvoudige uitleg veel kopieën van uw website en slaat deze op in verschillende Point of Presence (POP's) in verschillende delen van de wereld. Wanneer iemand uw website opvraagt, bedient deze uw website vanaf de dichtstbijzijnde locatie.

Als uw site bijvoorbeeld in de Verenigde Staten wordt gehost en u een bezoeker uit het Verenigd Koninkrijk heeft, zal het CDN uw site uit het Verenigd Koninkrijk aanbieden in plaats van uw site op te halen uit de Verenigde Staten. Het effect daarvan is een snelle levering. Snelheid.

Je kunt de beste CDN's op de markt bekijken.

14. DNS-prefetching instellen

Als u voor de levering van uw website afhankelijk bent van een externe service zoals een CDN, dan moet u mogelijk DNS-prefetching instellen om vertragingen als gevolg van DNS-opzoekingen te minimaliseren.

DNS-prefetching zal de DNS prefetchen voordat deze wordt aangeroepen. Zodat het in een oogwenk wordt geladen wanneer het eindelijk wordt gebeld.

15. Scripts van derden optimaliseren

Controleer of sommige van de services die u op uw site gebruikt, geen scripts van derden toevoegen die uw sites kunnen vertragen.

U kunt de oplossing vervangen door verzoeken van derden die uw site vertragen door een betere oplossing.

Als het gaat om Google AdSense, een ander script van derden, kunt u weinig doen. Het beste is om maximaal 3 advertenties op een pagina te gebruiken. Vermijd overeenkomende inhoud omdat dit een laag inkomen oplevert, maar de laadtijd verlengt.

16. Verwijder AdSense van boven de vouw

Dit advies is gebaseerd op experimenten. Als al uw statistieken goed zijn in het rapport van de zoekconsole, behalve LCP, moet u er eerst voor zorgen dat uw afbeeldingen en lettertypen zijn geoptimaliseerd. Als ze zijn geoptimaliseerd en u nog steeds niet in staat bent LCP te gebruiken, is AdSense mogelijk verantwoordelijk.

Als u het zich kunt veroorloven, verwijdert u AdSense een maand lang boven de vouw en kijkt u of het probleem verdwijnt.

Als u het niet wilt verwijderen, kunt u het handmatig of met behulp van een plug-in zoals Flying Scripts vertragen.

17. Schakel over naar AMP

AMP staat voor Accelerated Mobile Pages. Het idee achter AMP is om webpagina's te optimaliseren zodat ze sneller laden op mobiele apparaten. En natuurlijk is het open-sourceproject AMP gestart door Google.

Hoewel AMP oorspronkelijk bedoeld was om mobiele pagina's te versnellen, kan het ook desktoppagina's versnellen.

AMP-pagina's zijn consistent sneller dan mobiele of desktoppagina's, soms met meer dan 100% volgens onze waarneming.

Als Google AdSense de enige strategie om inkomsten te genereren met uw website is, kunt u overwegen om uw hele website over te schakelen naar AMP. Ik heb persoonlijk gemerkt dat op een blog die ik bezit, AdSense op AMP-pagina's soms meer converteert dan op mobiel en desktop!

Conclusie

De Core Web-vitaliteit kan u helpen uw website te verbeteren voor uw gebruikers, niet alleen voor Google. Het is heel gebruikelijk om een ​​goede testscore voor laboratoriumgegevens te hebben, maar een slechte score voor veldgegevens.

Dit komt door de samenstelling van uw gebruikers. Als de meeste van uw gebruikers afkomstig zijn uit plaatsen met traag internet, heeft u mogelijk goed werk verricht bij het optimaliseren, maar faalt u nog steeds in veldgegevens.