Ipinapakita ng Core Web Vitals ang tatlong sukatan na niraranggo ng Google — LCP, CLS at INP — na sinukat nang live sa page na iyong tinitingnan, na-rate laban sa mga limitasyon ng Google, at na-trace pabalik sa eksaktong elemento sa likod ng bawat numero.
Ang Core Web Vitals ay magpapasya sa bahagi ng kung paano nagra-rank ang iyong mga pahina, ngunit ang mga karaniwang paraan ng pagsukat sa mga ito ay mahirap. Ang mga tool sa lab ay nakakuha ng synthetic load na walang nakakaranas. Iniuulat ng Search Console ang mga tunay na user, huli ng apat na linggo, na pinagsama-sama sa mga bucket ng URL. Ni hindi nagsasabi sa iyo kung aling elemento sa page sa harap mo ang problema.
Sinusukat ng tool na ito ang page na aktwal mong tinitingnan, habang ginagamit mo ito. Ang LCP, CLS at INP ay nakakakuha ng tile na may halaga nito, isang Good, Needs work o Mahina na rating laban sa mga na-publish na threshold ng Google, at isang bar na nagpapakita kung saan ka nakaupo. Ang FCP at TTFB ay nakaupo sa tabi nila para sa konteksto, dahil ang mabagal na LCP na dulot ng mabagal na server ay ibang problema sa problemang dulot ng mabigat na larawan.
Ang mga kahulugan ay tumutugma sa kung ano ang iniulat ng Chrome sa CrUX, na mahalaga kung nilayon mong ihambing ang mga numero sa Search Console. Gumagamit ang CLS ng mga window ng session — magtatapos ang isang window pagkatapos ng isang segundong agwat o sa limang segundo, at ang pinakamasamang window ang nanalo — sa halip na walang muwang na pagdaragdag ng bawat shift. Ang INP ay ang 98th percentile ng iyong mga latency ng pakikipag-ugnayan, na para sa isang normal na pagbisita ay ang pinakamabagal na pakikipag-ugnayan. Hihinto ang pagbabago ng LCP sa iyong unang pakikipag-ugnayan, eksakto kung paano ito ginagawa ng Chrome.
Pinaka-kapaki-pakinabang, ang bawat numero ay naiugnay. Pinangalanan ng panel ang pinakamalaking elemento ng pintura, ang mga elementong lumipat at ang pinakamabagal na pakikipag-ugnayan, at ang isang button na Ipakita ay nag-i-scroll sa alinman sa mga ito at binabalangkas ito sa pahina. Sa halip na malaman na ang CLS ay 0.31, makikita mo ang banner na nagtutulak sa iyong nilalaman pababa. Ibibigay sa iyo ng kopya ng ulat ang kabuuan bilang text para sa isang tiket.
Ang tatlong ranggo na sukatan ay nag-a-update habang ginagamit mo ang pahina: ang pag-scroll ay gumagalaw ng CLS, ang pag-click at pag-type ay naglilipat ng INP. Ang bawat isa ay na-rate na Mabuti, Nangangailangan ng trabaho o Mahina laban sa mga limitasyon ng Google.
Pinangalanan ang pinakamalaking elemento ng pintura, ang mga elementong lumipat at ang pinakamabagal na pakikipag-ugnayan. Pindutin ang Ipakita upang mag-scroll sa alinman sa mga ito at direktang balangkasin ito sa pahina.
Gumagamit ang CLS ng mga window ng session na may 1s gap at 5s cap, ang INP ay ang ika-98 percentile ng mga latency ng pakikipag-ugnayan, at nag-freeze ang LCP sa unang pakikipag-ugnayan — kaya ang iyong mga numero ay nakahanay sa Search Console.
Ang First Contentful Paint at Time To First Byte ay nasa tabi ng malaking tatlo, para malaman mo ang isang mabagal na server bukod sa isang mabigat na imahe ng bayani bago mo simulan ang pag-optimize sa maling bagay.
Inililista ang iyong pinakamabagal na pakikipag-ugnayan sa uri ng kaganapan at sa elementong kasangkot, kaya ang isang matamlay na dropdown o filter ay mahahanap sa halip na hulaan.
Kinokopya ng isang pag-click ang bawat sukatan, rating at nakakasakit na tagapili bilang plain text — handang i-paste sa isang ticket, isang pull request o isang email ng kliyente.
Kumpirmahin na nasa berde ang LCP, CLS at INP sa isang bagong template bago ito mag-live, sa halip na malaman mula sa Search Console pagkalipas ng isang buwan.
Sinasabi sa iyo ng Search Console ang isang pangkat ng mga URL na nabigo sa CLS; buksan ang isa sa mga ito gamit ang tool na ito at tingnan kung aling elemento ang gumagawa ng paglilipat.
Mag-scroll sa page at panoorin ang pag-akyat ng CLS, pagkatapos ay pindutin ang Ipakita upang balangkasin ang late-loading na ad, banner o web font na gumagalaw sa iyong content.
Mag-click sa mga filter, menu at modal, pagkatapos ay basahin ang listahan ng pinakamabagal na pakikipag-ugnayan upang malaman kung aling kontrol ang nagkakahalaga ng daan-daang millisecond.
Itala ang mga numero, i-deploy ang pag-aayos, pagkatapos ay sukatin muli ang parehong pahina at ihambing ang dalawang ulat nang magkatabi.
I-click ang icon na Core Web Vitals sa DevSuite Pro dock. Lumilitaw kaagad ang mga tile ng sukatan gamit ang anumang naitala na ng page.
Ang LCP ay makabuluhan lamang mula sa simula ng pag-load ng pahina, kaya i-reload nang bukas ang panel kapag gusto mo ng pagbabasa na mapagkakatiwalaan mo.
Mag-scroll sa buong page para mag-ehersisyo ang CLS, at i-click, i-tap at i-type para bumuo ng mga sukat ng INP. Ang mga tile ay nag-a-update habang nagpapatuloy ka.
Pindutin ang Ipakita sa tabi ng elemento ng LCP, pinagmulan ng layout-shift o isang mabagal na pakikipag-ugnayan. Ang pahina ay nag-scroll dito at binabalangkas ito upang walang kalabuan tungkol sa kung aling elemento ang may pananagutan.
I-click ang Kopyahin ang ulat para sa isang plain-text na buod ng bawat sukatan, rating at tagapili. Pindutin ang I-reset upang simulan muli ang CLS at INP mula sa simula.
I-install ang DevSuite Pro nang libre at i-unlock ang 71+ developer tools para sa iyong browser.
