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 statistieken vanaf mei 2021 deel gaan uitmaken van hun rangschikkingssignalen die worden gebruikt om webpaginaposities in 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.

Grootste 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 waargenomen dat de rest van uw afbeeldingen en tekst snel zullen laden. De vereiste laadtijd om te passeren is 2.5 seconden.

Eerste invoervertraging (FID): FID meet de interactiviteit van webpagina's. Dit wordt bepaald door hoe lang het duurt voordat de browser gebeurtenishandlers begint te verwerken nadat een gebruiker op uw site heeft geklikt. Dit wordt algemeen de eerste indruk van uw website genoemd. De vereiste tijd om te slagen is 100 milliseconden.

Cumulatieve layoutverschuiving (CLS): CLS meet de lay-outverschuiving die op een webpagina plaatsvindt. Als een webpagina wordt geladen en er plotseling iets verschijnt of verdwijnt en de pagina moet aanpassen om groter of kleiner te worden, wordt die verschuiving gemeten. Het is verschrikkelijk voor de gebruikerservaring en ik ben het ermee eens. De score die je moet halen 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 zal reageren op 3G of 2G in plaats van 4G. Want als je veel gebruikers krijgt die verbinding maken via 3G of 2G, komt dat neer op je Core Web Vitals-score. Elke milliseconde telt dus. Het verschil tussen 100 ms in je FID en 101 ms is dat je met 100 ms slaagt, maar met 101 ms faalt. Dus als iemand je vertelt dat 1 ms er niet toe doet, kan die persoon het gewoon bij het verkeerde eind hebben.

Bij het kiezen van een webhost, zorg er altijd voor dat een datacenter dichter bij de meerderheid van uw websitegebruikers staat. U kunt hun locaties vinden door naar uw analyses te kijken. Waar komen de meeste van uw gebruikers vandaan? Kies een datacenter dichter bij hen. 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 u op zoek bent naar een snelle webhost, zijn er tal van aanbevelingen die puur en zonder oprechtheid worden aangestuurd door filialen. Als je WordPress gebruikt en je kunt het betalen, raad ik je ten zeerste aan Kinsta. Ze zijn het beste voor WordPress. Als je iets goedkopers nodig hebt of je gebruikt geen WordPress, dan Cloudways is ook zeer effectief.

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 die u in een thema moet zoeken. Enkele van de meest voorkomende slechte praktijken zijn te afhankelijk van JQuery, te veel CSS/JS laden wanneer niet nodig, grote themagrootte en meer. Je kunt altijd een tool gebruiken zoals gele labs, om de demo te testen.

Als u WordPress gebruikt, kunt u de lijst met de snelste WordPress-thema's.

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 elke afbeelding te optimaliseren voordat ik ze upload. Ik gebruik geen externe service 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 plug-ins zoals Autoptimize, WP Rocket en anderen die dit voor je 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 het advies op PageSpeed ​​Insight gezien om: afbeeldingen buiten beeld uitstellen. Wat het simpelweg betekent, is dat je je afbeeldingen lui laadt.

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.

Ook verwijder ongebruikte CSS. Als een service die u gebruikt CSS pusht die niet wordt gebruikt, kunt u deze veilig verwijderen.

Als u WordPress gebruikt, zijn er plug-ins zoals WP Rocket, LiteSpeed ​​Cache, FlyingPress en andere die u kunnen helpen dit te bereiken.

11. AdSense slim laden implementeren

Deze methode kan alle uitdagingen bijna volledig elimineren als AdSense verantwoordelijk is voor het vertragen van uw website.

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

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

Opmerking: Hoewel deze methode kan helpen de waargenomen snelheid en paginascores te verbeteren, kan dit van invloed zijn op uw AdSense-inkomsten. Ik raad je aan een experiment uit te voeren om er zeker van te zijn 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.

U kunt afrekenen beste CDN's buiten.

14. DNS-prefetching instellen

Als u vertrouwt op een externe service zoals een CDN voor de levering van uw website, moet u mogelijk: een DNS-prefetching instellen om vertraging als gevolg van DNS-lookup 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 van AMP is om webpagina's te optimaliseren om sneller te laden op mobiel. En natuurlijk de AMP open source project is 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.