Paano i-optimize ang iyong website para sa Mga Core Web Vitals (Adsense)

Ang karera upang mapabuti ang Core Web Vitals ay hindi madali. Mas magiging mahirap kung umaasa ka sa isang programa sa advertising tulad ng Google AdSense upang pagkakitaan ang iyong website.

Ang mga website na nagpapatakbo ng Google AdSense ay 10 beses na mas malamang na mabigo sa pagsubok sa Core Web Vitals kaysa sa parehong website na walang Google AdSense dito. Ito ay kadalasang dahil sa bilang ng mga kahilingan at asset ng third-party na idinaragdag ng Google AdSense sa iyong website. Karamihan sa mga asset na ito ay hindi na-optimize, malaki, at hindi user-friendly.

Sa labas ng AdSense at mga platform ng advertising, kung marami kang hindi na-optimize na larawan, JavaScript, at CSS lalo na sa itaas ng fold, malamang na mabigo ka rin sa pagsubok sa Core Web Vitals.

Kung nahihirapan kang makapasa sa pagsusulit sa Core Web Vitals at pagbutihin ang iyong mga potensyal na ranggo sa search engine, makakahanap ka ng mga praktikal na solusyon sa artikulong ito.

Ano ang Core Web Vitals?

Ang Core Web Vitals ay mga sukatan na pinapagana ng Google Lighthouse na tumutukoy kung paano naghahatid ang isang site ng magandang karanasan sa page. Bagama't maraming sukatan kapag nagpapatakbo ng pagsubok, ang pinakamahalagang sukatan ay ang Largest Contentful Paint (LCP), First Input Delay (FID), at Cumulative Layout Shift (CLS).

Inanunsyo ng Google na mula Mayo 2021, ang mga sukatang ito ay magiging bahagi ng kanilang mga signal sa pagraranggo na ginagamit upang matukoy ang mga posisyon ng web page sa mga resulta ng paghahanap.

Sa buod, maaari mong sabihin na ang Core Web Vitals ay hindi sinadya upang maging isang malaking takot sa mga Webmaster ngunit isang paraan upang mapabuti ang karanasan sa pahina ng mga website.

Pinakamalaking Contentful Paint (LCP): Sinusukat ng LCP ang oras na aabutin para ma-load ang pinakamalaking nakikitang larawan o text block sa isang webpage. Kung ang pinakamalaking nakikitang teksto o larawan ay mabilis na naglo-load, makikita na ang natitirang bahagi ng iyong mga larawan at teksto ay mabilis na maglo-load. Ang kinakailangang oras ng pagkarga upang makapasa ay 2.5 segundo.

First Input Delay (FID): Sinusukat ng FID ang interaktibidad ng web page. Natutukoy ito sa kung gaano katagal bago simulan ng browser ang pagproseso ng mga tagapangasiwa ng kaganapan pagkatapos mag-click ang isang user sa iyong site. Ito ay malawakang tinatawag na Unang impression ng iyong website. Ang kinakailangang oras para makapasa ay 100 milliseconds.

Cumulative Layout Shift (CLS): Sinusukat ng CLS ang pagbabago ng layout na nangyayari sa isang web page. Kapag nag-load ang isang web page at biglang may lumitaw o nawala at kailangang mag-adjust ang page sa pagiging mas malaki o mas maliit, ang pagbabagong iyon ang sinusukat. Ito ay kakila-kilabot para sa karanasan ng gumagamit at sumasang-ayon ako. Ang puntos na dapat mong ipasa ay 0.1.

Paano i-optimize ang iyong website para sa Mga Core Web Vitals

Sundin ang mga hakbang na ito upang i-optimize ang iyong website:

1. Magsimula sa isang mabilis na web host

Kung mayroon kang isang web host na may kakila-kilabot na oras ng pagtugon, kung gayon ang bawat iba pang bagay na ililista ko dito ay maaaring hindi magbigay ng nais na mga resulta. Kung mas mabilis na tumugon ang iyong server sa mga kahilingan, mas mabuti.

Bakit mahalaga ang isang web host na may mabilis na Time to first byte (TTFB)? Magtatalo ang ilan na hindi mahalaga ang TTFB, ngunit mahalaga ito. Iyon ang pundasyon ng lahat ng iba pa. Kung mayroon kang mga user sa mga lungsod na may mabagal na internet, kung gaano kabilis makatugon ang iyong web host ay nangangahulugan ng lahat. Ang sinumang web host ay maaaring gumanap nang maayos kung mayroon kang mga user pangunahin mula sa mga lungsod na may napakabilis na internet.

Subukang subukan kung paano tutugon ang iyong web host sa 3G o 2G sa halip na 4G. Dahil kung nakakuha ka ng maraming user na kumokonekta sa pamamagitan ng 3G o 2G, ito ay nagdaragdag ng hanggang sa iyong marka ng Core Web Vitals. Kaya, ang bawat millisecond ay binibilang. Ang pagkakaiba sa pagitan ng pagkuha ng 100ms sa iyong FID at pagkuha ng 101ms ay na sa 100ms, pumasa ka ngunit sa 101ms nabigo ka. Kaya, kung may magsasabi sa iyo na hindi mahalaga ang 1 ms, maaaring mali lang ang taong iyon.

Kapag pumipili ng a web host, palaging tiyaking makakuha ng datacenter na mas malapit sa karamihan ng mga user ng iyong website. Mahahanap mo ang kanilang mga lokasyon sa pamamagitan ng pagtingin sa iyong analytics. Saan nagmula ang karamihan sa iyong mga gumagamit? Pumili ng datacenter na mas malapit sa kanila. Ang mas malapit ay mas mabuti.

Personal kong napansin ang isang makabuluhang pagbabago sa Field Data ng isang website ng mga Core Web Vitals pagkatapos baguhin ang web host. Wala akong ibang ginawa.

Kung naghahanap ka ng mabilis na web host, maraming rekomendasyon doon na puro mga kaakibat na walang katapatan. Kung nagpapatakbo ka ng WordPress at kaya mo ito, lubos kong inirerekomenda Kinsta. Sila ang pinakamahusay para sa WordPress. Kung kailangan mo ng mas mura o hindi ka gumagamit ng WordPress noon Cloudways ay napaka-epektibo din.

2. Gumamit ng magaan at na-optimize na tema ng bilis

Ang tip na ito ay partikular na kapaki-pakinabang sa mga hindi coder at maging sa mga coder na may kaunting oras. Lalo na kung gumagamit ka ng WordPress kung saan napakaraming opsyon, tiyaking gumamit ka ng magaan at na-optimize na tema sa bilis.

Dahil ang theme ay parang skeleton ng website mo, kapag nasira ang skeleton ay masisira ang katawan. Iyon lang.

Mayroong mahabang listahan ng mga pinakamahusay na kagawian na dapat mong hanapin sa isang tema. Ang ilan sa mga pinakakaraniwang masamang kagawian ay labis na umaasa sa JQuery, naglo-load ng masyadong maraming CSS/JS kapag hindi kinakailangan, malaking sukat ng tema, at higit pa. Maaari mong palaging gumamit ng isang tool tulad ng Mga dilaw na lab, upang subukan ang demo.

Kung gumagamit ka ng WordPress, maaari mong tingnan ang listahan ng pinakamabilis na mga tema ng WordPress.

3. I-optimize ang iyong mga imahe

Ang mga imahe ay cool. Ginagawa nilang kaakit-akit ang nilalaman. Ngunit maaari silang maging isang pasanin kung sila ay hindi na-optimize. Ang pagkakaroon ng malalaking larawan tulad ng 3 MB ay tiyak na makakaapekto sa iyong bilis. At kung makikita ang mga larawang ito kapag binisita ang iyong site bago mag-scroll, tiyak na makakaapekto ang mga ito sa iyong sukatan ng LCP.

Ang katotohanan ay ang mga hindi na-optimize na larawan ay nagdaragdag sa laki ng iyong pahina. Kung mas malaki ang laki ng pahina, mas matagal itong mag-load.

Mas gusto kong i-optimize ang bawat larawan bago i-upload ang mga ito. Hindi ako gumagamit ng anumang panlabas na serbisyo para sa pag-optimize ng imahe. Gayunpaman, kung gumagamit ka ng WordPress o katulad na CMS, mayroong mga plugin at solusyon upang awtomatikong i-optimize ang mga larawan. Mayroon ding mga solusyon sa ulap anuman ang iyong ginagamit.

4. Alisin o bawasan ang laki ng mga larawan sa background

Karaniwang napakalaki ng mga larawan sa background. At maaari nitong pabagalin ang oras ng iyong pagkarga dahil kailangan muna itong i-load bago ipakita ang makabuluhang nilalaman.

Maaari mong ganap na alisin ang larawan sa background upang magkaroon ng mas mabilis na website. Kung napakahalaga ng mga ito, isaalang-alang ang pag-optimize sa mga ito sa pinakamaliit na sukat na posible o paggamit ng mga pattern sa halip na mga larawan.

5. Gumamit ng browser caching

Kung marami kang matapat na mambabasa, dapat mong isaalang-alang ang pag-cache ng browser. Kapag binisita ng isang user ang iyong website sa unang pagkakataon, i-cache ng browser ang website na iyon. Para sa bawat isa pang pagbisita, maglo-load ito sa isang iglap. Mapapabuti nito nang husto ang FID at LCP mula sa ikalawang pagbisita pataas.

Para sa mga gumagamit ng WordPress, ang karamihan sa caching plugin ay makakatulong sa iyo na makamit ito.

6. Bawasan ang JavaScript at ipagpaliban ang hindi nagamit na JavaScript

Bagama't kamangha-mangha ang JavaScript, madalas itong nag-render-blocking. Nangangahulugan ito na maaari itong makaapekto sa iyong oras ng pagkarga at sa huli ang iyong FID.

Subukang maliitin ang JavaScript sa pamamagitan ng pag-alis ng mga puting espasyo at komento upang bawasan ang laki ng file. Gayundin, tiyaking ipagpaliban mo ang hindi kritikal na JavaScript. Dapat nitong mapabuti ang iyong FID.

Para sa mga gumagamit ng WordPress, mayroong mga plugin tulad ng Autoptimize, WP Rocket, at iba pang makakagawa nito para sa iyo.

7. Itakda ang katangian ng laki ng AdSense

Kung nagpapatakbo ka ng AdSense sa iyong website at nahihirapan ka sa CLS, malulutas nito ang lahat ng iyong problema. Ginawa nito para sa akin at dapat para sa iyo.

Kung mayroon kang unit ng ad na malapit sa header na nakikita kapag bumisita ang isang user, ang isang problema ay maaaring hindi agad mag-load ang ad. Maaari itong mag-load pagkatapos na ma-load ang page, at kapag nangyari ito, may pagbabago sa layout. Ito ay napakakaraniwan para sa mga tumutugong unit ng ad. Sa nangyayaring iyon, imposibleng makapasa sa sukatan ng CLS.

Ang pinakamahusay na paraan upang mahawakan ito ay i-edit nang kaunti ang iyong AdSense code. Huwag mag-alala, ito ay napaka-lehitimo. Tukuyin lamang ang katangian ng laki para sa ad, lalo na ang taas. Pagkatapos mong gawin iyon, hindi mo na mapapansin ang pagbabago ng layout sa tuwing naglo-load ang ad.

Nasa ibaba ang isang halimbawa ng tumutugong unit ng ad na ginamit ko sa aking blog sa ibaba lamang ng header. Pinalitan ko ang aking Publisher ID at Ad slot ng XXXXXX. Napansin na idinagdag ko ang katangian ng taas (min-height: 300px). Sa sandaling ginawa ko iyon, lahat ng isyu sa CLS ay nawala nang tuluyan.

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

Ang ginagawa nito ay upang ireserba ang laki na iyon sa page. Kaya sa tuwing lumalabas ang mga ad, walang pagbabago sa layout, dahil naitakda mo na ang laki.

8. Itakda ang katangian ng laki para sa iyong mga larawan at iba pang media

Tulad ng sa Mga Ad, ang mga larawan at iba pang media ay maaaring magdulot ng mga pagbabago sa layout kapag na-load ang mga ito sa iyong website. Maaaring may binabasa ka lang, tapos may naglo-load na image at biglang may layout shift, wala sa view ang binabasa mo at iba na lang ang nakikita mo o nag-click ka pa ng iba nang hindi sinasadya.

Maiiwasan mo ang lahat ng ito sa pamamagitan ng pagtatakda ng attribute ng laki sa iyong mga media file. Ang iyong sukatan ng CLS ay magiging masaya na ginawa mo.

9. Lazy Load na mga larawan.

Maaaring nakita mo na ang payo sa PageSpeed ​​​​Insight sa ipagpaliban ang mga larawan sa labas ng screen. Ang ibig sabihin lang nito ay tamad na i-load ang iyong mga larawan.

Ang ginagawa ng tamad na pag-load ay upang bawasan ang laki ng pahina at bawasan din ang oras ng paglo-load ng iyong pahina kapag bumisita ang isang user. Alin ang mabuti para sa mga sukatan ng CWV.

Ito ay partikular na makakatulong sa pagpapabuti ng LCP.

10. I-optimize ang CSS sa pamamagitan ng pagpapaliit at pagbuo ng kritikal na CSS

Ang CSS ang nagpapaganda ng isang website, ngunit ang isang malaking CSS file ay maaaring maging isang malaking isyu dahil maaantala nito ang pag-render ng page sa user.

Kapag binisita ng isang user ang iyong website, maaantala ng browser sa pamamagitan ng normal na pag-uugali ang pag-render ng iyong web page sa user hanggang sa ma-load, ma-parse, at maisagawa nito ang lahat ng CSS na naka-reference sa header ng iyong web page. Kung mayroon kang malaking CSS file, maaari itong maging isang malaking isyu. Pabagalin nito ang iyong site.

Makakatulong ang kritikal na CSS sa pamamagitan lamang ng paglo-load ng CSS na kinakailangan para ma-load ang page. Habang ang natitirang bahagi ng CSS ay maaaring i-load nang asynchronously.

Makakatulong din ang pagpapaliit ng iyong CSS sa pamamagitan ng pag-aalis ng mga puting espasyo at komento upang bawasan ang laki ng file.

Maaari mo ring alisin ang hindi nagamit na CSS. Kung ang isang serbisyong ginagamit mo ay nagtutulak ng CSS na hindi ginagamit, ligtas na alisin ang mga ito.

Kung gumagamit ka ng WordPress, may mga plugin tulad ng WP Rocket, LiteSpeed ​​​​Cache, FlyingPress at iba pa na makakatulong sa iyong makamit ito.

11. Ipatupad ang AdSense smart loading

Halos ganap na maalis ng paraang ito ang lahat ng hamon kung responsable ang AdSense sa pagpapabagal sa iyong website.

Ito ay tungkol sa pag-load ng AdSense sa matalinong paraan. Hindi mailo-load ang AdSense hanggang sa gumawa ng pagkilos ang isang user tulad ng pag-scroll o pag-click. Lubos nitong mapapabuti ang oras ng pagkarga at anumang Core web vitals na apektado ng AdSense.

Mayroong maraming mga plugin ng WordPress na makakatulong sa iyong gawin ito, WP Rocket at Flying Scripts ay isang halimbawa. Ang pamamaraang ito sa pagkakaalam ko ay hindi lumalabag sa patakaran ng Google AdSense.

tandaan: Bagama't makakatulong ang paraang ito na pahusayin ang nakikitang bilis at mga marka ng page, maaari itong makaapekto sa iyong kita sa AdSense. Inirerekomenda ko na magpatakbo ka ng isang eksperimento upang matiyak kung sulit ito

12. Gumamit ng System Stack font kung kaya mo

Ang mga font ay nagdaragdag ng dagdag na oras ng pagkarga sa anumang website. At para sa mga web page na walang mga larawan, ang iyong text block ay maaaring maging responsable para sa iyong LCP rating. Kung saan ang iyong marka ng LCP ay direktang maiimpluwensyahan ng iyong font.

Habang ang Google Font at Font Awesome ay patuloy na umuunlad, ang paggamit ng system stack font ay nag-aalok ng makabuluhang pagpapabuti. Bagama't hindi kasing-isip depende sa device.

13. Gumamit ng CDN

Kung mayroon kang mga user mula sa iba't ibang bahagi ng mundo, kung gayon ang paggamit ng CDN ay makakatulong na mapahusay ang iyong bilis at hindi direkta ang iyong mga sukatan ng Core Web Vitals.

Ang isang CDN sa simpleng pagpapaliwanag ay gumagawa ng maraming kopya ng iyong website at iniimbak ang mga ito sa iba't ibang Point of Presence (POP) sa iba't ibang bahagi ng mundo. Kapag may humiling sa iyong website, inihahatid nito ang iyong website mula sa pinakamalapit na lokasyon.

Halimbawa, kung naka-host ang iyong site sa United States at mayroon kang bisita mula sa United Kingdom, sa halip na kunin ang iyong site mula sa United States, ihahatid ng CDN ang iyong site mula sa United Kingdom. Ang magiging epekto niyan ay mabilis na paghahatid. Bilis.

Maaari mong i-checkout ang pinakamahusay na mga CDN doon.

14. I-set up ang DNS prefetching

Kung umaasa ka sa isang panlabas na serbisyo tulad ng isang CDN para sa paghahatid ng iyong website, maaaring kailanganin mo mag-set up ng DNS Prefetching upang mabawasan ang pagkaantala dahil sa DNS lookup.

Prefetch ng DNS prefetch ang DNS bago ito tawagin. Upang ito ay naglo-load sa isang iglap kapag ito ay sa wakas ay tinawag.

15. I-optimize ang mga script ng Third-party

Suriin upang matiyak na ang ilan sa mga serbisyong ginagamit mo sa iyong site ay hindi nagdaragdag ng mga script ng third-party na maaaring magpabagal sa iyong mga site.

Maaari mong palitan ang solusyon ng mga kahilingan ng third-party na nagpapabagal sa iyong site ng mas mahusay na solusyon.

Pagdating sa Google AdSense, isa pang third-party na script, kaunti lang ang magagawa mo. Ang pinakamahusay na kasanayan ay ang paggamit ng maximum na 3 ad na pinagsama sa isang page. Iwasan ang Mga Katugmang nilalaman dahil nagdudulot ito ng mababang kita ngunit nagdaragdag sa oras ng pagkarga.

16. Alisin ang AdSense mula sa itaas ng fold

Ang payo na ito ay batay sa mga eksperimento. Kung maganda ang lahat ng iyong sukatan sa ulat ng search console maliban sa LCP, tiyaking naka-optimize ang iyong mga larawan at font. Kung na-optimize ang mga ito at nabigo ka pa rin sa LCP, maaaring may pananagutan ang AdSense.

Kung kaya mo, alisin ang AdSense sa itaas ng fold sa loob ng isang buwan at tingnan kung mawawala ang isyu.

Kung ayaw mong alisin ito, maaari mo itong i-delay nang manu-mano o sa tulong ng isang plugin tulad ng Flying Scripts.

17. Lumipat sa AMP

Ang ibig sabihin ng AMP ay Accelerated Mobile Pages. Ang ideya ng AMP ay i-optimize ang mga web page upang mas mabilis na mag-load sa mobile. At siyempre, ang AMP open source proyekto ay sinimulan ng Google.

Bagama't orihinal na nilayon ang AMP na pabilisin ang mga mobile page, maaari rin nitong pabilisin ang mga desktop page.

Ang mga AMP page ay patuloy na mas mabilis kaysa sa mga mobile o desktop page, minsan ay higit sa 100% ayon sa aming obserbasyon.

Kung ang nag-iisang diskarte sa monetization ng iyong website ay Google AdSense, maaari mong isaalang-alang ang paglipat ng lahat ng iyong website sa AMP. Personal kong napansin na sa isang blog na pagmamay-ari ko, minsan ay nagko-convert ang AdSense sa mga AMP page kaysa sa mobile at desktop!

Konklusyon

Matutulungan ka ng Core Web vitals na pahusayin ang iyong website para sa iyong mga user hindi lang para sa Google. Napakakaraniwan na magkaroon ng magandang marka ng pagsubok ng data ng lab ngunit hindi magandang marka ng data ng field.

Ito ay dahil sa makeup ng iyong mga user. Kung karamihan sa iyong mga user ay mula sa mga lugar na may mabagal na internet, maaaring nagawa mo nang mahusay ang pag-optimize ngunit nabigo pa rin sa data ng field.