क्या मापें: उपयोगकर्ता-केंद्रित प्रदर्शन के लिए मुख्य मेट्रिक्स (Measuring What Matters User Centric Performance)

उपयोगकर्ता-केंद्रित प्रदर्शन माप

उपयोगकर्ता-केंद्रित प्रदर्शन माप इस पर आधारित नहीं है कि सिस्टम ट्रैफ़िक उत्पन्न करता है या तकनीकी रूप से लोड किया गया है; यह देखता है कि क्या लोग अपने लक्ष्यों को जल्दी, आसानी से, विश्वसनीय रूप से और संतोषजनक प्राप्त करते हैं। सबसे शक्तिशाली माप प्रणालियाँ व्यवहार संबंधी डेटा, उपयोगकर्ता की धारणा, व्यावसायिक परिणाम और तकनीकी प्रदर्शन को एक साथ पढ़ती हैं।

1. उपयोगकर्ता व्यवहार मेट्रिक्स

ये दिखाते हैं कि उपयोगकर्ता वास्तव में क्या करते हैं:

• कार्य पूर्णता दर: उन उपयोगकर्ताओं का प्रतिशत जिन्होंने किसी परिभाषित कार्य को सफलतापूर्वक पूरा किया।
• कार्य अवधि: लक्ष्य तक पहुँचने के लिए आवश्यक समय।
• त्रुटि दर: विफल कार्रवाइयों, सत्यापन त्रुटियों, या सिस्टम त्रुटियों की आवृत्ति।
• त्रुटि पुनर्प्राप्ति दर: उन उपयोगकर्ताओं का प्रतिशत जो त्रुटि के बाद ठीक हो गए और कार्य पूरा कर लिया।
• सुविधा अपनाना: वह दर जिस पर पात्र उपयोगकर्ता किसी निश्चित अवधि में सुविधा का उपयोग करते हैं।
• फ़नल परित्याग: जहां उपयोगकर्ता बहु-चरणीय प्रक्रिया में छोड़ देते हैं।
• **मूल्यांकन का समय:**पंजीकरण या प्रवेश और पहले सार्थक परिणाम के बीच का समय।

किसी विशिष्ट उपयोगकर्ता लक्ष्य से जुड़े होने पर व्यवहारिक मेट्रिक्स सबसे अच्छा काम करते हैं - उदाहरण के लिए, केवल "क्लिक बढ़ाएं" के बजाय "पूर्ण चेकआउट"। GitLab का UX फ्रेमवर्क कार्य पूर्णता, कार्य समय, त्रुटियाँ, प्रथम-क्लिक सटीकता और सुविधा अपनाने को प्रमुख व्यवहारिक मेट्रिक्स के रूप में मानता है। handbook.gitlab

2. उपयोगकर्ता धारणा मेट्रिक्स

एनालिटिक्स दिखाता है क्या होता है; रवैया मेट्रिक्स क्यों को समझाने में मदद करते हैं:

• ग्राहक संतुष्टि (CSAT): वे अनुभव से कितने संतुष्ट थे।
• उपयोग में आसानी: उत्पाद का उपयोग करना कितना आसान लगता है।
• ग्राहक प्रयास स्कोर (सीईएस): उनका मानना ​​है कि उन्होंने जो प्रयास खर्च किया है।- अनुमानित दक्षता: क्या उत्पाद समय बचाता है।
• नेट प्रमोटर स्कोर (एनपीएस): उत्पाद की अनुशंसा करने की संभावना।
• अनुमानित उपयोगिता: क्या यह एक सार्थक समस्या का समाधान करता है।

किसी उत्पाद में कार्य पूरा होने की दर उच्च हो सकती है लेकिन फिर भी निराशा या अनावश्यक रूप से कठिनाई महसूस हो सकती है। इसलिए, व्यवहारिक और व्यवहार संबंधी उपायों का एक साथ मूल्यांकन किया जाना चाहिए। handbook.gitlab

3. प्रतिधारण और मूल्य मेट्रिक्स

इनसे पता चलता है कि उत्पाद निरंतर मूल्य प्रदान करता है या नहीं:

• सक्रियण दर: पहली सार्थक कार्रवाई पूरी करने वाले नए उपयोगकर्ताओं का प्रतिशत।
• प्रतिधारण दर: उन उपयोगकर्ताओं का प्रतिशत जो एक निश्चित अवधि के बाद वापस लौटते हैं और सक्रिय रहते हैं।
• मंथन दर: उन उपयोगकर्ताओं का प्रतिशत जो उत्पाद का उपयोग बंद कर देते हैं।
• डीएयू/डब्ल्यूएयू/एमएयू: दैनिक, साप्ताहिक और मासिक सक्रिय उपयोगकर्ता।
• चिपकने की क्षमता: आमतौर पर DAU÷MAU अनुपात के रूप में अनुमानित किया जाता है।
• समूह प्रतिधारण: पंजीकरण की तारीख या सामान्य विशेषता के अनुसार समूहों की अलग ट्रैकिंग।
• रेफ़रल दर: उपयोगकर्ता कितनी बार दूसरों को रेफर करते हैं या आमंत्रित करते हैं।

एक कार्यात्मक संरचना: एक नॉर्थ स्टार मेट्रिक को परिभाषित करें जो उपयोगकर्ता को दिए गए मूल्य का प्रतिनिधित्व करता है, फिर दो-तीन इनपुट मेट्रिक्स चुनें जिन्हें टीमें प्रभावित कर सकती हैं। उदाहरण के लिए, एक सहयोग उत्पाद "साप्ताहिक सफल सहयोग" को अपने नॉर्थ स्टार के रूप में सूचीबद्ध करता है; प्रवर्तकों के रूप में सक्रियण, सुविधा अपनाने और प्रतिधारण का उपयोग कर सकते हैं। यूट्यूब

4. तकनीकी प्रदर्शन मेट्रिक्स

डिजिटल उत्पादों में, तकनीकी गति को उपयोगकर्ता के दृष्टिकोण से मापा जाना चाहिए:

उपयोगकर्ता अनुभव	उपयोगी मेट्रिक्स
प्रथम दृश्यता	पहला कंटेंटफुल पेंट (एफसीपी), सबसे बड़ा कंटेंटफुल पेंट (एलसीपी)
निश्चय	संचयी लेआउट शिफ्ट (सीएलएस)
सर्वर प्रतिक्रिया	पहली बाइट का समय (टीटीएफबी)
प्रवाह	फ़्रेम स्थिरता और एनीमेशन प्रतिक्रिया
विश्वसनीयता	क्रैश, विफल अनुरोध, आउटेज और त्रुटि दरें

वेब प्रदर्शन को नियंत्रित प्रयोगशाला परीक्षणों और वास्तविक उपयोगकर्ता निगरानी (आरयूएम) दोनों में मापा जाना चाहिए; क्योंकि डिवाइस, नेटवर्क, वैयक्तिकरण और इंटरैक्शन मूल रूप से अनुभव को बदल देते हैं। वेब

5. माप का एक व्यावहारिक सेट

अधिकांश टीमें पाँच मेट्रिक्स से शुरुआत कर सकती हैं:

1. एक मूल्य मीट्रिक: प्राथमिक परिणाम जिसके कारण उपयोगकर्ता आते हैं।
2. एक व्यवहारिक मीट्रिक: कार्य पूर्णता दर या कार्य अवधि।
3. एक धारणा मीट्रिक: सीएसएटी, सीईएस या उपयोग में आसानी।
4. एक प्रतिधारण मीट्रिक: सहगण प्रतिधारण या पुन: उपयोग।
5. एक विश्वसनीयता या प्रदर्शन मीट्रिक: त्रुटि दर, आईएनपी, एलसीपी या अपटाइम।

अच्छे मेट्रिक्स स्पष्ट, सामान्यीकृत, समय के साथ तुलनीय, सार्थक उपयोगकर्ता समूहों में विभाजित और कार्रवाई योग्य होने चाहिए। केवल कुल पृष्ठ दृश्य, डाउनलोड, पंजीकृत उपयोगकर्ता या सत्र अवधि पर निर्भर न रहें; ये सार्थक मूल्य उत्पन्न किए बिना बढ़ सकते हैं। यूट्यूब

उदाहरण

ऑनलाइन रिफंड सेवा के लिए:

• नॉर्थ स्टार: प्रति सक्रिय कर्मचारी के दावे सफलतापूर्वक लौटाए गए।
• व्यवहार: अनुरोध पूरा होने की दर और औसत जमा करने का समय।
• धारणा: शिपमेंट के बाद उपयोग में आसानी का स्कोर।
• प्रतिधारण: 90 दिनों के भीतर दूसरा अनुरोध सबमिट करने वाले कर्मचारियों का प्रतिशत।
• तकनीकी: प्लग लोडिंग के दौरान त्रुटि दर और आईएनपी।
• निदान: वाउचर सत्यापन चरण में परित्याग दर।यह संयोजन न केवल यह निर्धारित करता है कि कितने लोग प्रक्रिया में प्रवेश करते हैं; क्या वे इसे पूरा करने में सक्षम थे, अनुभव कैसा लगा, क्या वे वापस लौटे, और क्या तकनीकी समस्याएं सफलता में बाधा बनीं।

इस खंड में आवर्ती अवधारणाएँ```text

📦 Laboratuvar vs saha Kontrollü, tekrarlanabilir teşhis ile gerçek kullanıcı ortamındaki doğrulama.

📦 Core Web Vitals (CWV) LCP, INP ve CLS—yükleme, yanıt ve görsel kararlılık; gerçek kullanıcıların 75. yüzdeliğinde.

📦 FID → INP (Mart 2024) FID yalnızca ilk girdi gecikmesini ölçüyordu; INP ziyaret boyunca etkileşim yanıtını ölçer.

📦 RUM Gerçek kullanıcı izleme: cihaz, ağ, rota ve özellik boyutlarında production ölçümü.

📦 CrUX Chrome kullanıcı deneyimi raporu—uygun siteler için kamuya açık saha verisi.

📦 Performans bütçesi LCP/INP/CLS, JS ağırlığı, üçüncü taraf maliyeti ve iş akışı başarı limitleri.

📦 Attribution (ilişkilendirme) web-vitals attribution build: LCP öğesi, INP hedefi, LoAF ve alt faz süreleri.

## प्रयोगशाला परीक्षण और क्षेत्र माप

**प्रयोगशाला परीक्षण** उपयोगकर्ता-केंद्रित प्रदर्शन में उत्पाद को नियंत्रित, दोहराने योग्य स्थितियों में मापता है; **फ़ील्ड मापन** उपयोगकर्ताओं के वास्तविक वातावरण में प्रदर्शन का निरीक्षण करता है। समस्या का कारण जानने के लिए लैब के नतीजे आम तौर पर बेहतर होते हैं; फ़ील्ड परिणाम यह समझने के लिए बेहतर हैं कि उत्पाद दैनिक उपयोग में काम करता है या नहीं। [वेब.मिट](https://web.mit.edu/6.813/www/sp16/classes/11-experiment-design/)

### प्रयोगशाला परीक्षण

प्रयोगशाला परीक्षण उपयोगकर्ताओं, कार्यों, उपकरणों और स्थितियों को एक परिभाषित प्रोटोकॉल में रखता है।

विशिष्ट आयाम:

- कार्य पूर्णता दर.
- कार्यालय की अवधि।
- त्रुटि आवृत्ति और पुनर्प्राप्ति।
- नेविगेशन या क्लिक पथ।
- सबसे पहले सटीकता पर क्लिक करें।
- अनुमानित उपलब्धता और कार्यभार।
- कार्य के बाद संतुष्टि.
- डिज़ाइन संस्करणों के बीच तुलना।

**ताकतें:** उच्च नियंत्रण और दोहराव; प्रतिस्पर्धी डिज़ाइनों की तुलना करना आसान है; विशिष्ट इंटरफ़ेस समस्याओं को अलग करता है; प्रोटोटाइपिंग और नियंत्रित ए/बी शैली प्रयोगों के लिए उपयुक्त।

**सीमाएं:** प्रतिभागी अलग-अलग व्यवहार कर सकते हैं क्योंकि वे जानते हैं कि उन पर नजर रखी जा रही है; कृत्रिम कार्य वास्तविक प्राथमिकताओं को प्रतिबिंबित नहीं कर सकते हैं; एक शांत परीक्षण कक्ष प्रत्येक कार्यस्थल, नेटवर्क या तकनीकी स्थिति को पुन: उत्पन्न नहीं कर सकता है। यदि वास्तविक संदर्भ अधिक चुनौतीपूर्ण है तो लैब प्रयोज्यता को अधिक महत्व दे सकती है।

प्रयोगशाला और क्षेत्र प्रयोज्य परीक्षणों की तुलना करने वाले अध्ययनों में कोई सार्वभौमिक विजेता नहीं मिलता है: जब परिस्थितियाँ अनुकूल होती हैं, तो परिणाम समान हो सकते हैं; कठिन परिस्थितियों, खराब उपलब्धता या प्रतिस्पर्धी कार्यों में मतभेद उत्पन्न होते हैं। [pubmed.ncbi.nlm.nih](https://pubmed.ncbi.nlm.nih.gov/30487113/)

### फ़ील्ड मापफ़ील्ड माप वहां किया जाता है जहां उपयोगकर्ता सामान्य रूप से काम करते हैं, यात्रा करते हैं, खरीदारी करते हैं या उत्पाद का संचालन करते हैं। इसमें प्रत्यक्ष अवलोकन, प्रासंगिक साक्षात्कार, डायरी अध्ययन, दूरस्थ टेलीमेट्री, या क्षेत्र प्रयोज्य परीक्षण शामिल हो सकते हैं।

उपयोगी फ़ील्ड मेट्रिक्स: वास्तविक दुनिया मिशन की सफलता; रुकावटों सहित अवधि; पर्यावरण और नेटवर्क स्थितियाँ; डिवाइस/प्लेटफ़ॉर्म अंतर; त्रुटि आवृत्ति और गंभीरता; समाधान; पुन: उपयोग और प्रतिधारण; अंतराल, क्रैश, और विफल अनुरोध; वर्कफ़्लो के अनुपालन के बारे में उपयोगकर्ता टिप्पणियाँ।

**ताकतें:** प्रामाणिक व्यवहार और संदर्भ; ध्यान भटकाने से बुनियादी ढांचे या पर्यावरणीय उपकरणों के कारण होने वाली समस्याओं का पता चलता है; यह दर्शाता है कि उत्पाद वास्तविक दिनचर्या में एकीकृत है या नहीं। यह मोबाइल, कार्यस्थल, औद्योगिक, स्वास्थ्य देखभाल और स्थान-आधारित उत्पादों में विशेष रूप से मूल्यवान है।

**सीमाएँ:** चरों पर कम नियंत्रण; प्रतिभागियों की सीधे तुलना करना कठिन; डेटा अधिक शोर वाला हो सकता है; गोपनीयता और सहमति आवश्यकताएँ अधिक गंभीर हैं।

क्षेत्र यथार्थवाद में मजबूत है, प्रयोगशाला सटीकता और नियंत्रण में मजबूत है। [वेब.मिट](https://web.mit.edu/6.813/www/sp16/classes/11-experiment-design/)

### क्या मापा जाता है?

| प्रश्न | प्रयोगशाला माप | फ़ील्ड आयाम |
|---|---|---|
| क्या उपयोगकर्ता कार्य पूरा कर सकते हैं? | परिभाषित परिदृश्य में पूर्णता दर | वास्तविक कार्य के दौरान पूर्णता दर |
| वे कितनी कुशलता से काम करते हैं? | कार्य की अवधि, क्लिक, कीस्ट्रोक्स | आउटेज, ट्रांज़िशन और वर्कअराउंड सहित अवधि |
| क्या गलत होता है? | देखी गई त्रुटियाँ और असफल इंटरैक्शन | उत्पादन त्रुटियाँ, समर्थन अनुरोध, छोड़े गए कार्य |
| यह कैसी लगता है? | संतुष्टि, कार्यभार, कथित उपयोगिता | दीर्घकालिक संतुष्टि, विश्वास, हताशा, कथित मूल्य |
| क्या यह विश्वसनीय है? | नियंत्रित प्रतिक्रिया समय और डिवाइस परीक्षण | वास्तविक विलंबता, कनेक्शन भिन्नता, क्रैश और विफलताएं || क्या यह मूल्य उत्पन्न करता है? | त्वरित मिशन परिणाम | पुन: उपयोग, प्रतिधारण, अपनाना और व्यवसाय/उपयोगकर्ता परिणाम |

### अनुशंसित दृष्टिकोण

दोनों को लूप के रूप में उपयोग करें; केवल एक ही न चुनें:

1. **लैब में प्रारंभ करें**—स्पष्ट प्रयोज्य समस्याओं का पता लगाएं, विकल्पों की तुलना करें।
2. **क्षेत्र में माप**—प्रामाणिक परिस्थितियों में व्यवहार का परीक्षण करें।
3. **लैब पर लौटें**—महत्वपूर्ण क्षेत्र की समस्याओं के कारण की जांच करें।
4. **उत्पादन में सत्यापन करें**—विश्लेषण, फीडबैक और प्रदर्शन निगरानी के साथ।
5. **परिणामों को काटें**—डिवाइस, अनुभव, पहुंच की आवश्यकता, स्थान, कनेक्शन और कार्य का प्रकार।

उदाहरण: एक मोबाइल व्यय ऐप को लैब में 95% शिपिंग दर मिल सकती है। खराब रोशनी में या खराब मोबाइल नेटवर्क पर चिप्स की तस्वीरें खींचते समय फ़ील्ड ड्रॉपआउट को प्रकट कर सकती है। लैब इंटरफ़ेस समस्या को इंगित करता है; यह क्षेत्र उन पर्यावरणीय और तकनीकी स्थितियों को प्रकट करता है जो इसे महत्वपूर्ण बनाती हैं।

मूल सिद्धांत: **प्रयोगशाला कौशल का वर्णन करता है; फ़ील्ड वास्तविक दुनिया के प्रदर्शन को मान्य करता है**। एक विश्वसनीय उपयोगकर्ता-केंद्रित मूल्यांकन के लिए आमतौर पर दोनों की आवश्यकता होती है।

## कोर वेब वाइटल्स: प्रमुख मेट्रिक्स

**कोर वेब वाइटल्स (सीडब्ल्यूवी)** Google के उपयोगकर्ता-केंद्रित मेट्रिक्स हैं जो पेज अनुभव के तीन भागों- लोडिंग, प्रतिक्रिया और दृश्य स्थिरता का मूल्यांकन करते हैं। वर्तमान सेट **एलसीपी, आईएनपी और सीएलएस** है। [वेब](https://web.dev/articles/vitals)

| मीट्रिक | क्या उपाय | अच्छा लक्ष्य |
|---|---|---:|
| **सबसे बड़ा कंटेंटफुल पेंट (एलसीपी)** | मुख्य दृश्य सामग्री - नायक छवि, शीर्षक, या पाठ का बड़ा खंड - कितनी जल्दी प्रकट होती है | ≤ 2.5 सेकंड |
| **नेक्स्ट पेंट से इंटरेक्शन (आईएनपी)** | विज़िट के दौरान क्लिक, टैप और कीबोर्ड इंटरैक्शन पर दृश्य प्रतिक्रिया कितनी तेज़ है | ≤ 200 मिलीसेकंड |
| **संचयी लेआउट शिफ्ट (सीएलएस)** | पृष्ठ लोड या उपयोग किए जाने के दौरान कितनी दृश्य सामग्री अप्रत्याशित रूप से बदल जाती है | ≤ 0.1 |

### प्रत्येक मीट्रिक क्या कहता है?- **एलसीपी - लोड हो रहा है:** "क्या उपयोगकर्ता महत्वपूर्ण सामग्री तुरंत देख सकते हैं?"
- **आईएनपी - प्रतिक्रिया:** "क्या उपयोगकर्ताओं के इंटरैक्ट करने पर इंटरफ़ेस तुरंत प्रतिक्रिया देता है?"
- **सीएलएस - स्थिरता:** "क्या वे अप्रत्याशित स्क्रॉलिंग के बिना पृष्ठ को पढ़ और क्लिक कर सकते हैं?"

आईएनपी ने 2024 में **प्रथम इनपुट विलंब (एफआईडी)** का स्थान ले लिया है—आधिकारिक परिवर्तन **मार्च 12, 2024**। एफआईडी ने केवल प्रारंभिक इंटरैक्शन को मापा; आईएनपी पूरे दौरे के दौरान बातचीत की प्रतिक्रिया का मूल्यांकन करता है। सितंबर 2024 से ब्राउज़र टूल में FID समर्थन बंद कर दिया गया है। [dynatrace](https://www.dynatrace.com/knowledge-base/core-web-vitals/) · [developer.chrome](https://developer.chrome.com/docs/crux/release-notes)

### सीडब्ल्यूवी का मूल्यांकन कैसे किया जाता है?

वास्तविक उपयोगकर्ता डेटा **75. प्रतिशत** में, मोबाइल और डेस्कटॉप के लिए अलग-अलग मापें। किसी पृष्ठ को समग्र रूप से "अच्छी" सीडब्ल्यूवी रेटिंग प्राप्त करने के लिए, सभी तीन मेट्रिक्स को "अच्छी" सीमा को पूरा करना होगा। [वेब](https://web.dev/articles/vitals)

समस्या निदान के लिए लाइटहाउस और क्रोम डेवटूल उपयोगी हैं; वास्तविक उपयोगकर्ता फ़ील्ड डेटा डिवाइस, नेटवर्क और स्थानों पर वास्तविक प्रदर्शन दिखाता है। पेजस्पीड इनसाइट्स, CrUX और सर्च कंसोल इन परिणामों को ट्रैक करने में मदद करते हैं। [वेब](https://web.dev/articles/vitals)

### विशिष्ट सुधारात्मक कार्रवाइयां

- **एलसीपी:** दृश्यों को अनुकूलित करें, रेंडर ब्लॉकिंग संसाधनों को कम करें, सर्वर प्रतिक्रिया में सुधार करें, ऊपर की सामग्री को प्राथमिकता दें।
- **INP:** लंबे जावास्क्रिप्ट कार्यों को विभाजित करें, मुख्य थ्रेड कार्य को सीमित करें, ईवेंट हैंडलर को गति दें।
- **सीएलएस:** छवियों और विज्ञापनों के लिए स्थान आवंटित करें, मौजूदा सामग्री के ऊपर सामग्री न जोड़ें, फ़ॉन्ट और आकार ठीक करें।

सीडब्ल्यूवी मूल्यवान तकनीकी संकेतक हैं; लेकिन इसे उपयोगकर्ता-केंद्रित परिणामों जैसे कार्य पूर्णता, परित्याग, संतुष्टि और रूपांतरण के साथ जोड़ा जाना चाहिए। एक तेज़ पेज आवश्यक रूप से उपयोगी या सफल पेज नहीं होता है।## सबसे बड़ा कंटेंटफुल पेंट (एलसीपी)

**एलसीपी मापता है कि उपयोगकर्ता द्वारा पृष्ठ खोलने के बाद मुख्य दृश्य सामग्री कितनी जल्दी दिखाई देती है।** यह उस क्षण को रिकॉर्ड करता है जब व्यूपोर्ट में सबसे बड़ी छवि, वीडियो फ्रेम या टेक्स्ट के ब्लॉक का प्रतिपादन पूरा हो जाता है; अनुमानित लोडिंग गति का एक मजबूत संकेतक है। [वेब](https://web.dev/articles/lcp)

### एलसीपी के रूप में क्या गिना जाता है?

एलसीपी तत्व अक्सर: नायक या बैनर छवि; प्रमुख शीर्षक या पाठ का खंड; उत्पाद छवि; वीडियो पोस्टर या पहला दृश्यमान वीडियो फ़्रेम; यह सीएसएस से भरी हुई एक बड़ी छवि है।

एलसीपी **फर्स्ट कंटेंटफुल पेंट (एफसीपी)** से भिन्न है: एफसीपी किसी भी सामग्री के प्रकट होने के पहले क्षण को मापता है; एलसीपी उस क्षण का अनुमान लगाता है जब प्राथमिक सामग्री दृश्यमान हो जाती है। [वेब](https://web.dev/articles/lcp)

### एलसीपी सीमाएँ

| एलसीपी परिणाम | अनुभव |
|---|---|
| **2.5 सेकंड या उससे कम** | अच्छा |
| **2.5-4 सेकंड से अधिक** | सुधार होना चाहिए |
| **4 सेकंड से अधिक** | कमजोर |

**75% पेज लोड। प्रतिशत** पर विचार करें, कम से कम मोबाइल और डेस्कटॉप से ​​अलग - ताकि परिणाम अधिकांश उपयोगकर्ताओं का प्रतिनिधि हो, न कि केवल औसत। [वेब](https://web.dev/articles/lcp)

### धीमी एलसीपी का क्या कारण है?

एलसीपी में आम तौर पर **चार विलंब** होते हैं:

1. **सर्वर प्रतिक्रिया विलंब:** ब्राउज़र पहले HTML प्रतिक्रिया (TTFB) की प्रतीक्षा करता है।
2. **लोडिंग में देरी:** ब्राउज़र एलसीपी संसाधन को देर से खोजता है या देर से अनुरोध करना शुरू करता है।
3. **संसाधन लोडिंग समय:** छवियाँ, वीडियो, फ़ॉन्ट या अन्य सामग्री डाउनलोड होने में लंबा समय लगता है।
4. **रेंडर में देरी:** स्रोत तैयार है लेकिन जावास्क्रिप्ट, सीएसएस या अन्य कार्य स्क्रीन पर रेंडरिंग में देरी करते हैं। [डेवलपर.क्रोम](https://developer.chrome.com/docs/performance/insights/lcp-breakdown)HTTP आर्काइव वेब पंचांग 2024 के अनुसार, लगभग 73% मोबाइल पेजों पर, LCP तत्व एक छवि है; छवि-आधारित LCP टेक्स्ट-आधारित की तुलना में लगभग दोगुना धीमा होता है। ऊपर-द-फोल्ड LCP छवि में आलसी-लोडिंग को बंद करना और आवश्यक होने पर `fetchpriority="high"` के साथ नेटवर्क प्राथमिकता देना महत्वपूर्ण बजट को संरक्षित करता है।

### एलसीपी में सुधार कैसे करें?

- सर्वर प्रतिक्रिया में सुधार; प्रभावी कैशिंग या CDN का उपयोग करें.
- एलसीपी छवि को अनुकूलित और सही आकार दें।
- आधुनिक प्रारूपों और उचित संपीड़न का उपयोग करें।
- जब खोज में देरी हो, तो केवल महत्वपूर्ण एलसीपी संसाधन को प्रीलोड करें।
- तह के ऊपर वाली एलसीपी छवि को लोड करने में आलस्य न करें।
- रेंडर-ब्लॉकिंग सीएसएस और अनावश्यक जावास्क्रिप्ट को हटा दें।
- लंबे मुख्य थ्रेड कार्यों को कम करें।
- वेब फ़ॉन्ट लोड करते समय महत्वपूर्ण टेक्स्ट को तुरंत प्रदर्शित करें।
- अत्यधिक रीडायरेक्ट और महत्वपूर्ण अनुरोध श्रृंखलाओं से बचें।

कारण का निदान करने के लिए लाइटहाउस जैसे प्रयोगशाला उपकरणों का उपयोग करें; वास्तविक उपयोगकर्ता फ़ील्ड डेटा के साथ सुधार को सत्यापित करें। नियंत्रित परीक्षण में अच्छा दिखने वाला पेज अभी भी धीमे डिवाइस या नेटवर्क पर उपयोगकर्ताओं के लिए खराब एलसीपी उत्पन्न कर सकता है।

## एफआईडी, आईएनपी और सीएलएस

ये मेट्रिक्स अनुभव के दो अलग-अलग हिस्सों को कवर करते हैं: **प्रतिक्रियाशीलता**—पेज इनपुट पर कितनी जल्दी प्रतिक्रिया करता है—और **दृश्य स्थिरता**—क्या सामग्री वहीं रहती है जहां उपयोगकर्ता इसकी उम्मीद करते हैं।

### प्रथम इनपुट विलंब (एफआईडी)

**FID ने उपयोगकर्ता के पहले इंटरेक्शन और ब्राउज़र द्वारा उसे प्रोसेस करना शुरू करने के बीच की देरी को मापा।** इसने केवल प्रारंभिक इनपुट देरी को कैप्चर किया - उदाहरण के लिए, एक बटन टैप और इवेंट हैंडलर के शुरू होने के बीच।FID प्रारंभ में जावास्क्रिप्ट द्वारा अवरुद्ध पृष्ठों का पता लगाने के लिए उपयोगी था; लेकिन इसने पूर्ण अंतःक्रिया या उसके बाद की अंतःक्रियाओं को नहीं मापा। FID को अब **कोर वेब वाइटल के रूप में हटा दिया गया है और INP** द्वारा प्रतिस्थापित कर दिया गया है। [डेवलपर.क्रोम](https://developer.chrome.com/docs/crux/release-notes)

एफआईडी की वास्तुशिल्पीय कमी यह थी कि इसने डेवलपर्स को घटनाओं को एसिंक्रोनाइज़ करके कृत्रिम रूप से स्कोर में सुधार करने की अनुमति दी थी; जब पृष्ठभूमि में लंबे कार्य चल रहे थे तो उपयोगकर्ता को पृष्ठ सुस्त महसूस हो सकता था। आईएनपी इस अंधे स्थान को बंद कर देता है।

### नेक्स्ट पेंट से इंटरेक्शन (आईएनपी)

**INP मापता है कि पूरी यात्रा के दौरान उपयोगकर्ता की बातचीत पर दृश्य प्रतिक्रिया कितनी तेजी से होती है।** इनपुट विलंबता में इवेंट हैंडलर प्रोसेसिंग, रेंडर जॉब और अगले स्क्रीन अपडेट तक का समय शामिल है। [वेब](https://web.dev/articles/inp)

उदाहरण: नेविगेशन मेनू पर क्लिक करना; खोज फ़ील्ड में टाइप करना; कार्ट में जोड़ें को स्पर्श न करें; एक संवाद या पॉप-अप मेनू खोलना; फ़िल्टर या टैब का चयन करना.

| आईएनपी स्कोर | जवाबदेही |
|---|---|
| **≤ 200 एमएस** | अच्छा |
| **> 200 – 500 एमएस** | सुधार होना चाहिए |
| **>500 एमएस** | कमजोर |

अच्छा आईएनपी वास्तविक पृष्ठ विज़िट का **75% है। प्रतिशत**—आम तौर पर मोबाइल और डेस्कटॉप का मूल्यांकन अलग-अलग किया जाता है। [वेब](https://web.dev/articles/optimize-inp)

आईएनपी को तीन उपचरणों में विभाजित किया गया है: **इनपुट विलंबता** (यदि मुख्य थ्रेड व्यस्त है), **प्रतिपादन समय** (भारी ईवेंट हैंडलर), **प्रस्तुति विलंबता** (शैली/लेआउट/पेंट और बड़ा डोम)। अनुकूलन इस बात पर निर्भर करता है कि कौन सा चरण प्रभावी है।

#### आईएनपी में सुधार

- लंबे जावास्क्रिप्ट कार्यों को विभाजित करें (`scheduler.yield()` या शेड्यूलर एपीआई)।
- अनावश्यक जावास्क्रिप्ट और तृतीय-पक्ष स्क्रिप्ट को कम करें।
- इवेंट हैंडलर्स को छोटा और कुशल रखें।
- गैर जरूरी काम को बातचीत के बाद तक के लिए टाल दें।
- अत्यधिक DOM अपडेट से बचें।- कुशल प्रतिपादन और एनीमेशन तकनीकों का उपयोग करें।
- पेज लोड के दौरान मुख्य थ्रेड ब्लॉकिंग को कम करें।

**लॉन्ग एनिमेशन फ्रेम्स (एलओएएफ)** एपीआई आईएनपी का निदान करने के लिए 50 एमएस से अधिक के विज़ुअलाइज़ेशन अपडेट को उजागर करता है: अपराधी कोड को इनवोकर, स्क्रिप्ट प्रकार और `sourceURL` / वर्ण स्थिति के आधार पर चिह्नित करता है।

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

**सीएलएस दृश्य सामग्री की अप्रत्याशित गति को मापता है।** उच्च सीएलएस का अर्थ है बटन, पाठ, या छवियां प्रदर्शित होने के बाद बदल जाती हैं; उपयोगकर्ता अपना स्थान खो सकते हैं या गलत नियंत्रण पर क्लिक कर सकते हैं। [वेब](https://web.dev/articles/cls)

सामान्य कारण: बड़े आकार की छवि/वीडियो; मौजूदा सामग्री के शीर्ष पर रखा गया विज्ञापन या बैनर; आलसी लोडिंग फ़ॉन्ट टेक्स्ट का आकार बदलते हैं; गतिशील सूचनाएं; जावास्क्रिप्ट जो दृश्यमान होने के बाद लेआउट बदल देता है।

| सीएलएस स्कोर | दृश्य स्थिरता |
|---|---|
| **≤ 0.1** | अच्छा |
| **> 0.1 – 0.25** | सुधार होना चाहिए |
| **>0.25** | कमजोर |

सीएलएस एक इकाई रहित स्कोर है, समय माप नहीं। यह प्रभावित व्यूपोर्ट अनुपात और ऑफसेट दूरी दोनों को ध्यान में रखता है। [docs.newrelic](https://docs.newrelic.com/docs/new-relic-solutions/observability-maturity/digital-experience/l2-cwv-cls/)

#### सीएलएस में सुधार

- छवियों और वीडियो को `width` और `height` खोलें।
- विज्ञापन, एंबेड और गतिशील सामग्री के लिए स्थान आवंटित करें।
- पहले से दिखाई दे रही सामग्री के ऊपर सामग्री न डालें.
- महत्वपूर्ण फ़ॉन्ट प्रीलोड या पिन करें।
- एनिमेशन में लेआउट सुविधाओं के बजाय `transform` और `opacity` को प्राथमिकता दें।
- अंतिम सामग्री के समान आयाम वाले प्लेसहोल्डर का उपयोग करें।
- यदि आप `content-visibility: auto` का उपयोग करते हैं, तो स्क्रॉलिंग से बचने के लिए `contain-intrinsic-size` के साथ स्थान आरक्षित करें।

### व्यावहारिक भेद- **एफआईडी:** क्या ब्राउज़र ने पहले इंटरैक्शन को शीघ्रता से संसाधित किया? (ऐतिहासिक)
- **आईएनपी:** क्या पेज पूरी विजिट के दौरान होने वाली बातचीत पर तुरंत प्रतिक्रिया देता है?
- **सीएलएस:** क्या उपयोगकर्ताओं के पढ़ने और इंटरैक्ट करने के दौरान पृष्ठ दृष्टिगत रूप से स्थिर है?

वर्तमान कोर वेब वाइटल्स रिपोर्टिंग में **INP और CLS** पर ध्यान दें; पुरानी रिपोर्टों या ऐतिहासिक डेटा की व्याख्या करते समय एफआईडी अधिकतर सार्थक होती है।

## कोर वेब वाइटल्स से परे

एलसीपी, आईएनपी और सीएलएस अनिवार्य हैं; लेकिन यह प्रत्येक प्रदर्शन समस्या की व्याख्या नहीं करता है। सहायक मेट्रिक्स कारणों का निदान करते हैं; उत्पाद और व्यवसाय मेट्रिक्स दिखाते हैं कि तकनीकी सुधार वास्तव में उपयोगकर्ता के लिए काम करते हैं या नहीं।

### सहायक मेट्रिक्स और रिपोर्ट की व्याख्या करें

| मीट्रिक | क्या समझाने में मदद करता है |
|---|---|
| **पहला कंटेंटफुल पेंट (एफसीपी)** | पहली बार उपयोगकर्ता किसी पृष्ठ की सामग्री देखते हैं |
| **पहली बाइट का समय (टीटीएफबी)** | सर्वर, नेटवर्क और बैकएंड प्रतिक्रिया विलंबता |
| **कुल अवरोधन समय (टीबीटी)** | प्रयोगशाला परीक्षणों में मुख्य थ्रेड अवरोधन |
| **गति सूचकांक** | कितनी तेजी से दिखाई देने वाली सामग्री धीरे-धीरे प्रकट होती है |
| **वेल्ड वजन** | जावास्क्रिप्ट, सीएसएस, छवि, फ़ॉन्ट और तृतीय-पक्ष पेलोड आकार |
| **लंबे मिशन / LoAF** | जावास्क्रिप्ट और लंबे कीफ़्रेम मुख्य थ्रेड को अवरुद्ध कर रहे हैं |
| **त्रुटि और विफलता दर** | क्या अनुरोध, स्क्रिप्ट या महत्वपूर्ण वर्कफ़्लो विफल रहे |
| **परिवर्तन, परित्याग और मिशन की सफलता** | क्या प्रदर्शन उपयोगकर्ता के परिणामों को प्रभावित करता है |

FCP और TTFB LCP के निदान में विशेष रूप से उपयोगी हैं: TTFB सर्वर विलंबता को प्रकट कर सकता है, FCP रेंडर ब्लॉकिंग या समय से पहले रेंडरिंग समस्याओं को प्रकट कर सकता है। टीबीटी मूलतः एक **प्रयोगशाला निदान** है; फ़ील्ड INP को प्रतिस्थापित नहीं करता है. [वेब](https://web.dev/articles/user-केंद्रित-परफॉर्मेंस-मेट्रिक्स)

रिपोर्ट की व्याख्या करते समय:1. फ़ील्ड डेटा से प्रारंभ करें; प्रभावित पृष्ठ, उपकरण, भूगोल, ब्राउज़र और उपयोगकर्ता खंड ढूंढें।
2. औसत नहीं, 75वां प्रतिशत देखें।
3. "उपयोगकर्ता क्या अनुभव करते हैं" को "क्या कारण" से अलग करें।
4. कारण को पुन: उत्पन्न करने और अलग करने के लिए प्रयोगशाला उपकरणों का उपयोग करें।
5. केवल सबसे कम स्कोर वाले पृष्ठ ही नहीं; महत्वपूर्ण यात्राओं को प्रभावित करने वाले मुद्दों को प्राथमिकता दें।
6. परिकल्पना करें, लक्षित परिवर्तन करें, फिर से मापें।
7. सत्यापित करें कि परिवर्तन से प्रदर्शन और उपयोगकर्ता परिणाम, जैसे पूर्णता या रूपांतरण, दोनों में सुधार होता है।

लाइटहाउस स्कोर को लक्ष्य न समझें। लक्ष्य "100" नहीं है; वे वास्तविक उपयोगकर्ताओं के लिए तेज़, अधिक प्रतिक्रियाशील, अधिक स्थिर अनुभव हैं।

### क्लाइंट आर्किटेक्चर का विकास (संक्षिप्त)

एसपीए में, सॉफ्ट नेविगेशन एलसीपी को रीसेट नहीं करता है और सीएलएस जमा होना जारी रह सकता है। प्रायोगिक **सॉफ्ट नेविगेशन एपीआई** उपयोगकर्ता कार्रवाई + यूआरएल परिवर्तन + दृश्यमान पेंट स्थितियों के तहत सॉफ्ट नेविगेशन का पता लगाता है, जिससे आरयूएम में अंतरालीय एलसीपी को मापने का द्वार खुल जाता है। **सट्टा नियम एपीआई** के साथ प्रीरेंडर/प्रीफ़ेच एलसीपी को शून्य के करीब ला सकता है (ट्रैकिंग अनुभाग में रे-बैन उदाहरण)। **sGTM (सर्वर-साइड टैग मैनेजर)** ब्राउज़र से तृतीय-पक्ष टैग वेटिंग प्राप्त करने के लिए मुख्य थ्रेड और DNS/TLS लागत को कम करता है - सीधे INP और LCP में परिलक्षित होता है।

## प्रयोगशाला के उपकरण

### लाइटहाउस: प्रदर्शन लेखापरीक्षा

लाइटहाउस प्रदर्शन, पहुंच, एसईओ, सर्वोत्तम प्रथाओं और पीडब्ल्यूए सुविधाओं के लिए स्वचालित ऑडिट प्रदान करता है। प्रदर्शन रिपोर्ट में मेट्रिक्स, नैदानिक ​​जांच, अवसर और सुझाए गए सुधार लिंक शामिल हैं। [डेवलपर.क्रोम](https://developer.chrome.com/docs/devtools/lighthouse)

इसके लिए लाइटहाउस का उपयोग करें:

- पुल-अनुरोध या निर्माण नियंत्रण।
- प्रतिलिपि प्रस्तुत करने योग्य आधारभूत तुलना।
- रेंडर अवरोधक स्रोतों का पता लगाना।- अत्यधिक बड़ी छवियां और अप्रयुक्त जावास्क्रिप्ट ढूंढना।
- एलसीपी, सीएलएस, एफसीपी, टीबीटी और संबंधित लैब मेट्रिक्स पर शोध करना।
- कम या कोई साइट ट्रैफ़िक वाले पृष्ठों का परीक्षण करना।

सुसंगत स्थितियों के साथ चलाएँ-समान यूआरएल, डिवाइस इम्यूलेशन, नेटवर्क प्रोफ़ाइल, प्रमाणीकरण स्थिति और दोहराव। एकल रन को शोरगुल वाला मानें; मध्यस्थों या रुझानों को देखें. लाइटहाउस सीआई में, `numberOfRuns` (जैसे 3–5) और मीट्रिक-आधारित दावे स्कोर शोर के आधार पर अधिक विश्वसनीय गेट बनाते हैं।

### Chrome DevTools प्रदर्शन पैनल: गहन निदान और AI सहायता

प्रदर्शन पैनल एक ब्राउज़र ट्रेस रिकॉर्ड करता है जिसमें नेटवर्क गतिविधि, सीपीयू कार्य, जावास्क्रिप्ट निष्पादन, रेंडरिंग, लेआउट, पेंट और उपयोगकर्ता इंटरैक्शन शामिल हैं। लाइटहाउस वह उपकरण है जिसका उपयोग आप तब करते हैं जब आपको कोई लक्षण मिलता है लेकिन आपको सटीक अवरोधक गतिविधि ढूंढने की आवश्यकता होती है। [डेवलपर.क्रोम](https://developer.chrome.com/docs/devtools/performance/overview)

व्यावहारिक कार्यप्रवाह:

- पेज लोड या धीमी बातचीत को बचाएं।
- **अंतर्दृष्टि** दृश्य में एलसीपी चरण, रेंडर-अवरुद्ध अनुरोध, लेआउट-शिफ्ट अपराधी और लंबे कार्य देखें।
- मुख्य टाइमलाइन और फ्लेम चार्ट के लिए जिम्मेदार स्क्रिप्ट, शैली पुनर्गणना, लेआउट या पेंट ढूंढें।
- ट्रेस को नेटवर्क पैनल और प्रभावित DOM तत्व के साथ संबद्ध करें।
-सुधार के बाद दोबारा सेव करें।

Chrome DevTools सहेजे गए प्रदर्शन प्रोफ़ाइल के लिए AI सहायता भी प्रदान करता है। चयनित अंतर्दृष्टि की व्याख्या कर सकते हैं या गतिविधियों को ट्रैक कर सकते हैं और संभावित सुधारों का सुझाव दे सकते हैं; इसे एक विश्लेषण सहायता के रूप में उपयोग करें, प्रत्येक सुझाव को अपने ट्रेस और कोड के विरुद्ध सत्यापित करें। [डेवलपर.क्रोम](https://developer.chrome.com/docs/devtools/ai-assistance/performance) LoAF रजिस्टर INP अड़चन को कार्य और संसाधन स्थान तक सीमित कर देता है।

### वेबपेजटेस्ट: यथार्थवादी परीक्षण और उन्नत विश्लेषणवेबपेजटेस्ट स्थानों, ब्राउज़रों, उपकरणों, कनेक्शन प्रोफाइल और बार-बार चलने वाले यथार्थवादी, उन्नत परीक्षण के लिए उपयोगी है। **फ़िल्मस्ट्रिप** उपयोगकर्ता समय के साथ क्या देखते हैं; **झरना** अनुरोध निर्भरता, शेड्यूलिंग, प्राथमिकता और संसाधन विलंबता दिखाता है। [performance.shopify](https://performance.shopify.com/blogs/blog/how-to-test-with-webpagetest)

शोध करते समय इसका उपयोग करें:

- कुछ देश या क्षेत्र से धीमा प्रदर्शन.
- मोबाइल डिवाइस और धीमा नेटवर्क व्यवहार।
- पहली उपस्थिति के साथ दोबारा उपस्थिति।
- सीडीएन, डीएनएस, टीएलएस, सर्वर और कनेक्शन शेड्यूलिंग।
- दृश्य खोज और अनुरोध प्राथमिकता।
- तृतीय पक्ष स्क्रिप्ट और झरना बाधाएँ।
- दृश्य प्रगति, न कि केवल अंतिम स्कोर।
- तृतीय-पक्ष SPOF सिमुलेशन (टैग सर्वर डाउन होने पर महत्वपूर्ण पथ अवरुद्ध है या नहीं)।

## फ़ील्ड उपकरण

### `web-vitals.js` के साथ फ़ील्ड में CWV कैप्चर

`web-vitals` लाइब्रेरी ब्राउज़र में कोर वेब वाइटल्स को मापती है और परिणाम आपके एनालिटिक्स या ऑब्जर्वेबिलिटी सिस्टम को भेजती है। एक न्यूनतम आवेदन:```html
<script type="module">
  import {onCLS, onINP, onLCP}
    from 'https://unpkg.com/web-vitals@4?module';

  function sendToAnalytics(metric) {
    navigator.sendBeacon('/rum', JSON.stringify({
      name: metric.name,
      value: metric.value,
      id: metric.id,
      path: location.pathname
    }));
  }

  onCLS(sendToAnalytics);
  onINP(sendToAnalytics);
  onLCP(sendToAnalytics);
</script>
```आधिकारिक लाइब्रेरी एक **एट्रिब्यूशन** बिल्ड भी प्रदान करती है: LCP तत्व या संसाधन INP के लिए डिबग संदर्भ जोड़ता है, जैसे `inputDelay` / `processingDuration` / `presentationDelay`, `interactionTarget` और LoAF रिकॉर्ड। यह अपराधी को स्कोर के बजाय समन्वय देता है। [डेवलपर्स.google](https://developers.google.com/codelabs/chrome-web-vitals-js)

उत्पादन में गोपनीयता-सुरक्षित आयाम जोड़ें: पृष्ठ टेम्पलेट और रूट; डिवाइस वर्ग और कनेक्शन प्रकार; ब्राउज़र और ऑपरेटिंग सिस्टम; देश या क्षेत्र; संस्करण; लॉग इन/गुमनाम; प्रयोग या फीचर ध्वज.

जब तक आपकी गोपनीयता डिज़ाइन स्पष्ट रूप से इसकी अनुमति न दे, तब तक यूआरएल, उपयोगकर्ता आईडी, फ़ॉर्म सामग्री या अन्य व्यक्तिगत डेटा सबमिट न करें।

### CrUX और बाहरी डेटा

**क्रोम उपयोगकर्ता अनुभव रिपोर्ट (CrUX)** लोकप्रिय साइटों पर योग्य वास्तविक Chrome उपयोगकर्ताओं के अनुभव का प्रतिनिधित्व करती है। पेजस्पीड इनसाइट्स, सर्च कंसोल, CrUX API और BigQuery के माध्यम से LCP, INP, CLS और अन्य आयामों के लिए फ़ील्ड डेटा प्रदान करता है। [डेवलपर.क्रोम](https://developer.chrome.com/docs/crux)

CrUX इसके लिए मूल्यवान है: सार्वजनिक वेब के विरुद्ध बेंचमार्किंग; जांचें कि क्या प्रदर्शन संबंधी समस्याएं वास्तविक उपयोगकर्ताओं को प्रभावित करती हैं; यह सत्यापित करना कि क्या कोई रिलीज़ फ़ील्ड प्रदर्शन को बदलता है; मोबाइल-डेस्कटॉप तुलना; ऐतिहासिक रुझान.

CrUX की कवरेज और उपलब्धता सीमाएँ हैं; यह प्रत्येक उपयोगकर्ता या प्रत्येक पृष्ठ का प्रतिनिधित्व नहीं कर सकता है। 28-दिवसीय चलती औसत कल के वितरण का प्रभाव दिखाने में विफल रहती है। सटीक दर्शकों और उत्पाद-विशिष्ट आयामों के लिए प्रथम-पक्ष RUM के साथ उपयोग करें।

### वेब वाइटल्स RUM से परे

वास्तविक उपयोगकर्ता निगरानी को यह भी कैप्चर करना चाहिए:

- मार्ग परिवर्तन या एसपीए नेविगेशन समय (सॉफ्ट नेविगेशन के साथ बढ़ाया जा सकता है)।
- एपीआई विलंबता और विफल अनुरोध।- जावास्क्रिप्ट त्रुटियाँ और वादा अस्वीकृति।
- लंबे मिशन और लंबे कीफ़्रेम (LoAF)।
- फीचर के आधार पर इंटरेक्शन में देरी।
- खोजें, भुगतान, लॉगिन या अपलोड पूर्णता।
- क्रोध पर क्लिक करें, पुनः प्रयास करें और छोड़ दें।
- क्रैश, ऑफ़लाइन स्थिति और कनेक्शन परिवर्तन।
- जहां मापनयोग्य हो, पहुंच-योग्यता संबंधी विफलताएं।

उपयोगी प्रश्न सिर्फ यह नहीं है कि "क्या आईएनपी ख़राब है?" क्या नहीं है; "कौन सा इंटरेक्शन धीमा है, किन उपयोगकर्ताओं के लिए, किस संस्करण पर - और क्या यह कार्य पूरा होने में बाधा बन रहा है?"

माप के लिए जोड़े जाने पर तृतीय पक्ष मार्केटिंग/एनालिटिक्स स्क्रिप्ट विरोधाभासी रूप से INP/LCP को तोड़ सकती हैं। **sGTM** ब्राउज़र में दर्जनों स्क्रिप्ट को एक प्रथम-पक्ष स्ट्रीम में संक्षिप्त कर देता है; यह जेएस निष्पादन, डीएनएस और एसएसएल की लागत को क्लाउड पर ले जाता है - ताकि मीटरिंग स्वयं प्रदर्शन में जहर न डाले।

## बजट, अलर्ट और सतत निगरानी

प्रदर्शन बजट गुणवत्ता उद्देश्यों को लागू करने योग्य सीमाओं में परिवर्तित करते हैं। उपयोगकर्ता मेट्रिक्स और कारणों दोनों के लिए बजट परिभाषित करें:

- एलसीपी: 75वाँ प्रतिशत ≤ 2.5 सेकंड।
- आईएनपी: 75वाँ प्रतिशत ≤ 200 मिलीसेकंड।
- सीएलएस: 75वाँ प्रतिशतक ≤ 0.1।
- जावास्क्रिप्ट स्थानांतरण: मार्ग द्वारा अधिकतम पर सहमति।
- कुल पृष्ठ भार: डिवाइस वर्ग के अनुसार अधिकतम।
- तीसरे पक्ष के अनुरोध: अनुमोदित सूची और अधिकतम लागत।
- त्रुटि दर: अधिकतम स्वीकार्य प्रतिशत।
- महत्वपूर्ण कार्यप्रवाह सफलता: न्यूनतम पूर्णता दर।

तीन चेतावनी स्तरों का उपयोग करें:

- **चेतावनी:** मीट्रिक सीमा के निकट पहुँच रहा हूँ।
- **प्रतिगमन:** मीट्रिक सहमत प्रतिशत से अधिक होने के कारण खराब हो गई।
- **क्रिटिकल:** कोर वेब वाइटल या क्रिटिकल वर्कफ़्लो विफलता सीमा को पार कर गया है।

लाइटहाउस सीआई अभिकथन उदाहरण—स्कोर की तुलना में मीट्रिक-आधारित गेटों को प्राथमिकता दें:```json
{
  "ci": {
    "collect": {
      "url": ["http://localhost:3000/", "http://localhost:3000/blog"],
      "numberOfRuns": 3,
      "settings": { "preset": "desktop" }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "first-contentful-paint": ["warn", {"maxNumericValue": 2000}],
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}]
      }
    }
  }
}
```### सतत निगरानी उदाहरण

एक व्यावहारिक प्रणाली इस तरह काम कर सकती है:

1. लाइटहाउस प्रत्येक संस्करण में पृष्ठों के प्रतिनिधि सेट पर चलता है।
2. वेबपेजटेस्ट कई स्थानों और कनेक्शन प्रोफाइल से रात में चलता है।
3. `web-vitals.js` (यदि संभव हो तो एट्रिब्यूशन) उत्पादन से अज्ञात एलसीपी, आईएनपी और सीएलएस भेजता है।
4. डैशबोर्ड संस्करण, मार्ग, उपकरण और भूगोल के आधार पर परिणाम काटता है।
5. जब मोबाइल आईएनपी लगातार दो अवधियों में 15% तक खराब हो जाता है तो अलर्ट सक्रिय हो जाता है।
6. टीम DevTools + LoAF के साथ प्रभावित इंटरैक्शन की निगरानी करती है।
7. एक लंबे जावास्क्रिप्ट कार्य को छोटा करने के बाद, ट्रेस और फ़ील्ड डेटा दोनों को मान्य किया जाता है।
8. परिवर्तन तभी रखा जाता है जब प्रदर्शन में सुधार होता है और कार्य उपलब्धि/रूपांतरण में कमी नहीं आती है।

यह एक फीडबैक लूप बनाता है: **लाइटहाउस पता लगाता है, डेवटूल्स निदान करता है, वेबपेजटेस्ट तनाव परीक्षण करता है, आरयूएम सत्यापित करता है, बजट प्रतिगमन को रोकता है**।

### व्यवहार में निरंतर निगरानी (शॉर्ट केस नोट्स)

- **टैबूला:** प्रकाशक साइटों पर उच्च टीबीटी/आईएनपी; LoAF के साथ बॉटलनेक मार्किंग, थर्ड-पार्टी डाउनस्केलिंग और रेंडर इंजन रीडिज़ाइन।
- **फ़ोटोकासा:** एफआईडी अवधि के दौरान हरा; मार्च 2024 INP के बाद सर्च कंसोल में "सुधार की आवश्यकता/कमजोर"। गैलरी, मानचित्र और फ़िल्टर इंटरैक्शन में छिपी हुई क्लाइंट मंदी को RUM के साथ हल किया गया है।
- **रे-बैन:** सट्टा नियमों के साथ उत्पाद पृष्ठ प्रीरेंडर करें; एलसीपी ~43% गिरावट (उप 1एस) और पीडीपी रूपांतरण मोबाइल ~101%/डेस्कटॉप ~156% वृद्धि दर्ज की गई।
- **टी-मोबाइल:** एलसीपी 2 सेकंड से अधिक होने पर प्रत्येक 100 एमएस विलंब के लिए रूपांतरण में कमी और बाउंस में वृद्धि; उन्होंने गति को KPI में बदल दिया और विज़िट-टू-ऑर्डर रूपांतरण को ~60% तक बढ़ा दिया।

यह माप बोर्ड को हरा रंगने के लिए नहीं है; वास्तविक यात्राओं पर मिशन को संभव बनाना है।

## सबसे अधिक बार भ्रमित होने वाली जोड़ियां```text
❌ FID hâlâ güncel bir Core Web Vital’dır
✓ FID Mart 2024’te emekli oldu; odak INP’dedir (ziyaret boyunca yanıt)

❌ Yeşil Lighthouse skoru saha CWV’nin iyi olduğu anlamına gelir
✓ Lab teşhis eder; CrUX/RUM gerçek kullanıcı deneyimini doğrular

❌ Ortalama LCP “yeterince iyi”yi temsil eder
✓ 75. yüzdeliği mobil ve masaüstü ayrı izleyin

❌ TBT, INP’nin yerine geçer
✓ TBT lab teşhisidir; saha yanıtı için INP kullanın

❌ web-vitals skoru tek başına kök nedeni gösterir
✓ Attribution + LoAF etkileşim hedefi ve suçlu betiği gösterir

❌ CrUX dünkü deploy’u yansıtır
✓ CrUX ~28 günlük ortalamadır; anlık regresyon için birinci taraf RUM şarttır

चेकलिस्ट: जो मापना आवश्यक है उसे मापें

1. व्यवहार, धारणा, अवधारण और तकनीकी/विश्वसनीयता से एक नॉर्थ स्टार + एक मीट्रिक चुनें।
2. महत्वपूर्ण यात्राओं के लिए प्रयोगशाला परिदृश्य और क्षेत्र आयाम (डिवाइस, नेटवर्क, भूगोल, मार्ग) को परिभाषित करें।
3. एलसीपी, आईएनपी और सीएलएस के लिए अलग-अलग मोबाइल/डेस्कटॉप के लिए पी75 "अच्छी" सीमा तय करें।
4. एलसीपी को चार विलंबों में विभाजित करें (टीटीएफबी, खोज, डाउनलोड, रेंडर); INP को तीन चरणों में विभाजित करें.
5. प्रतिनिधि यूआरएल पर लाइटहाउस सीआई + वेबपेजटेस्ट चलाएं; माध्यिका/रुझान पढ़ें.
6. प्रोडक्शन में RUM को web-vitals (एट्रिब्यूशन पसंदीदा) + गोपनीयता-सुरक्षित आयामों के साथ स्थापित करें।
7. बेंचमार्किंग के लिए CrUX का उपयोग करें; प्रतिगमन और सुविधा निदान के लिए RUM पर भरोसा करें।
8. बजट और अलर्ट के तीन स्तरों को परिभाषित करें (अलर्ट / रिग्रेशन / क्रिटिकल); कार्य की सफलता या परिवर्तन द्वारा सुधार को मान्य करें।

यदि आप इन आठ प्रश्नों का उत्तर नहीं दे सकते हैं, तो आप अभी भी "स्कोर देख रहे हैं"; आप अभी तक उपयोगकर्ता-उन्मुख माप नहीं कर रहे हैं।

इस प्रकरण के मुख्य बिंदु

1. उपयोगकर्ता-केंद्रित माप व्यवहार, धारणा, अवधारण और तकनीकी प्रदर्शन को जोड़ता है - न कि केवल ट्रैफ़िक या लैब स्कोर को।
2. लैब क्षमता और कारण बताती है; फ़ील्ड वास्तविक दुनिया के प्रदर्शन को मान्य करता है; ये दोनों एक चक्र हैं.
3. वर्तमान कोर वेब वाइटल्स एलसीपी, आईएनपी और सीएलएस हैं; एफआईडी ऐतिहासिक है. पी75 पर थ्रेसहोल्ड: एलसीपी ≤ 2.5एस, आईएनपी ≤ 200एमएस, सीएलएस ≤ 0.1।
4. एलसीपी को चार विलंबों में विभाजित किया गया है, आईएनपी को तीन चरणों में; LoAF और एट्रिब्यूशन मूल कारण का श्रेय स्कोर के बजाय समन्वय को देते हैं।
5. सॉफ्ट नेविगेशन, स्पेकुलेशन रूल्स और एसजीटीएम जैसे वास्तुशिल्प उपकरण ब्लाइंड स्पॉट और थर्ड-पार्टी वेटिंग को बंद करने में मदद करते हैं।
6. बजट, अलर्ट और निरंतर निगरानी सुधार को स्थायी बनाती है; टैबूला, फ़ोटोकासा, रे-बैन और टी-मोबाइल दर्शाते हैं कि मापन व्यावसायिक परिणाम से जुड़ा हुआ है।

लक्ष्य बोर्ड को हरा करना नहीं है। लक्ष्य यह जानना है - और सचेत रूप से इंजीनियर करना है - कि क्या उपयोगकर्ता महत्वपूर्ण कार्यों को जल्दी, विश्वसनीय और संतोषजनक ढंग से पूरा कर सकते हैं।

अगला: हम कोर वेब वाइटल्स को "अच्छे मेट्रिक्स" से उत्पाद आवश्यकताओं, बजट और रिलीज़ गेट्स में बदल देंगे।