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 objavil da bodo od maja 2021 te meritve postale del njihovih signalov za razvrščanje, 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čja vsebinska barva (LCP): LCP meri čas, ki je potreben, da se naloži največja vidna slika ali blok besedila na spletni strani. Če se največje vidno besedilo ali slika naloži hitro, je zaznano, da se bodo ostale slike in besedilo naložili hitro. Potreben čas nalaganja za prehod je 2.5 sekund.

Prva zamuda vnosa (FID): FID meri interaktivnost spletne strani. To je odvisno od tega, koliko časa traja, da brskalnik začne obdelovati obdelovalce dogodkov, potem ko uporabnik klikne na vaše spletno mesto. To se pogosto imenuje prvi vtis o vašem spletnem mestu. Potreben čas za prehod 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 in se mora stran prilagoditi, da bo večja ali manjša, se ta premik meri. Za uporabniško izkušnjo je grozno in se strinjam. Rezultat, ki bi ga 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 nabiranju a spletni strežnik, vedno zagotovite, da boste podatkovno središče približali večini uporabnikov vašega spletnega mesta. Njihove lokacije lahko najdete tako, da pogledate svojo analitiko. Od kod prihaja večina vaših uporabnikov? Izberite podatkovno središče, ki jim je bližje. Bližje, bolje je.

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 gostitelja, obstaja veliko priporočil, ki jih vodijo izključno podružnice brez iskrenosti. Če uporabljate WordPress in si ga lahko privoščite, toplo priporočam Kinsta. So najboljši za WordPress. Če potrebujete nekaj cenejšega ali pa ne uporabljate WordPressa Oblaki je tudi zelo učinkovito.

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 bi jih morali iskati v temi. Nekatere najpogostejše slabe prakse so prevelika odvisnost od JQueryja, nalaganje preveč CSS/JS, ko ni potrebno, velika velikost teme in drugo. Vedno lahko uporabite orodje, kot je Rumeni laboratoriji, da preizkusite demo.

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

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 je Autoptimize, WP Rocketin 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 videli nasvet v PageSpeed ​​Insight za odloži slike zunaj zaslona. To preprosto pomeni leno nalaganje slik.

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.

Lahko tudi odstranite neuporabljen CSS. Če storitev, ki jo uporabljate, potiska CSS, ki se ne uporabljajo, jih je varno odstraniti.

Če uporabljate WordPress, obstajajo vtičniki, kot je WP Rocket, LiteSpeed ​​Cache, FlyingPress in drugi, ki vam lahko pomagajo doseči to.

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.

Obstaja veliko vtičnikov WordPress, ki vam lahko pomagajo pri tem, WP Rocket in Flying Scripts sta primer. Ta metoda, kolikor vem, ne krši pravilnika Google AdSense.

Opomba: Čeprav lahko ta metoda pomaga izboljšati zaznano hitrost in rezultate strani, lahko vpliva na vaš prihodek AdSense. Priporočam, da izvedete poskus, da se prepričate, ali je vredno

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.

Lahko preverite najboljši CDN-ji tam zunaj.

14. Nastavite vnaprejšnje pridobivanje DNS

Če se za dostavo svojega spletnega mesta zanašate na zunanjo storitev, kot je CDN, boste morda morali nastavite vnaprejšnje pridobivanje DNS za zmanjšanje zamude zaradi iskanja DNS.

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. Ideja AMP je optimizirati spletne strani za hitrejše nalaganje na mobilnih napravah. In seveda AMP open source projekt je 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.