Sirf field data hi asli score hai
Lighthouse aik data centre mein, throttled connection par, aik simulated mid-tier phone chala kar test karta hai. Aap ke users wo nahi hain. Google Chrome User Experience Report par rank karta hai — asli sessions, 28 din ki rolling window, 75th percentile par score — is liye lab number ke peechhe bhagne se wo metric hil bhi nahi sakta jo asal mein ahem hai. web-vitals library install karen aur LCP, INP aur CLS ko page template ke saath apne analytics mein bhejen, taake aap dekh saken ke pricing page pass ho raha hai aur search results page nahi. Lab tools ko debugger samjhen, scoreboard nahi: wo bataate hain ke aik makhsoos load slow kyun tha, aur is kaam mein wo behtareen hain. Bas kisi stakeholder ko Lighthouse score yeh saboot bana kar kabhi na dikhayen ke asli users ka tajruba achha hai.
LCP taqreeban hamesha aik image ya aik font hoti hai
Largest Contentful Paint ka budget 75th percentile par 2.5 second hai, aur hamare tajrube mein chaar wajuhat ziyadatar failures ki wazahat kar deti hain. Pehla, hero image lazy-loaded hoti hai — browser layout chalne se pehle usay fetch karna shuru bhi nahi karta. Us par fetchpriority="high" laga den aur loading="lazy" hata den; Next.js par yeh priority prop hai. Doosra, image 900KB ki PNG hoti hai jo theek dimensions par 60KB ki AVIF honi chahiye thi. Teesra, aik render-blocking webfont text paint ko rok deta hai: usay self-host karen, fold ke upar wale aik weight ko preload karen, aur font-display: swap ke saath metric-matched fallback istemal karen taake swap aap ko CLS mein na pare. Chautha, slow server response — agar time to first byte 600ms se ziyada hai to koi front-end kaam aap ko nahi bacha sakta. Pehle usay theek karen.
INP aik JavaScript ka masla hai jo aap maap sakte hain
Interaction to Next Paint ne March 2024 mein First Input Delay ki jagah li, aur yeh kahin sakht test hai: yeh poore visit ki har interaction maapta hai, sirf pehli nahi, aur budget 200ms hai. Wajah main thread par lambe tasks hote hain, aur React sites par hydration aam tor par sab se bara hota hai. Client ko kam JavaScript bhejen — server components, islands, ya saada progressive enhancement, sab chalte hain, aur framework se ziyada byte count ahem hai. 50ms se ziyada wale kaam ko scheduler.yield ya event loop ko yield kar ke toren. Khaas qatilon par nazar rakhen: aik bhaari onChange handler jo har keystroke par bari list filter karta hai, aik analytics script jo click handler ke andar synchronously chalti hai, aur third-party tag managers jo kisi bhi vendor ka code queue kar dete hain. Debounce karen, worker par daal den, ya vendor ko nikaal den.
CLS sasti hai, aur kuch mashware bohat over-rated hain
Cumulative Layout Shift teenon mein sab se aasan hai 0.1 par pass karna: har image aur video par width aur height attributes lagayen, ad slots, banners aur embeds ke liye min-height se jagah reserve karen, aur load ke baad maujooda content ke upar kabhi naya content na daalen — cookie banner ya promo bar ka page ko neeche dhakelna aik classic khud-saakhta failure hai. Ab over-rated list. Critical CSS inlining nazuk kaam hai, redesign par toot jati hai, aur shazi hi sirf kam CSS bhejne se behtar nateeja deti hai. Aik darjan resources preload karne se sab aapas mein muqabla karte hain aur aam tor par LCP slow ho jata hai. Bundle size ko taqreeban 100KB gzipped se neeche micro-optimise karne ka asar aik blocking third-party script hatane ke muqable bohat kam hai. Aur us page par Lighthouse mein perfect 100 jo CrUX mein fail ho raha hai, nateeja nahi — wo aik false negative hai jis ki aap ne qeemat di.