Kako optimizirati svoje spletno mesto za Core Web Vitals (Adsense)

Tekma za izboljšanje Core Web Vitals ni lahka. Težje postane, če se za monetizacijo spletnega mesta zanašate na oglaševalski program, kot je Google AdSense.

Spletna mesta, ki izvajajo Google AdSense, imajo 10-krat večjo verjetnost, da bodo padla na testu Core Web Vitals kot isto spletno mesto brez Google AdSense. To je predvsem posledica števila zahtev tretjih oseb in sredstev, ki jih Google AdSense doda vašemu spletnemu mestu. Večina teh sredstev je neoptimiziranih, velikih in uporabniku neprijaznih.

Zunaj AdSense in oglaševalskih platform, če imate veliko neoptimiziranih slik, JavaScripta in CSS, zlasti na pregibu, je zelo verjetno, da boste padli na testu Core Web Vitals.

Če ste se trudili opraviti test Core Web Vitals in izboljšati svoje možnosti za uvrstitev v iskalnikih, boste v tem članku našli praktične rešitve.

Kaj so Core Web Vitals?

Core Web Vitals so meritve, ki jih poganja Google Lighthouse in določajo, kako spletno mesto zagotavlja dobro izkušnjo strani. Medtem ko je pri izvajanju preizkusa na voljo veliko meritev, so najpomembnejše meritve Largest Contentful Paint (LCP), First Input Delay (FID) in Cumulative Layout Shift (CLS).

Google je napovedal , da bodo te metrike od maja 2021 postale del njihovih signalov za uvrstitev, ki se uporabljajo za določanje položajev spletnih strani v rezultatih iskanja.

Če povzamemo, lahko rečemo, da Core Web Vitals ni bil mišljen kot groza za spletne skrbnike, temveč kot sredstvo za izboljšanje izkušnje strani na spletnih mestih.

Največje prikazovanje vsebine (LCP) : LCP meri čas, ki je potreben za nalaganje največje vidne slike ali besedilnega bloka na spletni strani. Če se največje vidno besedilo ali slika naloži hitro, se zazna, da se bodo tudi preostale slike in besedilo naložile hitro. Zahtevani čas nalaganja je 2.5 sekunde.

Zakasnitev prvega vnosa (FID) : FID meri interaktivnost spletne strani. To je določeno s tem, koliko časa potrebuje brskalnik, da začne obdelovati obdelovalce dogodkov, potem ko uporabnik klikne na vaše spletno mesto. To se na splošno imenuje prvi vtis vašega spletnega mesta. Zahtevani čas je 100 milisekund.

Kumulativni premik postavitve (CLS) : CLS meri premik postavitve, ki se zgodi na spletni strani. Ko se spletna stran naloži in se nato nenadoma nekaj pojavi ali izgine ter se mora stran prilagoditi, da postane večja ali manjša, se meri ta premik. To je grozno za uporabniško izkušnjo in strinjam se. Ocena, ki bi jo morali doseči, je 0.1.

Kako optimizirati svoje spletno mesto za Core Web Vitals

Za optimizacijo spletnega mesta sledite tem korakom:

1. Začnite s hitrim spletnim gostiteljem

Če imate spletnega gostitelja s strašnim odzivnim časom, potem vse druge stvari, ki jih bom navedel tukaj, morda ne bodo dale želenih rezultatov. Hitreje kot se vaš strežnik odziva na zahteve, tem bolje.

Zakaj je spletni gostitelj s hitrim časom do prvega bajta (TTFB) pomemben? Nekateri bodo trdili, da TTFB ni pomemben, vendar je. To je temelj vsega drugega. Če imate uporabnike v mestih s počasnim internetom, bo vse pomembno, kako hitro se lahko odzove vaš spletni gostitelj. Vsak spletni gostitelj lahko deluje dobro, če imate uporabnike predvsem iz mest s super hitrim internetom.

Poskusite preizkusiti, kako se bo vaš spletni gostitelj odzval na 3G ali 2G namesto na 4G. Kajti če se veliko uporabnikov poveže prek 3G ali 2G, se to prišteje k vašemu rezultatu Core Web Vitals. Torej vsaka milisekunda šteje. Razlika med pridobitvijo 100 ms v vašem FID in pridobitvijo 101 ms je v tem, da s 100 ms opravite, s 101 ms pa ne. Torej, če vam nekdo reče, da 1 ms ni pomembna, se morda moti.

Pri izbiri spletnega gostovanja vedno poskrbite, da bo podatkovni center bližje večini uporabnikov vašega spletnega mesta. Njihove lokacije lahko najdete z analizo. Od kod prihaja večina vaših uporabnikov? Izberite podatkovni center, ki jim je bližje. Bližje kot je, tem bolje.

Osebno sem opazil pomembno spremembo v podatkih polja osnovnih spletnih kazalcev spletnega mesta po zamenjavi spletnega gostitelja. Nič drugega nisem naredil.

Če iščete hitrega spletnega gostovanja, obstaja veliko priporočil, ki jih vodijo zgolj partnerji brez iskrenosti. Če uporabljate WordPress in si ga lahko privoščite, vam toplo priporočam Kinsta . So najboljši za WordPress. Če potrebujete nekaj cenejšega ali ne uporabljate WordPressa, je Cloudways prav tako zelo učinkovit.

2. Uporabite lahko temo, optimizirano za hitrost

Ta nasvet je še posebej koristen za nekoderje in celo za kodirje z manj časa. Še posebej, če uporabljate WordPress, kjer je toliko možnosti, se prepričajte, da uporabljate lahko temo, optimizirano za hitrost.

Ker je tema kot okostje vašega spletnega mesta, bo zlomljeno telo, če je okostje zlomljeno. To je samo to.

Obstaja dolg seznam najboljših praks, ki jih morate iskati pri izbiri teme. Nekatere najpogostejše slabe prakse so pretirana odvisnost od JQueryja, nalaganje preveč CSS/JS-ja, ko ni potreben, velika velikost teme in drugo. Za preizkus predstavitve lahko vedno uporabite orodje, kot je Yellow labs .

Če uporabljate WordPress, si lahko ogledate seznam najhitrejših WordPress tem.

3. Optimizirajte slike

Slike so kul. Zaradi njih je vsebina tako privlačna. Lahko pa so breme, če so neoptimizirani. Velike slike, kot je 3 MB, bodo zagotovo vplivale na vašo hitrost. In če so te slike vidne, ko se vaše spletno mesto obišče pred drsenjem, bodo zagotovo vplivale na vašo meritev LCP.

Resnica je, da neoptimizirane slike povečajo velikost vaše strani. Večja kot je stran, dlje traja nalaganje.

Osebno raje optimiziram vsako sliko, preden jo naložim. Za optimizacijo slike ne uporabljam nobene zunanje storitve. Če pa uporabljate WordPress ali podoben CMS, obstajajo vtičniki in rešitve za samodejno optimizacijo slik. Obstajajo tudi rešitve v oblaku, ne glede na to, kaj uporabljate.

4. Odstranite ali zmanjšajte velikost slik ozadja

Slike ozadja so običajno zelo velike. Poleg tega lahko upočasni vaš čas nalaganja, saj ga je treba najprej naložiti, preden se prikaže smiselna vsebina.

Za hitrejše spletno mesto lahko popolnoma odstranite sliko ozadja. Če so tako pomembni, razmislite o njihovi optimizaciji na najmanjšo možno velikost ali o uporabi vzorcev namesto slik.

5. Uporabite predpomnjenje brskalnika

Če imate veliko zvestih bralcev, razmislite o predpomnjenju brskalnika. Ko uporabnik prvič obišče vaše spletno mesto, bo brskalnik to spletno mesto shranil v predpomnilnik. Za vsak drugi obisk se bo naložil v trenutku. To lahko močno izboljša FID in LCP od drugega obiska naprej.

Za uporabnike WordPressa lahko večina vtičnikov za predpomnjenje to pomaga doseči.

6. Zmanjšajte JavaScript in odložite neuporabljen JavaScript

Čeprav je JavaScript neverjeten, pogosto blokira upodabljanje. To pomeni, da lahko vpliva na vaš čas nalaganja in končno na vaš FID.

Poskusite zmanjšati JavaScript tako, da odstranite presledke in komentarje, da zmanjšate velikost datoteke. Zagotovite tudi, da odložite nekritični JavaScript. To bi moralo izboljšati vaš FID.

Za uporabnike WordPressa obstajajo vtičniki, kot so Autoptimize , WP Rocket in drugi, ki lahko to storijo namesto vas.

7. Nastavite atribut velikosti AdSense

Če na svojem spletnem mestu uporabljate AdSense in imate težave s CLS, lahko to reši vse vaše težave. Meni je uspelo in moralo bi tudi tebi.

Če imate oglasno enoto blizu glave, ki je vidna, ko uporabnik obišče, je ena težava ta, da se oglas morda ne bo naložil takoj. Lahko se naloži, ko je stran že naložena, in ko se naloži, pride do premika v postavitvi. To je zelo pogosto za odzivne oglasne enote. Če se to zgodi, je nemogoče opraviti meritev CLS.

Najboljši način za to je, da nekoliko uredite kodo AdSense. Brez skrbi, to je zelo legitimno. Samo določite atribut velikosti za oglas, zlasti višino. Ko to storite, ne boste več opazili premika postavitve, ko se oglas nalaga.

Spodaj je primer odzivne oglasne enote, ki sem jo uporabil na svojem blogu tik pod glavo. ID založnika in oglasno mesto sem zamenjal z XXXXXX. Opazil sem, da sem dodal atribut višine (min-height: 300px). V trenutku, ko sem to storil, so vse težave s CLS za vedno izginile.

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

To naredi to, da rezervira to velikost na strani. Torej, kadar koli se prikažejo oglasi, ni premikanja postavitve, saj ste že nastavili velikost.

8. Nastavite atribut velikosti za vaše slike in druge medije

Tako kot pri oglasih lahko slike in drugi mediji povzročijo premik postavitve, ko se naložijo na vaše spletno mesto. Morda samo nekaj berete, nato se slika naloži in nenadoma pride do premika postavitve, tisto, kar ste brali, ni vidno in vse, kar vidite, je nekaj drugega ali celo pomotoma kliknete nekaj drugega.

Vsem tem se lahko izognete tako, da nastavite atribut velikosti za predstavnostne datoteke. Vaša metrika CLS bo vesela.

9. Leno nalaganje slik.

Morda ste na PageSpeed ​​Insightu videli nasvet, da odložite nalaganje slik zunaj zaslona . To preprosto pomeni, da slike nalagate počasi.

Leno nalaganje zmanjša velikost strani in skrajša čas nalaganja vaše strani, ko jo uporabnik obišče. Kar je dobro za meritve CWV.

To bo zlasti pomagalo izboljšati LCP.

10. Optimizirajte CSS z zmanjševanjem in generiranjem kritičnega CSS

CSS je tisto, zaradi česar je spletno mesto videti kul, vendar je velika datoteka CSS lahko velika težava, saj bo uporabniku zakasnila upodabljanje strani.

Ko uporabnik obišče vaše spletno mesto, bo brskalnik po običajnem vedenju odložil upodabljanje vaše spletne strani uporabniku, dokler ne naloži, razčleni in izvede vseh CSS, ki so navedeni v glavi vaše spletne strani. Če imate veliko datoteko CSS, je to lahko velika težava. To bo upočasnilo vaše spletno mesto.

Kritični CSS lahko pomaga tako, da naloži samo tisti CSS, ki je potreben za nalaganje strani. Medtem ko je preostali del CSS mogoče naložiti asinhrono.

Pomaga lahko tudi zmanjšanje vašega CSS z odstranjevanjem presledkov in komentarjev za zmanjšanje velikosti datoteke.

Odstranite lahko tudi neuporabljene kode CSS . Če storitev, ki jo uporabljate, nalaga kode CSS, ki niso uporabljene, jih lahko varno odstranite.

Če uporabljate WordPress, so na voljo vtičniki, kot so WP Rocket , LiteSpeed ​​Cache, FlyingPress in drugi, ki vam lahko pri tem pomagajo.

11. Implementirajte pametno nalaganje AdSense

Ta metoda lahko skoraj popolnoma odpravi vse izzive, če je AdSense odgovoren za upočasnitev vašega spletnega mesta.

Gre za nalaganje AdSense na pameten način. AdSense se ne bo naložil, dokler uporabnik ne izvede dejanja, kot je drsenje ali klik. To bo močno izboljšalo čas nalaganja in morebitne osnovne spletne dejavnike, na katere vpliva AdSense.

Pri tem vam lahko pomaga veliko vtičnikov za WordPress, na primer WP Rocket in Flying Scripts. Kolikor vem, ta metoda ne krši pravilnika Google AdSense.

Opomba: Čeprav lahko ta metoda pomaga izboljšati zaznano hitrost in število točk strani, lahko vpliva na vaše prihodke od AdSense. Priporočam, da izvedete poskus, da se prepričate, ali se splača

12. Če lahko, uporabite pisavo System Stack

Pisave dodajo dodaten čas nalaganja na katerem koli spletnem mestu. In pri spletnih straneh brez slik je vaš blok besedila morda odgovoren za vašo oceno LCP. V tem primeru bo na vaš rezultat LCP neposredno vplivala vaša pisava.

Medtem ko se Google Font in Font Awesome še naprej izboljšujeta, ponuja uporaba pisave sistemskega sklada znatno izboljšavo. Čeprav ni tako domišljijsko, odvisno od naprave.

13. Uporabite CDN

Če imate uporabnike iz različnih delov sveta, potem lahko uporaba CDN pomaga izboljšati vašo hitrost in posredno vaše meritve Core Web Vitals.

CDN v preprosti razlagi naredi veliko kopij vašega spletnega mesta in jih shrani v različnih točkah prisotnosti (POP) na različnih koncih sveta. Ko nekdo zahteva vaše spletno mesto, ga streže z najbližje lokacije.

Na primer, če vaše spletno mesto gostuje v Združenih državah in imate obiskovalca iz Združenega kraljestva, bo CDN vaše spletno mesto stregel iz Združenega kraljestva, namesto da bi pridobil vaše spletno mesto iz Združenih držav. Učinek tega bo hitra dostava. Hitrost.

Ogledate si lahko najboljše CDN-je, ki so na voljo.

14. Nastavite vnaprejšnje pridobivanje DNS

Če se za dostavo spletnega mesta zanašate na zunanjo storitev, kot je CDN, boste morda morali nastaviti predhodno pridobivanje DNS-a , da zmanjšate zamudo zaradi iskanja DNS-a.

Vnaprejšnje pridobivanje DNS bo vnaprej preneslo DNS, preden se pokliče. Tako, da se naloži v trenutku, ko je končno priklicana.

15. Optimizirajte skripte tretjih oseb

Preverite, ali nekatere storitve, ki jih uporabljate na svojem spletnem mestu, ne dodajajo skriptov tretjih oseb, ki bi lahko upočasnili vaša spletna mesta.

Rešitev z zahtevami tretjih oseb, ki upočasnijo vaše spletno mesto, lahko zamenjate z boljšo rešitvijo.

Ko gre za Google AdSense, še en skript tretje osebe, lahko storite malo. Najboljša praksa je, da uporabite največ 3 oglase, združene na strani. Izogibajte se ujemajoči se vsebini, saj prinaša nizek dohodek, vendar povečuje čas nalaganja.

16. Odstranite AdSense na vrhu strani

Ta nasvet temelji na poskusih. Če so vse vaše meritve v poročilu iskalne konzole dobre, razen LCP, se najprej prepričajte, da so vaše slike in pisave optimizirane. Če so optimizirani in vam še vedno ne uspe LCP, je morda odgovoren AdSense.

Če si lahko privoščite, odstranite AdSense na vrhu strani za en mesec in preverite, ali bo težava izginila.

Če ga ne želite odstraniti, ga lahko odložite ročno ali s pomočjo vtičnika, kot je Flying Scripts.

17. Preklopite na AMP

AMP pomeni Pospešene mobilne strani (Accelerated Mobile Pages). Ideja AMP je optimizirati spletne strani za hitrejše nalaganje na mobilnih napravah. In seveda je projekt odprte kode AMP začel Google.

Medtem ko je bil AMP prvotno namenjen pospeševanju mobilnih strani, lahko pospeši tudi namizne strani.

Strani AMP so dosledno hitrejše od mobilnih ali namiznih strani, po naših opažanjih včasih za več kot 100 %.

Če je edina strategija monetizacije vašega spletnega mesta Google AdSense, lahko razmislite o preklopu celotnega spletnega mesta na AMP. Osebno sem opazil, da na spletnem dnevniku, ki ga imam, AdSense na straneh AMP včasih pretvori več kot na mobilnih in namiznih napravah!

zaključek

Core Web vitals vam lahko pomaga izboljšati spletno mesto za vaše uporabnike in ne le za Google. Zelo običajno je, da imate dober rezultat laboratorijskih podatkov, vendar slab rezultat terenskih podatkov.

To je posledica sestave vaših uporabnikov. Če je večina vaših uporabnikov iz krajev s počasnim internetom, ste morda dobro opravili optimizacijo, vendar še vedno niste uspeli pri podatkih na terenu.