Paano ko aayusin ang mahihinang Core Web Vitals score?

Alamin kung aling metric ang pumapalya, sa anong device, at sa anong grupo ng mga page; ipinapakita ng Core Web Vitals report ng Search Console ang lahat ng tatlo mula sa mga totoong pagbisita sa Chrome. Pagkatapos, ayusin ang sanhi sa likod ng metric na iyon: para sa LCP, ang bilis ng pagdating ng pangunahing larawan o teksto; para sa INP, ang mahahabang JavaScript task na nagpapaantala ng mga tugon; para sa CLS, ang content na lumilitaw nang walang nakareserbang espasyo. Sakop ng field data ang nakaraang 28 araw, kaya hatulan ang epekto ng pag-aayos sa loob ng isang buwan.

Hakbang 1: alamin kung ano ang pumapalya

1. Buksan ang Core Web Vitals report sa Search Console at piliin ang Mobile o Desktop; magkahiwalay ang rating ng dalawa.
2. Buksan ang isa sa mga nakalistang isyu, halimbawa ang isyu sa LCP sa mobile, para makita ang apektadong grupo ng URL at mga halimbawang URL. Iisa ang status ng buong grupo, at ang pinakamahinang metric ang nagpapasya nito.
3. Patakbuhin ang isang halimbawang URL sa PageSpeed Insights para makita ang field data ng page na iyon katabi ng lab test na makakatulong sa pag-debug.

Hindi nasusukat ng mga lab tool tulad ng Lighthouse ang INP dahil walang nakikipag-interact sa page, kaya Total Blocking Time ang iniuulat nila. Para sa INP, ang pagsukat mula sa mga totoong user ang maaasahang gabay.

Paano ayusin ang mabagal na LCP

Hinahati ng gabay sa pag-optimize ng LCP ng web.dev ang LCP sa apat na bahagi: oras ng tugon ng server, ang pagkaantala bago magsimulang mag-load ang pangunahing resource, ang oras ng pag-download nito, at ang pagkaantala bago ito mag-render. Unahin ang pinakamalaking bahagi:

• Gawing madaling matuklasan ang LCP image sa unang HTML sa halip na i-inject ito gamit ang JavaScript o CSS, at lagyan ito ng fetchpriority="high".
• Huwag kailanman i-lazy-load ang LCP image.
• Gawing mas maliit ang ipinapadala: tamang dimensyon, makabagong format, compression, at CDN na malapit sa mga bisita.
• Alisin ang mga resource na humaharang sa render: mas maliliit na stylesheet, walang synchronous na script sa <head>, at server-side rendering para sa pangunahing content.
• Pabilisin ang tugon ng server: bawasan ang mga redirect at payagang ma-cache ang mga page sa edge.

Paano ayusin ang mahinang INP

Hinahati ng gabay sa pag-optimize ng INP ang bawat interaksyon sa input delay, processing time, at presentation delay:

• Input delay: bawasan ang JavaScript na tumatakbo habang nilo-load ang page, para malaya ang main thread kapag may nag-tap.
• Processing time: hatiin ang mahahabang event handler sa mas maliliit na task at magbigay-daan sa main thread, gawin muna ang nakikitang update at ipagpaliban ang iba.
• Presentation delay: panatilihing maliit ang DOM, iwasang pilitin ang layout sa pagbasa ng mga style kaagad pagkatapos baguhin ang mga ito, at gamitin ang content-visibility para sa mahahabang page.

Paano ayusin ang mataas na CLS

Inilista ng gabay sa pag-optimize ng CLS ang mga karaniwang sanhi at ang mga lunas nito:

• Mga larawan at video na walang dimensyon: magdagdag ng mga attribute na width at height, o CSS na aspect-ratio.
• Mga ad, embed, at iframe: magreserba ng espasyo para sa mga ito sa layout bago sila mag-load.
• Content na ini-inject sa itaas ng umiiral na content: gumamit ng placeholder na tama ang laki, o ipasok ang bagong content sa ibaba ng binabasa ng bisita.
• Mga web font: i-preload ang mahahalaga para hindi biglang mag-reflow ang teksto.
• Mga animation: i-animate ang transform sa halip na mga property tulad ng top o left.

Iniiwasan din ng mga page na magagamit ang back/forward cache ng browser ang mga layout shift kapag bumalik ang mga bisita sa mga ito.

Hakbang 3: kumpirmahin ang pag-aayos

I-deploy ito, pagkatapos ay buksan ang isyu sa Core Web Vitals report at simulan ang validation. Mino-monitor ng Google ang grupo sa loob ng 28 araw; hindi nagti-trigger ng recrawl ang validation at hindi nito pinapabilis ang anumang proseso, sinusubaybayan lang nito kung nawala na ang problema. Dahil 28 araw ang saklaw ng field data, asahan na unti-unting gaganda ang report. Para sa kahulugan ng bawat metric, tingnan ang Ano ang ibig sabihin ng LCP, INP, at CLS?.

Paano makakatulong ang AutoPSEO

Nagcha-chart ang Core Web Vitals report ng AutoPSEO ng halos anim na buwan ng lingguhang Chrome UX Report data para sa iyong site o para sa isang URL, sa phone, desktop, o tablet, kaya makikita mo ang linggong nagkabisa ang isang pag-aayos, o ang linggong pumalya ang isang release, nang hindi na naghihintay na matapos ang susunod na 28-araw na window.