Kako optimizirati svoju web stranicu za Core Web Vitals (Adsense)

Utrka za poboljšanjem Core Web Vitals nije laka. Postaje teže ako se za unovčavanje vaše web stranice oslanjate na program za oglašavanje kao što je Google AdSense.

Web stranice koje koriste Google AdSense imaju 10 puta veću vjerojatnost da će pasti na testu Core Web Vitals nego ista web stranica bez Google AdSensea. To je uglavnom zbog broja zahtjeva trećih strana i sredstava koje Google AdSense dodaje vašoj web stranici. Većina tih sredstava je neoptimizirana, velika i nije prilagođena korisniku.

Izvan AdSensea i platformi za oglašavanje, ako imate mnogo neoptimiziranih slika, JavaScripta i CSS-a, posebno na gornjoj polovici stranice, vrlo je vjerojatno da ćete pasti na testu Core Web Vitals.

Ako ste se mučili položiti test Core Web Vitals i poboljšati svoje mogućnosti rangiranja u tražilici, u ovom ćete članku pronaći praktična rješenja.

Što su Core Web Vitals?

Core Web Vitals su mjerni podaci koje pokreće Google Lighthouse koji određuju kako web mjesto pruža dobro iskustvo stranice. Iako postoje mnoge metrike prilikom izvođenja testa, najvažnije metrike su Largest Contentful Paint (LCP), First Input Delay (FID) i Kumulativni pomak izgleda (CLS).

Google je objavio da će od svibnja 2021. ove metrike postati dio njihovih signala za rangiranje koji se koriste za određivanje položaja web stranica u rezultatima pretraživanja.

Ukratko, možete reći da Core Web Vitals nije trebao biti teror za webmastere, već sredstvo za poboljšanje doživljaja web stranica.

Najveća sadržajna boja (LCP): LCP mjeri vrijeme koje je potrebno za učitavanje najveće vidljive slike ili bloka teksta na web stranici. Ako se najveći vidljivi tekst ili slika brzo učitava, smatra se da će se ostatak vaših slika i teksta brzo učitati. Potrebno vrijeme učitavanja za prolazak je 2.5 sekundi.

Kašnjenje prvog unosa (FID): FID mjeri interaktivnost web stranice. To se određuje prema tome koliko je vremena potrebno pregledniku da počne obrađivati ​​rukovatelje događajima nakon što je korisnik kliknuo na vašu stranicu. To se naširoko naziva prvim dojmom vaše web stranice. Potrebno vrijeme za prolaz je 100 milisekundi.

Kumulativni pomak izgleda (CLS): CLS mjeri pomak izgleda koji se događa na web stranici. Kada se web stranica učita, a onda se odjednom nešto pojavi ili nestane i stranica se mora prilagoditi da bude veća ili manja, taj pomak je ono što se mjeri. To je užasno za korisničko iskustvo i slažem se. Rezultat koji trebate položiti je 0.1.

Kako optimizirati svoju web stranicu za Core Web Vitals

Slijedite ove korake kako biste optimizirali svoje web mjesto:

1. Započnite s brzim web hostom

Ako imate web domaćina s užasnim vremenom odziva, svaka druga stvar koju ću ovdje navesti možda neće dati željene rezultate. Što brže vaš poslužitelj odgovori na zahtjeve, to bolje.

Zašto je važan web host s brzim vremenom do prvog bajta (TTFB)? Neki će tvrditi da TTFB nije bitan, ali jest. To je temelj svega ostalog. Ako imate korisnike u gradovima sa sporim internetom, sve će značiti koliko brzo vaš web host može odgovoriti. Svaki web host može dobro funkcionirati ako imate korisnike prvenstveno iz gradova sa superbrzim internetom.

Pokušajte testirati kako će vaš web host reagirati na 3G ili 2G umjesto 4G. Jer ako vam se mnogo korisnika povezuje putem 3G ili 2G, to se dodaje vašem rezultatu Core Web Vitals. Dakle, svaka milisekunda je važna. Razlika između dobivanja 100 ms u vašem FID-u i dobivanja 101 ms je u tome što sa 100 ms prolazite, ali sa 101 ms padate. Dakle, ako vam netko kaže da 1 ms nije važna, ta osoba možda jednostavno griješi.

Prilikom branja a web host, uvijek osigurajte približavanje podatkovnog centra većini korisnika vaše web stranice. Njihove lokacije možete pronaći gledajući svoju analitiku. Odakle dolazi većina vaših korisnika? Odaberite podatkovni centar bliže njima. Što bliže to bolje.

Osobno sam primijetio značajnu promjenu u Field Data of Core Web Vitals web stranice nakon promjene web hosta. Ništa drugo nisam radio.

Ako tražite brzog web-domaćina, postoji mnogo preporuka koje vode samo suradnici bez iskrenosti. Ako koristite WordPress i možete si ga priuštiti, toplo preporučujem Kinsta. Oni su najbolji za WordPress. Ako vam treba nešto jeftinije ili ne koristite WordPress onda Cloudways također je vrlo učinkovit.

2. Koristite laganu temu optimiziranu za brzinu

Ovaj je savjet osobito koristan onima koji ne kodiraju, pa čak i onima koji imaju manje vremena. Pogotovo ako koristite WordPress gdje postoji toliko mnogo opcija, pobrinite se da koristite laganu temu optimiziranu za brzinu.

Budući da je tema poput kostura vaše web stranice, ako je kostur slomljen, tijelo će biti slomljeno. To je samo to.

Postoji dugačak popis najboljih praksi koje biste trebali potražiti u temi. Neki od najčešćih loših postupaka su prevelika ovisnost o JQueryju, učitavanje previše CSS/JS kada nije potrebno, velika veličina teme i još mnogo toga. Uvijek možete koristiti alat poput Žuti laboratoriji, za testiranje demonstracije.

Ako koristite WordPress, možete provjeriti popis najbrže WordPress teme.

3. Optimizirajte svoje slike

Slike su super. Čine sadržaj tako privlačnim. Ali oni mogu biti teret ako nisu optimizirani. Velike slike poput 3 MB sigurno će utjecati na vašu brzinu. A ako su te slike vidljive kada se vaša stranica posjeti prije pomicanja, one će definitivno utjecati na vašu LCP metriku.

Istina je da neoptimizirane slike povećavaju veličinu vaše stranice. Što je stranica veća, to je dulje potrebno za učitavanje.

Osobno radije optimiziram svaku sliku prije učitavanja. Ne koristim nikakav vanjski servis za optimizaciju slike. Međutim, ako koristite WordPress ili sličan CMS, postoje dodaci i rješenja za automatsku optimizaciju slika. Postoje i rješenja u oblaku bez obzira na to što koristite.

4. Uklonite ili smanjite veličinu pozadinskih slika

Pozadinske slike obično su vrlo velike. I može usporiti vaše vrijeme učitavanja budući da se prvo mora učitati prije nego što se prikaže smisleni sadržaj.

Možete potpuno ukloniti pozadinsku sliku kako biste imali bržu web stranicu. Ako su toliko važni, razmislite o njihovoj optimizaciji na najmanju moguću veličinu ili korištenju uzoraka umjesto slika.

5. Koristite predmemoriju preglednika

Ako imate puno vjernih čitatelja, razmislite o predmemoriranju preglednika. Kada korisnik prvi put posjeti vašu web stranicu, preglednik će tu web stranicu spremiti u predmemoriju. Za svaki drugi posjet, učitat će se u trenu. To može znatno poboljšati FID i LCP od drugog posjeta naviše.

Korisnicima WordPressa većina dodataka za predmemoriju može pomoći u tome.

6. Smanjite JavaScript i odgodite neiskorišteni JavaScript

Iako je JavaScript nevjerojatan, često blokira iscrtavanje. To znači da može utjecati na vaše vrijeme učitavanja i konačno na vaš FID.

Pokušajte minimizirati JavaScript uklanjanjem razmaka i komentara kako biste smanjili veličinu datoteke. Također, osigurajte da odgodite nekritični JavaScript. Ovo bi trebalo poboljšati vaš FID.

Za korisnike WordPressa postoje dodaci poput Autoptimize, WP Rocketi drugi koji to mogu učiniti umjesto vas.

7. Postavite AdSense atribut veličine

Ako na svojoj web stranici koristite AdSense i borite se s CLS-om, ovo može riješiti sve vaše probleme. Uspjelo je za mene, a trebalo bi i za tebe.

Ako imate oglasnu jedinicu blizu zaglavlja koja je vidljiva kada korisnik posjeti, problem je taj što se oglas možda neće odmah učitati. Može se učitati nakon što je stranica već učitana, a kada se to dogodi, dolazi do pomaka u izgledu. To je vrlo uobičajeno za responzivne oglasne jedinice. Kad se to dogodi, nemoguće je proći CLS metriku.

Najbolji način da to riješite je da malo uredite svoj AdSense kôd. Bez brige, vrlo je legitimno. Samo navedite atribut veličine za oglas, posebno visinu. Nakon što to učinite, više nećete primjećivati ​​pomicanje izgleda kad god se oglas učitava.

Ispod je primjer responzivne oglasne jedinice koju sam upotrijebio na svom blogu odmah ispod zaglavlja. Zamijenio sam svoj ID izdavača i oglasno mjesto s XXXXXX. Primijetio sam da sam dodao atribut visine (min-visina: 300px). Onog trenutka kad sam to učinio, svi problemi s CLS-om nestali su zauvijek.

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

Time se rezervira ta veličina na stranici. Dakle, kad god se oglasi pojave, nema pomaka izgleda jer ste već postavili veličinu.

8. Postavite atribut veličine za svoje slike i druge medije

Baš kao i s oglasima, slike i drugi mediji mogu uzrokovati pomake izgleda kada se učitaju na vašu web stranicu. Možda samo nešto čitate, zatim se učita slika i odjednom dođe do pomaka izgleda, ono što ste čitali je izvan vidokruga i sve što vidite je nešto drugo ili ste čak kliknuli nešto drugo greškom.

Sve to možete izbjeći postavljanjem atributa veličine za svoje medijske datoteke. Vaša CLS metrika bit će sretna što jeste.

9. Lijeno učitavanje slika.

Možda ste vidjeli savjet na stranici PageSpeed ​​Insight za odgoditi slike izvan ekrana. Ono što jednostavno znači je lijeno učitavanje vaših slika.

Ono što lijeno učitavanje čini je smanjenje veličine stranice i također smanjenje vremena učitavanja vaše stranice kada je korisnik posjeti. Što je dobro za CWV metriku.

To će posebno pomoći u poboljšanju LCP-a.

10. Optimizirajte CSS smanjivanjem i generiranjem kritičnog CSS-a

CSS je ono zbog čega web stranica izgleda cool, ali velika CSS datoteka može biti veliki problem jer će odgoditi prikazivanje stranice korisniku.

Kada korisnik posjeti vašu web stranicu, preglednik će uobičajenim ponašanjem odgoditi prikazivanje vaše web stranice korisniku dok ne učita, raščlani i izvrši sav CSS koji je naveden u zaglavlju vaše web stranice. Ako imate veliku CSS datoteku, to može biti veliki problem. To će usporiti vašu stranicu.

Kritični CSS može pomoći učitavanjem samo onog CSS-a koji je neophodan za učitavanje stranice. Dok se ostatak CSS-a može učitati asinkrono.

Također može pomoći smanjivanje CSS-a uklanjanjem razmaka i komentara kako bi se smanjila veličina datoteke.

Možete također uklonite neiskorišteni CSS. Ako usluga koju koristite gura CSS koji se ne koriste, sigurno ih je ukloniti.

Ako koristite WordPress, postoje dodaci poput WP Rocket, LiteSpeed ​​Cache, FlyingPress i drugi koji vam mogu pomoći da to postignete.

11. Implementirajte AdSense pametno učitavanje

Ova metoda može gotovo u potpunosti eliminirati sve izazove ako je AdSense odgovoran za usporavanje vaše web stranice.

Ovdje se radi o učitavanju AdSensea na pametan način. AdSense se neće učitati sve dok korisnik ne poduzme radnju poput pomicanja ili klikanja. To će uvelike poboljšati vrijeme učitavanja i sve temeljne web vitale na koje utječe AdSense.

Postoje mnogi WordPress dodaci koji vam mogu pomoći u tome, WP Rocket i Flying Scripts su primjer. Ova metoda, koliko ja znam, ne krši Google AdSense pravila.

Bilješka: Iako ova metoda može poboljšati percipiranu brzinu i rezultate stranica, može utjecati na vaš AdSense prihod. Preporučujem da provedete eksperiment kako biste bili sigurni isplati li se

12. Koristite font System Stack ako možete

Fontovi dodaju dodatno vrijeme učitavanja na bilo kojoj web stranici. A za web stranice bez slika, vaš tekstualni blok može biti odgovoran za vašu LCP ocjenu. U tom će slučaju na vaš LCP rezultat izravno utjecati vaš font.

Dok se Google Font i Font Awesome nastavljaju poboljšavati, upotreba fonta sistemskog skupa nudi značajno poboljšanje. Iako ne tako fantastično ovisno o uređaju.

13. Koristite CDN

Ako imate korisnike iz različitih dijelova svijeta, tada korištenje CDN-a može pomoći u poboljšanju vaše brzine i neizravno mjernih podataka Core Web Vitals.

CDN u jednostavnom objašnjenju izrađuje mnogo kopija vaše web stranice i pohranjuje ih u različitim točkama prisutnosti (POP) u različitim dijelovima svijeta. Kada netko zatraži vašu web stranicu, on poslužuje vašu web stranicu s najbliže lokacije.

Na primjer, ako je vaša web-lokacija hostirana u Sjedinjenim Državama i imate posjetitelja iz Ujedinjenog Kraljevstva, umjesto dohvaćanja vaše web-lokacije iz Sjedinjenih Država, CDN će posluživati ​​vašu web-lokaciju iz Ujedinjenog Kraljevstva. Učinak toga bit će brza isporuka. Ubrzati.

Možete provjeriti najbolji CDN-ovi Tamo vani.

14. Postavite DNS prethodno dohvaćanje

Ako se oslanjate na vanjsku uslugu kao što je CDN za isporuku svoje web stranice, možda ćete morati postaviti DNS prethodno dohvaćanje kako biste smanjili kašnjenje zbog DNS pretraživanja.

DNS prethodno dohvaćanje će unaprijed dohvatiti DNS prije nego što se pozove. Tako da se učitava u trenu kada se konačno pozove.

15. Optimizirajte skripte trećih strana

Provjerite da neke od usluga koje koristite na svojoj web stranici ne dodaju skripte trećih strana koje mogu usporiti vaše web stranice.

Rješenje sa zahtjevima trećih strana koji usporavaju vašu stranicu možete zamijeniti boljim rješenjem.

Kad je u pitanju Google AdSense, još jedna skripta treće strane, malo toga možete učiniti. Najbolja praksa je koristiti najviše 3 oglasa združena na stranici. Izbjegavajte podudarni sadržaj jer donosi nizak prihod, ali povećava vrijeme učitavanja.

16. Uklonite AdSense s gornje strane

Ovaj se savjet temelji na eksperimentima. Ako su sve vaše metrike dobre u izvješću Search Console osim LCP-a, prvo provjerite jesu li vaše slike i fontovi optimizirani. Ako su optimizirani, a vi još uvijek ne uspijevate proći LCP, AdSense bi mogao biti odgovoran.

Ako si to možete priuštiti, uklonite AdSense s gornje strane na mjesec dana i pogledajte hoće li problem nestati.

Ako ga ne želite ukloniti, možete ga odgoditi ručno ili uz pomoć dodatka poput Flying Scripts.

17. Prebacite se na AMP

AMP znači Accelerated Mobile Pages. Ideja AMP-a je optimizirati web stranice za brže učitavanje na mobitelu. I naravno, AMP open source projekt je pokrenuo Google.

Dok je AMP izvorno bio namijenjen za ubrzavanje mobilnih stranica, može ubrzati i stranice za stolna računala.

AMP stranice su dosljedno brže od mobilnih ili stolnih stranica, ponekad i preko 100% prema našem opažanju.

Ako je jedina strategija monetizacije vaše web stranice Google AdSense, razmislite o prebacivanju cijele svoje web stranice na AMP. Osobno sam primijetio da na blogu koji posjedujem AdSense na AMP stranicama ponekad ostvaruje više konverzija nego na mobilnim uređajima i stolnim računalima!

Zaključak

Core Web vitals može vam pomoći da poboljšate svoju web stranicu za svoje korisnike, a ne samo za Google. Vrlo je uobičajeno imati dobar rezultat testa laboratorijskih podataka, ali loš rezultat terenskih podataka.

To je zbog sastava vaših korisnika. Ako je većina vaših korisnika iz mjesta sa sporim internetom, možda ste obavili dobar posao optimizacije, ali još uvijek niste uspjeli u terenskim podacima.