Alamin kung ano ang sinasabi ng bawat sukatan
Largest Contentful Paint, o LCP, sumusukat kung kailan nag-render ang pinakamalaking imahe o bloke ng teksto sa unang viewport. Interaction to Next Paint, o INP, sinusukat ang pagiging tumutugon ng pagbisita sa pamamagitan ng pinakamabagal na kwalipikadong interaction nito. Cumulative Layout Shift, o CLS, sumusukat sa hindi inaasahang nakikitang paggalaw habang umiikot ang pagbisita.
Ang inilathalang experience targets ng Google ay LCP na nasa o mababa sa 2.5 segundo, INP na nasa o mababa sa 200 milliseconds, at CLS na nasa o mababa sa 0.1. Suriin ang mga ito sa 75th percentile ng page loads, hiwalay para sa mobile at desktop. Gamitin ang mga target para pagtutukan ang trabaho, hindi bilang garantiya sa ranggo o dahilan para balewalain ang mga mabagal na bisita.
Huli ang paglabas ng pangunahing nilalaman; imbestigahan ang server, resource discovery, pag-download, at rendering path.
Ang click, tap, o keypress ay matagal bago magkaroon ng visual na tugon; maaaring nagmumula ang sanhi sa isang embedded frame.
Biglang gumagalaw ang nilalaman; magbigay ng dagdag na atensiyon sa mga paggalaw malapit sa controls, form, at mga posisyon ng pagbabasa.
Hayaan ang field data ang magtakda ng priyoridad at lab testing ang magpaliwanag nito
Ang field data ay nagmumula sa totoong pagbisita, kabilang ang totoong device, network, lokasyon, cache state, at pag-uugali. Lumalabas ang Chrome User Experience Report data sa PageSpeed Insights at Search Console kapag may sapat na data. Ang sarili mong real-user monitoring ay maaaring magdagdag ng context ng page-view; kolektahin lamang ang telemetry na kailangan at iwasang mag-imbak ng content na ipinapasok ng customer.
Ang lab data ay isang repeatable test sa napiling kondisyon. Kapaki-pakinabang ito para i-isolate ang pagbabago sa release at basahin ang trace, pero hindi nito kayang irepresenta ang bawat bisita. Hindi kayang sukatin ng Lighthouse ang totoong INP nang walang tunay na interaction, kaya ang Total Blocking Time nito ay isang diagnostic proxy. Kapag magkaiba ang resulta, gamitin ang field data para mag-priyoridad at lab data para mag-imbestiga.
Itala kung ang data ay nasa URL o origin level at kung ito ay mobile o desktop.
I-save ang petsa, page group, device, distribution, test settings, at mga kamakailang release kasama ang baseline.
Triage ayon sa reach, task harm, ebidensiya, at reversibility
Huwag magsimula sa pinakamababang numero sa dashboard. I-ranggo ang mga kandidato ayon sa naapektuhang pagbisita, kahalagahan ng task ng bisita, pag-uulit sa template, at kung maaaring i-isolate at i-rollback ang pagbabago. Ginagawa nitong operasyonal na remediation ang pag-optimize ng core web vitals kaysa score chasing.
Maaaring mas magandang unang pagbabago ang pagkawala ng image dimension sa isang shared template kaysa sa isang speculative front-end rewrite. Maaring mauuna ang isang hindi gaanong karaniwang checkout interaction kapag hinaharangan nito ang pagkumpleto. Ipares ang ebidensya mula sa metric sa support feedback, funnel observation, at accessibility review.
Mga paulit-ulit na problemang naobserbahan sa field sa mahahalagang template na may malinaw at mababang-risk na remedy.
Mga ideya sa arkitektura na walang nasukat na problema ng gumagamit o rollback path; itago bilang mga hypothesis.
Ayusin ang LCP sa pamamagitan ng pagpapaikli ng path papunta sa pangunahing nilalaman
Tukuyin ang LCP element para sa apektadong pahina at grupo ng device. Suriin ang initial HTML response, kung kailan nadidiskubre ng browser ang element, gaano katagal mag-download ang resource, at kung ano ang humahadlang sa rendering. Ang mataas na server response time ay maaaring gawing hindi praktikal ang LCP target kahit na mahusay ang pag-optimize ng hero asset.
Panatilihing madaling madiskubre ang pangunahing nilalaman nang maaga kapag akma sa disenyo. Huwag i-lazy-load ang imahe na siyang LCP element. Para sa mga pahinang pinangungunahan ng imahe, gumamit ng angkop na sukat at encoded na asset na may malinaw na dimensyon. Subukan ang preload at delivery rules: ang maagang request ay kapaki-pakinabang lamang kung hindi ito nakikipagkompetensya sa mas mahalagang gawain.
Suriin ang redirects, server work, cache behavior, at delivery proximity; maaaring kailanganin ng pag-aari mula sa application o hosting team.
Suriin kung ang client rendering, scripts, o CSS ay nagpapadelay sa pagkadiskubre ng pangunahing teksto o imahe.
Gawing mabilis ang interaksyon at predictable ang mga layout
Para sa INP, ulitin ang mabagal na flow sa isang browser trace. Paghiwalayin ang input delay, event processing, at presentation delay. Ang mahahabang main-thread tasks, mabibigat na handlers, magastos na rendering, at layout thrashing ay maaaring magpabawas ng susunod na paint. Gawin muna ang visual work para sa susunod na frame; i-defer ang hindi-kritikal na saving, analytics, o pangalawang updates kapag pinapayagan ng mga requirement ng produkto.
Para sa CLS, hanapin ang mga elementong gumagalaw imbes na hulaan mula sa kabuuan. Magreserba ng espasyo para sa mga imahe, video, ads, embeds, at frames gamit ang dimensyon o CSS aspect ratio. Suriin ang font loading at injected content. Huwag itago ang isang kinakailangang consent, error, o accessibility message para lang mapabuti ang score; bigyan ito ng matatag na lokasyon.
Ang pag-defer ng gawain ay maaaring magbago ng timing ng aplikasyon. Gumawa ng regression test sa state, validation, at keyboard behavior.
I-scroll ang lahat ng lazy-loaded at embedded na bahagi; maaaring hindi makita ng load-only test ang mga huling pag-shift.
I-release ang mga pagpapabuti nang ligtas at i-kumpirma ang mga ito
Maaaring makaapekto ang mga pagbabago sa performance sa scripts, caching, rendering, embeds, o delivery configuration. I-stage ang pagbabago, ikumpara ang isang tinukoy na test path sa baseline, at i-dokumenta ang rollback. Para sa payment, account, o regulated flows, isama ang angkop na security, compliance, at accessibility reviewer bago baguhin ang embeds, validation, o data handling. Ito ay pang-edukasyong gabay, hindi pagsusuri ng pagsunod sa regulasyon.
Pagkatapos ng release, ikumpara ang parehong lab path at bantayan ang katulad na field segments sa kanilang normal na reporting window. Suriin ang hindi inaasahang epekto tulad ng naka-tagong error o hindi mabasang interface. Sinusuportahan ng Status Is UP ang proactive uptime optimization sa pamamagitan ng paulit-ulit na checks, malinaw na may-ari ng remediation, at pagiging handa sa rollback sa pagitan ng mga insidente.
I-link ang bawat pagbabago sa isang page group, metric, may-ari, test evidence, trade-off, at rollback instruction.
Huwag mag-deklara ng tagumpay mula sa isang synthetic pass lamang; kumpirmahin ang kaugnay na real-user pattern.