Hur du optimerar din webbplats för Core Web Vitals (Adsense)

Kapplöpet att förbättra Core Web Vitals är inte lätt. Det blir svårare om du litar på ett reklamprogram som Google AdSense för att tjäna pengar på din webbplats.

Webbplatser som kör Google AdSense har 10 gånger större sannolikhet att misslyckas med Core Web Vitals-testet än samma webbplats utan Google AdSense på den. Detta beror främst på antalet förfrågningar och tillgångar från tredje part som Google AdSense lägger till på din webbplats. De flesta av dessa tillgångar är ooptimerade, stora och icke-användarvänliga.

Utanför AdSense och reklamplattformar, om du har många ooptimerade bilder, JavaScript och CSS, särskilt ovanför mitten, är det också mycket troligt att du misslyckas med Core Web Vitals-testet.

Om du har kämpat för att klara Core Web Vitals-testet och förbättra din rankningspotential för sökmotorer, hittar du praktiska lösningar i den här artikeln.

Vad är Core Web Vitals?

Core Web Vitals är mätvärden som drivs av Google Lighthouse som avgör hur en webbplats levererar en bra sidupplevelse. Även om det finns många mätvärden när man kör ett test, är de viktigaste mätvärdena Largest Contentful Paint (LCP), First Input Delay (FID) och Cumulative Layout Shift (CLS).

Google har meddelat att från maj 2021 kommer dessa mätvärden att bli en del av deras rankningssignaler som används för att fastställa webbsidors positioner i sökresultat.

Sammanfattningsvis kan du säga att Core Web Vitals inte var tänkt att vara en skräck för webbansvariga utan ett sätt att förbättra sidupplevelsen på webbplatser.

Största innehållsrika färg (LCP): LCP mäter den tid det tar för den största synliga bilden eller textblocket på en webbsida att laddas. Om den största synliga texten eller bilden laddas snabbt, uppfattas det som att resten av dina bilder och text kommer att laddas snabbt. Den laddningstid som krävs för att passera är 2.5 sekunder.

Första ingångsfördröjning (FID): FID mäter webbsidors interaktivitet. Detta bestäms av hur lång tid det tar för webbläsaren att börja bearbeta händelsehanterare efter att en användare har klickat på din webbplats. Detta kallas allmänt det första intrycket av din webbplats. Den tid som krävs för att passera är 100 millisekunder.

Kumulativ layoutförskjutning (CLS): CLS mäter layoutförskjutning som sker på en webbsida. När en webbsida laddas och sedan plötsligt något dyker upp eller försvinner och sidan måste anpassa sig till att bli större eller mindre, är det skiftet det som mäts. Det är hemskt för användarupplevelsen och jag håller med. Poängen du ska behöva för att klara är 0.1.

Hur du optimerar din webbplats för Core Web Vitals

Följ dessa steg för att optimera din webbplats:

1. Börja med ett snabbt webbhotell

Om du har ett webbhotell med en fruktansvärd svarstid, kanske alla andra saker som jag kommer att lista här inte ger önskat resultat. Ju snabbare din server svarar på förfrågningar, desto bättre.

Varför är ett webbhotell med en snabb tid till första byte (TTFB) viktigt? Vissa kommer att hävda att TTFB inte spelar någon roll, men det gör det. Det är grunden för allt annat. Om du har användare i städer med långsamt internet, hur snabbt din webbvärd kan svara kommer att betyda allt. Alla webbhotell kan prestera bra om du har användare främst från städer med supersnabbt internet.

Testa hur ditt webbhotell reagerar på 3G eller 2G istället för 4G. För om du får många användare som ansluter via 3G eller 2G, ökar det till din Core Web Vitals-poäng. Så varje millisekund räknas. Skillnaden mellan att få 100ms i din FID och att få 101ms är att med 100ms klarar du men med 101ms misslyckas du. Så om någon säger till dig att 1 ms inte spelar någon roll, kan den personen bara ha fel.

När du väljer en webbhotell, se alltid till att få ett datacenter närmare majoriteten av dina webbplatsanvändare. Du kan hitta deras platser genom att titta på din analys. Var kommer de flesta av dina användare ifrån? Välj ett datacenter närmare dem. Ju närmare desto bättre.

Jag har personligen märkt en betydande förändring i en webbplatss fältdata för Core Web Vitals efter att ha bytt webbhotell. Jag gjorde inget annat.

Om du letar efter ett snabbt webbhotell finns det massor av rekommendationer där ute som enbart drivs av affiliates utan uppriktighet. Om du kör WordPress och har råd med det rekommenderar jag starkt Kinsta. De är de bästa för WordPress. Om du behöver något billigare eller om du inte använder WordPress då Cloudways är också väldigt effektivt.

2. Använd ett lättviktigt och hastighetsoptimerat tema

Det här tipset är särskilt användbart för icke-kodare och även för kodare med kortare tid. Speciellt om du använder WordPress där det finns så många alternativ, se till att du använder ett lättviktigt och hastighetsoptimerat tema.

Eftersom temat är som skelettet på din webbplats, om skelettet är trasigt kommer kroppen att gå sönder. Det är bara det.

Det finns en lång lista med bästa praxis du bör leta efter i ett tema. Några av de vanligaste dåliga metoderna är överberoende av JQuery, laddar för många CSS/JS när de inte behövs, stor temastorlek och mer. Du kan alltid använda ett verktyg som Gula labb, för att testa demon.

Om du använder WordPress kan du kolla in listan över snabbaste WordPress-teman.

3. Optimera dina bilder

Bilder är coola. De gör innehållet så tilltalande. Men de kan vara en börda om de är ooptimerade. Att ha stora bilder som 3 MB kommer definitivt att påverka din hastighet. Och om dessa bilder är synliga när din webbplats besöks innan du rullar, kommer de definitivt att påverka ditt LCP-mått.

Sanningen är att ooptimerade bilder ökar storleken på din sida. Ju större sidstorleken är, desto längre tid tar det att ladda.

Jag föredrar personligen att optimera varje bild innan jag laddar upp dem. Jag använder ingen extern tjänst för bildoptimering. Men om du använder WordPress eller liknande CMS så finns det plugins och lösningar för att optimera bilder automatiskt. Det finns också molnlösningar oavsett vad du använder.

4. Ta bort eller minska storleken på bakgrundsbilder

Bakgrundsbilder är vanligtvis mycket stora. Och det kan sakta ner din laddningstid eftersom det måste laddas först innan meningsfullt innehåll visas.

Du kan ta bort bakgrundsbilden helt för att få en snabbare webbplats. Om de är så viktiga, överväg att optimera dem till minsta möjliga storlek eller använda mönster istället för bilder.

5. Använd webbläsarens cachelagring

Om du har många trogna läsare bör du överväga webbläsarcache. När en användare besöker din webbplats för första gången, cachelagrar webbläsaren den webbplatsen. För vartannat besök kommer det att laddas på ett ögonblick. Detta kan avsevärt förbättra FID och LCP från det andra besöket och uppåt.

För WordPress-användare kan de flesta caching-plugin hjälpa dig att uppnå detta.

6. Förminska JavaScript och skjut upp oanvänd JavaScript

Även om JavaScript är fantastiskt, är det ofta renderingsblockerande. Detta innebär att det kan påverka din laddningstid och i slutändan din FID.

Försök att förminska JavaScript genom att ta bort blanksteg och kommentarer för att minska filstorleken. Se också till att du skjuter upp icke-kritisk JavaScript. Detta borde förbättra din FID.

För WordPress-användare finns det plugins som Autoptimize, WP Rocket, och andra som kan göra detta åt dig.

7. Ställ in AdSense size-attribut

Om du kör AdSense på din webbplats och du kämpar med CLS kan detta lösa alla dina problem. Det gjorde det för mig och det borde det för dig.

Om du har en annonsenhet nära rubriken som är synlig när en användare besöker, är ett problem att annonsen kanske inte laddas direkt. Den kan laddas efter att sidan redan har laddats, och när den gör det sker en förändring i layouten. Detta är mycket vanligt för responsiva annonsenheter. När det händer är det omöjligt att klara CLS-måttet.

Det bästa sättet att hantera detta är att redigera din AdSense-kod lite. Inga bekymmer, det är mycket legitimt. Ange bara storleksattributet för annonsen, särskilt höjden. När du har gjort det kommer du inte längre att märka en layoutförskjutning när annonsen laddas.

Nedan är ett exempel på en responsiv annonsenhet som jag använde på min blogg precis under rubriken. Jag har ersatt mitt utgivar-ID och annonsplats med XXXXXX. Märkte att jag lade till höjdattributet (min-höjd: 300px). I samma ögonblick som jag gjorde det var alla CLS-problem borta för alltid.

<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>

Vad detta gör är att reservera den storleken på sidan. Så när annonser dyker upp finns det inget layoutskifte, eftersom du redan hade ställt in storleken.

8. Ställ in storleksattribut för dina bilder och andra media

Precis som med annonser kan bilder och andra medier orsaka layoutförskjutningar när de läses in på din webbplats. Du kanske bara läser något, sedan laddas en bild och plötsligt sker en layoutförskjutning, det du läste syns inte och allt du ser är något annat eller så klickar du till och med på något annat av misstag.

Du kan undvika alla dessa genom att ställa in storleksattribut för dina mediefiler. Din CLS-statistik kommer att vara glad att du gjorde det.

9. Lata Ladda bilder.

Du kanske har sett rådet om PageSpeed ​​Insight till skjuta upp bilder utanför skärmen. Vad det helt enkelt betyder är att lata ladda dina bilder.

Vad lazy loading gör är att minska sidstorleken och även minska laddningstiden på din sida när en användare besöker. Vilket är bra för CWV-mått.

Detta kommer särskilt att bidra till att förbättra LCP.

10. Optimera CSS genom att minifiera och generera kritisk CSS

CSS är det som får en webbplats att se cool ut, men en stor CSS-fil kan vara ett stort problem eftersom det kommer att fördröja renderingen av sidan till användaren.

När en användare besöker din webbplats kommer webbläsaren att fördröja renderingen av din webbsida till användaren tills den har laddat, analyserat och exekverat all CSS som hänvisas till i din webbsidas rubrik. Om du har en stor CSS-fil kan detta vara ett stort problem. Det kommer att sakta ner din webbplats.

Kritisk CSS kan hjälpa genom att bara ladda den CSS som krävs för att sidan ska laddas. Medan resten av CSS kan laddas asynkront.

Det kan också hjälpa att förminska din CSS genom att ta bort blanksteg och kommentarer för att minska filstorleken.

Du kan också ta bort oanvänd CSS. Om en tjänst du använder pushar CSS som inte används är det säkert att ta bort dem.

Om du använder WordPress finns det plugins som WP Rocket, LiteSpeed ​​Cache, FlyingPress och andra som kan hjälpa dig att uppnå detta.

11. Implementera AdSense smart loading

Den här metoden kan nästan helt eliminera alla utmaningar om AdSense är ansvarigt för att sakta ner din webbplats.

Det här handlar om att ladda AdSense på ett smart sätt. AdSense kommer inte att laddas förrän en användare vidtar en åtgärd som att rulla eller klicka. Detta kommer att avsevärt förbättra laddningstiden och alla viktiga webbviktigheter som påverkas av AdSense.

Det finns många WordPress-plugins som kan hjälpa dig att göra detta, WP Rocket och Flying Scripts är ett exempel. Denna metod bryter såvitt jag vet inte mot Google AdSense policy.

Obs: Även om den här metoden kan hjälpa till att förbättra upplevd hastighet och sidresultat, kan den påverka dina AdSense-intäkter. Jag rekommenderar att du kör ett experiment för att vara säker på om det är värt det

12. Använd typsnittet System Stack om du kan

Teckensnitt lägger till extra laddningstid på vilken webbplats som helst. Och för webbsidor utan bilder kan ditt textblock vara ansvarigt för din LCP-klassificering. I så fall kommer din LCP-poäng att påverkas direkt av ditt typsnitt.

Medan Google Font och Font Awesome fortsätter att förbättras, erbjuder användningen av systemstack-teckensnitt en betydande förbättring. Även om det inte är lika fantasifullt beroende på enhet.

13. Använd ett CDN

Om du har användare från olika delar av världen kan användningen av ett CDN bidra till att förbättra din hastighet och indirekt dina Core Web Vitals-mätvärden.

Ett CDN i enkel förklaring gör många kopior av din webbplats och lagrar dem i olika Point of Presence (POPs) i olika delar av världen. När någon efterfrågar din webbplats betjänar den din webbplats från närmaste plats.

Till exempel, om din webbplats är värd i USA och du har en besökare från Storbritannien, istället för att hämta din webbplats från USA, kommer CDN att betjäna din webbplats från Storbritannien. Effekten av det blir snabb leverans. Hastighet.

Du kan checka ut bästa CDN där ute.

14. Ställ in DNS-förhämtning

Om du förlitar dig på en extern tjänst som ett CDN för leverans av din webbplats kan du behöva göra det ställ in en DNS-förhämtning för att minimera fördröjning på grund av DNS-sökning.

DNS-förhämtning kommer att förhämta DNS innan den anropas. Så att den laddas på ett ögonblick när den äntligen anropas.

15. Optimera skript från tredje part

Kontrollera att vissa av de tjänster du använder på din webbplats inte lägger till skript från tredje part som kan göra dina webbplatser långsammare.

Du kan ersätta lösningen med förfrågningar från tredje part som saktar ner din webbplats med en bättre lösning.

När det gäller Google AdSense, ett annat skript från tredje part, finns det lite du kan göra. Den bästa praxisen är att använda högst 3 annonser samlade på en sida. Undvik Matchat innehåll eftersom det ger låg inkomst men ökar laddningstiden.

16. Ta bort AdSense ovanför mitten

Detta råd är baserat på experiment. Om alla dina mätvärden är bra i sökkonsolrapporten förutom LCP, se först till att dina bilder och typsnitt är optimerade. Om de är optimerade och du fortfarande misslyckas med LCP kan AdSense vara ansvarigt.

Om du har råd kan du ta bort AdSense ovanför mitten i en månad och se om problemet försvinner.

Om du inte vill ta bort det kan du fördröja det manuellt eller med hjälp av ett plugin som Flying Scripts.

17. Byt till AMP

AMP betyder Accelerated Mobile Pages. Tanken med AMP är att optimera webbsidor för att laddas snabbare på mobilen. Och naturligtvis AMP öppen källkod projektet startades av Google.

Medan AMP ursprungligen var tänkt att snabba upp mobilsidor, kan den också snabba upp skrivbordssidor.

AMP-sidor är genomgående snabbare än mobil- eller datorsidor, ibland med över 100 % enligt vår observation.

Om den enda intäktsgenereringsstrategin för din webbplats är Google AdSense, kan du överväga att byta hela din webbplats till AMP. Jag har personligen märkt att på en blogg jag äger konverterar AdSense på AMP-sidor ibland mer än på mobiler och datorer!

Slutsats

De viktigaste webbuppgifterna kan hjälpa dig att förbättra din webbplats för dina användare, inte bara för Google. Det är mycket vanligt att ha en bra labdatatestpoäng men dålig fältdatapoäng.

Detta beror på dina användares makeup. Om de flesta av dina användare kommer från platser med långsamt internet kan du ha gjort ett bra jobb med att optimera men fortfarande misslyckas med fältdata.