Kuidas optimeerida oma veebisaiti Core Web Vitalsi (Adsense) jaoks

Võidujooks Core Web Vitals'i parandamiseks ei ole lihtne. See muutub raskemaks, kui kasutate oma veebisaidi raha teenimiseks reklaamiprogrammi nagu Google AdSense.

Google AdSense'i kasutavatel veebisaitidel on 10 korda suurem tõenäosus Core Web Vitalsi testi läbikukkumiseks kui samal veebisaidil, millel pole Google AdSense'i. See on peamiselt tingitud kolmandate osapoolte päringute ja varade arvust, mille Google AdSense teie veebisaidile lisab. Enamik neist varadest on optimeerimata, suured ja mittekasutajasõbralikud.

Kui teil on väljaspool AdSense'i ja reklaamiplatvorme palju optimeerimata pilte, JavaScripti ja CSS-i, eriti lehe ülaosas, siis on suur tõenäosus ka Core Web Vitalsi testis läbi kukkuda.

Kui teil on olnud raskusi Core Web Vitalsi testi läbimisega ja oma otsingumootori asetuse parandamisega, leiate sellest artiklist praktilisi lahendusi.

Mis on Core Web Vitals?

Core Web Vitals on Google Lighthouse'i toel olevad mõõdikud, mis määravad, kuidas sait pakub head lehekogemust. Kuigi testi läbiviimisel on palju mõõdikuid, on kõige olulisemad mõõdikud suurima sisuga värvimine (LCP), esimese sisendi viivitus (FID) ja kumulatiivne paigutuse nihe (CLS).

Google on teatanud et alates 2021. aasta maist saavad need mõõdikud osaks nende asetussignaalidest, mida kasutatakse veebilehtede positsioonide määramiseks otsingutulemustes.

Kokkuvõttes võib öelda, et Core Web Vitals ei olnud mõeldud veebihalduritele hirmuks, vaid vahendiks veebisaitide lehekogemuse parandamiseks.

Suurim sisukas värv (LCP): LCP mõõdab aega, mis kulub veebilehe suurima nähtava pildi või tekstiploki laadimiseks. Kui suurim nähtav tekst või pilt laaditakse kiiresti, siis tajutakse, et ülejäänud pildid ja tekst laaditakse kiiresti. Läbimiseks vajalik laadimisaeg on 2.5 sekundit.

Esimese sisendi viivitus (FID): FID mõõdab veebilehtede interaktiivsust. See määratakse kindlaks selle järgi, kui kaua kulub brauseril sündmuste töötlejate töötlemise alustamiseks pärast seda, kui kasutaja on teie saidil klõpsanud. Seda nimetatakse laialdaselt teie veebisaidi esmamuljeks. Läbimiseks nõutav aeg on 100 millisekundid.

Kumulatiivne paigutuse nihe (CLS): CLS mõõdab veebilehel toimuvat paigutuse nihet. Kui veebileht laadib ja siis äkki midagi ilmub või kaob ja leht peab kohanema suurema või väiksemana, siis seda nihet mõõdetakse. See on kasutajakogemuse jaoks kohutav ja nõustun. Skoor, mille peate läbima, on 0.1.

Kuidas optimeerida oma veebisaiti Core Web Vitalsi jaoks

Veebisaidi optimeerimiseks järgige neid samme.

1. Alustage kiire veebihostiga

Kui teil on kohutava reageerimisajaga veebimajutaja, ei pruugi kõik muud siin loetletud asjad soovitud tulemusi anda. Mida kiiremini teie server päringutele vastab, seda parem.

Miks on kiire aja esimese baitini (TTFB) veebimajutus oluline? Mõned väidavad, et TTFB pole oluline, kuid see on oluline. See on kõige muu alus. Kui teil on kasutajaid aeglase Interneti-ühendusega linnades, tähendab see, kui kiiresti teie veebimajutaja reageerib. Iga veebimajutaja toimib hästi, kui teil on kasutajaid peamiselt ülikiire Internetiga linnadest.

Proovige testida, kuidas teie veebimajutaja reageerib 3G asemel 2G-le või 4G-le. Sest kui palju kasutajaid loob ühenduse 3G või 2G kaudu, liidab see teie Core Web Vitalsi skoori. Niisiis, iga millisekund loeb. FID 100 ms ja 101 ms erinevus seisneb selles, et 100 ms puhul saate läbi, aga 101 ms puhul ebaõnnestute. Seega, kui keegi ütleb teile, et 1 ms ei oma tähtsust, võib see inimene lihtsalt eksida.

Valides a veebi, tagage alati, et andmekeskus läheks enamikule teie veebisaidi kasutajatele. Nende asukoha leiate oma analüütikat vaadates. Kust enamik teie kasutajaid pärit on? Valige neile lähemal asuv andmekeskus. Mida lähemal, seda parem.

Olen isiklikult märganud olulist muutust veebisaidi Core Web Vitalsi väljaandmetes pärast veebimajutaja vahetamist. Ma ei teinud muud.

Kui otsite kiiret veebimajutajat, on seal palju soovitusi, mis on ajendatud puhtalt sidusettevõtetest ilma siiruseta. Kui kasutate WordPressi ja saate seda endale lubada, soovitan soojalt Kinsta. Need on WordPressi jaoks parimad. Kui vajate midagi odavamat või te ei kasuta WordPressi, siis Cloudways on ka väga tõhus.

2. Kasutage kerget ja kiirusele optimeeritud teemat

See näpunäide on eriti kasulik mittekodeerijatele ja isegi vähema ajaga kodeerijatele. Eriti kui kasutate WordPressi, kus on nii palju võimalusi, veenduge, et kasutate kerget ja kiirusele optimeeritud teemat.

Kuna teema on nagu teie veebisaidi skelett, siis kui luustik on katki, puruneb keha. See on just see.

Seal on pikk nimekiri parimatest tavadest, mida peaksite teema juures otsima. Mõned levinumad halvad tavad on ülemäära sõltuvad JQueryst, laadides liiga palju CSS-i/JS-e, kui neid pole vaja, suur teema suurus ja palju muud. Võite alati kasutada mõnda tööriista nagu Kollased laborid, demo testimiseks.

Kui kasutate WordPressi, saate vaadata nende loendit kiireimad WordPressi teemad.

3. Optimeerige oma pilte

Pildid on lahedad. Need muudavad sisu nii ahvatlevaks. Kuid need võivad olla koormaks, kui need pole optimeeritud. Suurte piltide (nt 3 MB) olemasolu mõjutab kindlasti teie kiirust. Ja kui need pildid on nähtavad, kui teie saiti enne kerimist külastate, mõjutavad need kindlasti teie LCP mõõdikut.

Tõde on see, et optimeerimata pildid suurendavad teie lehe suurust. Mida suurem on lehe suurus, seda kauem võtab selle laadimine aega.

Mina isiklikult eelistan iga pildi optimeerimist enne nende üleslaadimist. Ma ei kasuta pildi optimeerimiseks ühtegi välist teenust. Kui aga kasutate WordPressi või sarnast CMS-i, on piltide automaatseks optimeerimiseks olemas pluginad ja lahendused. Olenemata sellest, mida kasutate, on olemas ka pilvelahendused.

4. Eemaldage taustpildid või vähendage nende suurust

Taustapildid on tavaliselt väga suured. Ja see võib teie laadimisaega aeglustada, kuna see tuleb enne sisulise sisu kuvamist esmalt laadida.

Kiirema veebisaidi saamiseks saate taustpildi täielikult eemaldada. Kui need on nii olulised, siis kaaluge nende optimeerimist võimalikult väikese suuruseni või piltide asemel mustrite kasutamist.

5. Kasutage brauseri vahemällu

Kui teil on palju lojaalseid lugejaid, peaksite kaaluma brauseri vahemällu salvestamist. Kui kasutaja külastab teie veebisaiti esimest korda, salvestab brauser selle veebisaidi vahemällu. Iga teise külastuse korral laaditakse see hetkega. See võib oluliselt parandada FID-i ja LCP-d alates teisest külastusest ülespoole.

WordPressi kasutajatel aitab enamik vahemällu salvestamise pistikprogramme seda saavutada.

6. Minimeerige JavaScript ja lükake kasutamata JavaScript edasi

Kuigi JavaScript on hämmastav, blokeerib see sageli renderdust. See tähendab, et see võib mõjutada teie laadimisaega ja lõpuks ka teie FID-i.

Proovige JavaScripti minimeerida, eemaldades faili suuruse vähendamiseks tühikud ja kommentaarid. Samuti veenduge, et lükkate mittekriitilise JavaScripti edasi. See peaks teie FID-i parandama.

WordPressi kasutajate jaoks on olemas pistikprogrammid nagu Autoptimize, WP raketija teised, kes saavad seda teie eest teha.

7. Määrake AdSense'i suuruse atribuut

Kui kasutate oma veebisaidil AdSense'i ja teil on probleeme CLS-iga, võib see kõik teie probleemid lahendada. See tegi mulle ja peaks teie jaoks.

Kui teil on päise lähedal reklaamiüksus, mis on nähtav, kui kasutaja seda külastab, on üheks probleemiks see, et reklaam ei pruugi kohe laadida. See võib laadida pärast seda, kui leht on juba laaditud, ja kui see laaditakse, toimub paigutus nihe. See on väga levinud automaatselt kohanduvate reklaamiüksuste puhul. Seda tehes on CLS-i mõõdiku läbimine võimatu.

Parim viis sellega toime tulla on oma AdSense'i koodi veidi muuta. Ärge muretsege, see on väga õigustatud. Lihtsalt määrake reklaami suuruse atribuut, eriti kõrgus. Kui olete seda teinud, ei märka te enam reklaami laadimisel paigutuse muutust.

Allpool on näide automaatselt kohanduvast reklaamiüksusest, mida kasutasin oma ajaveebis vahetult päise all. Olen asendanud oma avaldaja ID ja reklaamipesa XXXXXX-ga. Märkasin, et lisasin kõrguse atribuudi (min-height: 300px). Hetkel, kui ma seda tegin, olid kõik CLS-i probleemid igaveseks kadunud.

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

See on selle suuruse reserveerimine lehel. Seega, kui reklaamid ilmuvad, ei toimu paigutuse nihkumist, kuna olete suuruse juba määranud.

8. Määrake oma piltidele ja muule kandjale suuruse atribuut

Nii nagu reklaamide puhul, võivad ka pildid ja muu meedium põhjustada paigutuse nihkeid, kui need teie veebisaidile laaditakse. Võib-olla loete lihtsalt midagi, siis laaditakse pilt ja järsku toimub paigutuse nihe, see, mida lugesite, on vaateväljast väljas ja näete ainult midagi muud või klõpsate kogemata midagi muud.

Saate neid kõiki vältida, määrates oma meediumifailidele suuruse atribuudi. Teie CLS-i mõõdik on selle üle õnnelik.

9. Lazy Load pilte.

Võib-olla olete näinud PageSpeed ​​Insighti nõuandeid ekraaniväliseid pilte edasi lükata. See tähendab lihtsalt piltide laisklaadimist.

Laisk laadimine vähendab lehe suurust ja vähendab ka teie lehe laadimisaega, kui kasutaja seda külastab. Mis on hea CWV mõõdikute jaoks.

See aitab eelkõige parandada LCP-d.

10. Optimeerige CSS-i, vähendades ja genereerides kriitilist CSS-i

CSS muudab veebisaidi lahedaks, kuid suur CSS-fail võib olla suur probleem, kuna see lükkab lehe kasutajale kuvamise edasi.

Kui kasutaja külastab teie veebisaiti, lükkab brauser tavapärase käitumise kohaselt teie veebilehe renderdamist kasutajale edasi, kuni see on laadinud, sõelunud ja käivitanud kogu teie veebilehe päises viidatud CSS-i. Kui teil on suur CSS-fail, võib see olla suur probleem. See aeglustab teie saiti.

Kriitiline CSS saab aidata, laadides ainult CSS-i, mis on lehe laadimiseks vajalik. Kuigi ülejäänud CSS-i saab laadida asünkroonselt.

Abiks võib olla ka CSS-i vähendamine tühikute ja kommentaaride eemaldamisega faili suuruse vähendamiseks.

Te saate ka eemalda kasutamata CSS. Kui teie kasutatav teenus edastab CSS-i, mida ei kasutata, on nende eemaldamine ohutu.

Kui kasutate WordPressi, on olemas sellised pistikprogrammid nagu WP raketi, LiteSpeed ​​Cache, FlyingPress ja teised, mis aitavad teil seda saavutada.

11. Rakendage AdSense'i nutikat laadimist

See meetod võib peaaegu täielikult kõrvaldada kõik väljakutsed, kui AdSense vastutab teie veebisaidi aeglustamise eest.

See puudutab AdSense'i nutikat laadimist. AdSense'i ei laadita enne, kui kasutaja teeb mõne toimingu, näiteks kerib või klõpsab. See parandab oluliselt laadimisaega ja kõiki AdSense'i poolt mõjutatud põhilisi veebielemente.

Seal on palju WordPressi pistikprogramme, mis aitavad teil seda teha, WP raketi ja Flying Scripts on näiteks. See meetod ei riku minu teada Google AdSense'i eeskirju.

Märge: Kuigi see meetod võib aidata parandada tajutavat kiirust ja lehe skoori, võib see mõjutada teie AdSense'i tulu. Soovitan teha katse, et olla kindel, kas see on seda väärt

12. Võimalusel kasutage System Stacki fonti

Fondid lisavad igal veebisaidil laadimisaega. Ja ilma piltideta veebilehtede puhul võib teie tekstiplokk olla vastutav teie LCP reitingu eest. Sel juhul mõjutab teie LCP skoori otseselt teie font.

Kuigi Google Font ja Font Awesome jätkavad täiustamist, pakub süsteemivirna fondi kasutamine märkimisväärset edu. Kuigi olenevalt seadmest mitte nii väljamõeldud.

13. Kasutage CDN-i

Kui teil on kasutajaid erinevatest maailma paikadest, võib CDN-i kasutamine aidata parandada teie kiirust ja kaudselt teie põhiveebi elutähtsate näitajate mõõdikuid.

Lihtsa selgitusega CDN teeb teie veebisaidist palju koopiaid ja salvestab need erinevatesse kohalolupunktidesse (POP-id) erinevates maailma paikades. Kui keegi teie veebisaiti taotleb, teenindab see teie veebisaiti lähimast asukohast.

Näiteks kui teie saiti majutatakse Ameerika Ühendriikides ja teil on külaline Ühendkuningriigist, siis selle asemel, et tuua saiti Ameerika Ühendriikidest, teenindab CDN teie saiti Ühendkuningriigist. Selle mõju on kiire kohaletoimetamine. Kiirus.

Saate kontrollida parimad CDN-id seal väljas.

14. Seadistage DNS-i eellaadimine

Kui kasutate oma veebisaidi edastamisel välisteenust, näiteks CDN-i, peate võib-olla seda tegema seadistage DNS-i eellaadimine DNS-i otsingust tingitud viivituse minimeerimiseks.

DNS-i eellaadimine laadib DNS-i enne selle väljakutsumist. Nii et see laeb hetkega, kui lõpuks kutsutakse.

15. Optimeerige kolmanda osapoole skripte

Veenduge, et mõned saidil kasutatavad teenused ei lisaks kolmanda osapoole skripte, mis võivad teie saite aeglustada.

Saate asendada lahenduse kolmanda osapoole taotlustega, mis aeglustavad teie saiti parema lahendusega.

Mis puutub Google AdSense'i, teise kolmanda osapoole skripti, siis on vähe teha. Parim tava on kasutada ühel lehel maksimaalselt kolme reklaami. Vältige sobitatud sisu kasutamist, kuna see toob madala sissetuleku, kuid pikendab laadimisaega.

16. Eemaldage AdSense lehe ülaosast

See nõuanne põhineb katsetel. Kui kõik teie mõõdikud on otsingukonsooli aruandes head, välja arvatud LCP, veenduge esmalt, et teie pildid ja fondid on optimeeritud. Kui need on optimeeritud ja teie LCP endiselt ebaõnnestub, võib AdSense olla vastutav.

Kui saate seda endale lubada, eemaldage AdSense kuuks lehe ülaosast ja vaadake, kas probleem kaob.

Kui te ei soovi seda eemaldada, saate seda käsitsi või mõne pistikprogrammi (nt Flying Scripts) abil edasi lükata.

17. Lülituge AMP-le

AMP tähendab Accelerated Mobile Pages. AMP idee on optimeerida veebilehti, et need mobiilis kiiremini laadiksid. Ja muidugi AMP avatud lähtekoodiga projekti käivitas Google.

Kuigi AMP oli algselt mõeldud mobiililehtede kiirendamiseks, võib see kiirendada ka töölaualehti.

AMP-lehed on pidevalt kiiremad kui mobiili- või lauaarvutilehed, meie tähelepanekute kohaselt mõnikord isegi üle 100%.

Kui teie veebisaidi ainus monetiseerimisstrateegia on Google AdSense, võite kaaluda kogu veebisaidi üleviimist AMP-le. Olen isiklikult märganud, et minu blogis toodab AdSense AMP-lehtedel mõnikord rohkem konversioone kui mobiilis ja lauaarvutis!

Järeldus

Veebi põhielemendid võivad aidata teil veebisaiti täiustada mitte ainult Google'i kasutajate jaoks. On väga tavaline, et laboriandmete testi tulemus on hea, kuid väliandmete halb tulemus.

See on tingitud teie kasutajate ülesehitusest. Kui enamik teie kasutajaid on pärit aeglase Interneti-ühendusega kohtadest, olete võib-olla teinud optimeerimisega head tööd, kuid siiski ebaõnnestusite väliandmetes.