# मुख्य वेब जीवन संकेत — वेब प्रदर्शन अनुकूलन

Source: https://www.skillbyai.com/hi/web-performance/web-perf-02

> Google के आवश्यक प्रदर्शन metrics: LCP, INP और CLS, जो user experience की गुणवत्ता तय करते हैं।

## सबसे बड़ी सामग्री पेंट (LCP)

**LCP** बताता है कि screen पर सबसे बड़ा visible content element कब load हुआ। Target: < 2.5 seconds। अच्छा LCP मतलब main content जल्दी दिखता है, जिससे page तेज़ महसूस होता है।

## Interaction to Next Paint (INP)

**INP** बताता है कि पूरी visit के दौरान page, user की interactions (click, tap, key press) पर कितनी जल्दी response देता है। Target: ≤ 200ms। मार्च 2024 में इसने First Input Delay (FID) की जगह Core Web Vital के रूप में ले ली।

## संचयी लेआउट शिफ्ट (CLS)

**CLS** अचानक होने वाले layout बदलावों को मापता है। Target: < 0.1। Elements को अचानक हिलने से रोकें, क्योंकि इससे users परेशान होते हैं और गलत जगह click हो जाता है।

## मुख्य वेब जीवन संकेतों की निगरानी

web-vitals library इस्तेमाल करें: `import {onCLS, onINP, onLCP} from 'web-vitals'`। Google CrUX (Chrome User Experience Report) real-user data देता है। इन metrics को अपने analytics में track करें।

त्वरित जाँच

**Quiz:** CLS क्या मापता है?

- [ ] पृष्ठ लोड समय
- [ ] इनपुट प्रतिक्रिया समय
- [x] अप्रत्याशित लेआउट परिवर्तन
- [ ] Server response time

*Answer:* अप्रत्याशित लेआउट परिवर्तन. CLS मापता है कि page load के दौरान दिखने वाली content अप्रत्याशित रूप से कितनी खिसकती है।