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 najavio da će od svibnja 2021. ove metrike postati dio njihovih signala rangiranja koji se koriste za određivanje pozicija 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će iscrtavanje sadržaja (LCP) : LCP mjeri vrijeme potrebno za učitavanje najveće vidljive slike ili bloka teksta na web stranici. Ako se najveći vidljivi tekst ili slika brzo učitavaju, smatra se da će se i ostatak slika i teksta brzo učitati. Potrebno vrijeme učitavanja je 2.5 sekunde.

Kašnjenje prvog unosa (FID) : FID mjeri interaktivnost web stranice. To se određuje koliko je vremena potrebno pregledniku da počne obrađivati ​​​​rukovatelje događajima nakon što korisnik klikne na vašu stranicu. To se općenito naziva prvim dojmom vaše web stranice. Potrebno vrijeme 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 zatim se odjednom nešto pojavi ili nestane te se stranica mora prilagoditi da bude veća ili manja, taj se pomak mjeri. To je užasno za korisničko iskustvo i slažem se. Rezultat koji biste trebali proći 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 odabira web hostinga , uvijek pazite da podatkovni centar bude bliže većini korisnika vaše web stranice. Njihove lokacije možete pronaći pregledom analitike. 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 hostinga, postoji mnogo preporuka koje su isključivo vođene od strane afilijata 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 je Cloudways također 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 dugi popis najboljih praksi koje biste trebali tražiti u temi. Neke od najčešćih loših praksi su prevelika ovisnost o JQueryju, učitavanje previše CSS/JS-a kada nije potrebno, velika veličina teme i drugo. Uvijek možete koristiti alat poput Yellow Labsa za testiranje demo verzije.

Ako koristite WordPress, možete pogledati popis najbržih WordPress tema.

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 Rocket i 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 na PageSpeed ​​Insightu vidjeli savjet o odgađanju slika izvan ekrana . To jednostavno znači odgođeno učitavanje 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.

Također možete ukloniti nekorišteni CSS . Ako usluga koju koristite nudi CSS koji se ne koristi, sigurno ga je ukloniti.

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

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.

Postoji mnogo WordPress dodataka koji vam mogu pomoći u tome, WP Rocket i Flying Scripts su primjeri. Koliko ja znam, ova metoda ne krši pravila Google AdSensea.

Napomena: Iako ova metoda može pomoći u poboljšanju percipirane brzine i rezultata stranice, mogla bi utjecati na vaš prihod od AdSensea. 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 pogledati najbolje CDN- ove koji su dostupni.

14. Postavite DNS prethodno dohvaćanje

Ako se za isporuku web stranice oslanjate na vanjsku uslugu poput CDN-a, možda ćete morati postaviti DNS preddohvać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 Ubrzane mobilne stranice (Accelerated Mobile Pages). Ideja AMP-a je optimizirati web stranice kako bi se brže učitavale na mobilnim uređajima. I naravno, projekt otvorenog koda AMP-a pokrenuo je 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.