फ़ील्ड में परफ़ॉर्मेंस को डीबग करना

डीबग की जानकारी के साथ परफ़ॉर्मेंस डेटा को एट्रिब्यूट करने का तरीका जानें ताकि आपको असली उपयोगकर्ता की समस्याओं को पहचानने और उन्हें ठीक करने में मदद मिल सके

Philip Walton

Google, परफ़ॉर्मेंस को मेज़र और डीबग करने के लिए दो कैटगरी के टूल उपलब्ध कराता है:

• लैब टूल: लाइटहाउस जैसे टूल, जहां आपका पेज किसी यह एक सिम्युलेशन सिस्टम है, जो कई तरह की स्थितियों की नकल कर सकता है. जैसे, नेटवर्क और कम सुविधाओं वाले मोबाइल डिवाइस से कनेक्ट करता है.
• Field Tools: Chrome के उपयोगकर्ता अनुभव जैसे टूल शिकायत करें (CrUX) डिज़ाइन किया गया है, जो Chrome से मिले, असल उपयोगकर्ता के कुल डेटा पर आधारित है. (ध्यान दें कि PageSpeed जैसे टूल से रिपोर्ट किया गया फ़ील्ड डेटा अहम जानकारी और Search Console को यहां से लिया गया है CrUX डेटा.)

फ़ील्ड टूल ज़्यादा सटीक डेटा देते हैं. हालांकि, ऐसा डेटा जो बताता है कि असल में असली उपयोगकर्ताओं को मिलने वाले अनुभव—लैब टूल आम तौर पर, आपकी पहचान करने और उस समस्या को ठीक करने में समस्याएं.

CrUX डेटा से, आपके पेज की असली परफ़ॉर्मेंस के बारे में पता चलता है. हालांकि, ऐसा हो सकता है कि CrUX स्कोर से, आपको अपनी परफ़ॉर्मेंस को बेहतर बनाने का तरीका जानने में मदद न मिले परफ़ॉर्मेंस.

वहीं दूसरी ओर, लाइटहाउस समस्याओं का पता लगाकर उन्हें ठीक करता है सुधार करने के सुझाव. हालांकि, लाइटहाउस से आपको सिर्फ़ सुझाव मिलेंगे का पता लगाया जाता है. इसमें किसी समस्या का पता नहीं चला जो सिर्फ़ उपयोगकर्ता के इंटरैक्शन, जैसे कि स्क्रोल करने या क्लिक करने से दिखती हैं बटन पर क्लिक करें.

इससे एक अहम सवाल उठता है: किस तरह की क्वेरी के लिए डीबग करने की जानकारी हासिल की जा सकती है वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी या फ़ील्ड के असली उपयोगकर्ताओं की अन्य परफ़ॉर्मेंस मेट्रिक?

इस पोस्ट में विस्तार से बताया गया है कि अतिरिक्त जानकारी इकट्ठा करने के लिए, किन एपीआई का इस्तेमाल किया जा सकता है मौजूदा Core Web Vitals मेट्रिक के लिए, डीबग करने की जानकारी को और इस डेटा को इकट्ठा करने के आइडिया दिए गए हैं.

एट्रिब्यूशन और डीबग करने के लिए एपीआई

कुल लेआउट शिफ़्ट (सीएलएस)

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली सभी मेट्रिक में से, CLS ऐसी मेट्रिक है जिसमें फ़ील्ड में डीबग की जानकारी इकट्ठा करना सबसे ज़रूरी है. सीएलएस मेज़र किया जाता है यह काम करने के लिए प्रोत्साहित किया जाता है. वे कितनी दूर तक स्क्रोल करते हैं, किस पर क्लिक करते हैं वगैरह क्या लेआउट शिफ़्ट हो रहे हैं और कौनसे एलिमेंट शिफ़्ट हो रहे हैं.

PageSpeed Insights की यह रिपोर्ट देखें:

इसके सीएलएस की तुलना में, लैब (लाइटहाउस) के सीएलएस के लिए रिपोर्ट की गई वैल्यू फ़ील्ड (CrUX डेटा) काफ़ी अलग होता है. इसलिए, अगर आपने पेज में इस तरह का बहुत सारा इंटरैक्टिव कॉन्टेंट हो सकता है लाइटहाउस में टेस्ट करने पर, इसका इस्तेमाल नहीं किया जाता.

हालांकि, अगर आपको यह पता है कि उपयोगकर्ता के इंटरैक्शन से फ़ील्ड डेटा पर असर पड़ता है, तो यह जानने की ज़रूरत है कि पेज पर कौन से एलिमेंट 0.28 के स्कोर में बदलने के लिए शिफ़्ट हो रहे हैं वे 75वें पर्सेंटाइल पर हैं. LayoutShiftAttribution इंटरफ़ेस की मदद से ऐसा किया जा सकता है.

लेआउट शिफ़्ट एट्रिब्यूशन पाएं

LayoutShiftAttribution इंटरफ़ेस की हर layout-shift एंट्री पर उसका इंटरफ़ेस दिखता है. इसमें लेआउट में बदलाव नहीं होता एपीआई से उत्सर्जन होता है.

इन दोनों इंटरफ़ेस की पूरी जानकारी के लिए, डीबग लेआउट देखें शिफ़्ट में बदल सकते हैं. इस मकसद के लिए तो आपको यह जानने की आवश्यकता है कि एक डेवलपर के रूप में, पेज पर होने वाले हर लेआउट शिफ़्ट पर नज़र रखने के साथ-साथ यह भी देखा जा सकता है कि बदलाव हो रहे हैं.

यहां उदाहरण के तौर पर कुछ कोड दिए गए हैं, जो हर लेआउट शिफ़्ट के साथ-साथ एलिमेंट को लॉग करते हैं जिनमें बदलाव हुआ है:

new PerformanceObserver((list) => {
  for (const {value, startTime, sources} of list.getEntries()) {
    // Log the shift amount and other entry info.
    console.log('Layout shift:', {value, startTime});
    if (sources) {
      for (const {node, curRect, prevRect} of sources) {
        // Log the elements that shifted.
        console.log('  Shift source:', node, {curRect, prevRect});
      }
    }
  }
}).observe({type: 'layout-shift', buffered: true});

डेटा को मेज़र करना और उसे आपके Analytics टूल पर भेजना शायद सही नहीं है होने वाले हर लेआउट शिफ़्ट को; हालांकि, सभी शिफ़्ट पर नज़र रखकर, सबसे खराब बदलावों को ट्रैक कर सकते हैं और सिर्फ़ उनकी जानकारी रिपोर्ट कर सकते हैं.

इसका मकसद हर लेआउट शिफ़्ट की पहचान करना और उसे ठीक करना नहीं है हर उपयोगकर्ता; इसका मकसद उन बदलावों की पहचान करना है जो आपकी ऑडियंस की उपयोगकर्ताओं से इकट्ठा किया जाता है और इस तरह से 75वें पर्सेंटाइल पर आपके पेज के सीएलएस में सबसे ज़्यादा योगदान दिया जाता है.

इसके अलावा, आपको हर बार सबसे बड़े सोर्स एलिमेंट को कंप्यूट करने की ज़रूरत नहीं है Shift के साथ, आपको ऐसा सिर्फ़ तब करना होगा, जब आप सीएलएस वैल्यू को Analytics टूल.

नीचे दिया गया कोड, योगदान देने वाली layout-shift एंट्री की सूची लेता है CLS में बदल देता है और सबसे बड़ी शिफ़्ट के साथ सबसे बड़े सोर्स एलिमेंट को लौटाता है:

function getCLSDebugTarget(entries) {
  const largestEntry = entries.reduce((a, b) => {
    return a && a.value > b.value ? a : b;
  });
  if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
    const largestSource = largestEntry.sources.reduce((a, b) => {
      return a.node && a.previousRect.width * a.previousRect.height >
          b.previousRect.width * b.previousRect.height ? a : b;
    });
    if (largestSource) {
      return largestSource.node;
    }
  }
}

सबसे ज़्यादा बदलाव में योगदान देने वाले सबसे बड़े एलिमेंट की पहचान करने के बाद, तो अपने ऐनलिटिक्स टूल में उसकी शिकायत करें.

किसी पेज के सीएलएस में सबसे ज़्यादा योगदान देने वाला एलिमेंट लेकिन यदि आप उन तत्वों को सभी उपयोगकर्ताओं में एग्रीगेट करते हैं, तो बदलने वाले ऐसे एलिमेंट की सूची जनरेट कर सकते हैं जो सबसे ज़्यादा उपयोगकर्ताओं पर असर डालते हैं.

जब आप उन बदलावों की असल वजह की पहचान करके उसे ठीक कर लेते हैं एलिमेंट, आपका Analytics कोड छोटे बदलावों को "सबसे खराब" के तौर पर रिपोर्ट करना शुरू कर देगा आपके पेजों के लिए शिफ़्ट में बदलाव किए गए हैं. आख़िर में, रिपोर्ट किए गए सभी शिफ़्ट इतने छोटे होंगे कि आपकी साइट के पेज "अच्छा" थ्रेशोल्ड 0.1!

कुछ अन्य मेटाडेटा, जिन्हें सबसे बड़े बदलाव के साथ कैप्चर करने में मदद मिल सकती है सोर्स एलिमेंट है:

• सबसे बड़े बदलाव का समय
• सबसे बड़े बदलाव के समय का यूआरएल पाथ (उन साइटों के लिए जिन्हें डाइनैमिक तौर पर अपडेट करने के लिए किया जा सकता है, जैसे कि सिंगल पेज ऐप्लिकेशन).

सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)

फ़ील्ड में एलसीपी को डीबग करने के लिए, आपको जिस मुख्य जानकारी की ज़रूरत होती है वह एलिमेंट, उस खास एलिमेंट के लिए सबसे बड़ा एलिमेंट (एलसीपी कैंडिडेट एलिमेंट) था पेज लोड होता है.

ध्यान दें कि ऐसा किया जा सकता है. दरअसल, यह आम बात है कि एलसीपी उम्मीदवार का एलिमेंट हर उपयोगकर्ता के लिए अलग-अलग होगा, भले ही वह एलिमेंट एक जैसा हो करें.

ऐसा कई वजहों से हो सकता है:

• उपयोगकर्ता के डिवाइसों की स्क्रीन का रिज़ॉल्यूशन अलग-अलग होता है. इस वजह से, दोनों में अलग-अलग रिज़ॉल्यूशन दिखता है पेज लेआउट इस्तेमाल किए जा सकते हैं और व्यूपोर्ट में अलग-अलग एलिमेंट दिख रहे हैं.
• उपयोगकर्ता हमेशा उन पेजों को लोड नहीं करते जिन्हें सबसे ऊपर तक स्क्रोल किया जाता है. अक्सर लिंक फ़्रैगमेंट आइडेंटिफ़ायर या फिर टेक्स्ट फ़्रैगमेंट, जिसका मतलब है कि ऐसा किया जा सकता है अपने पेजों को लोड करने और पेज पर किसी भी स्क्रोल पोज़िशन पर दिखाने के लिए.
• कॉन्टेंट, मौजूदा उपयोगकर्ता के हिसाब से बनाया जा सकता है. इसलिए, एलसीपी कैंडिडेट एलिमेंट भी ऐसा हो सकता है एक-दूसरे के लिए बहुत अलग हो सकता है.

इसका मतलब है कि यह अनुमान नहीं लगाया जा सकता कि कौनसे एलिमेंट या एलिमेंट का सेट किसी खास पेज के लिए, एलसीपी उम्मीदवार सबसे ज़्यादा इस्तेमाल किया जाएगा. आपको करना होगा और रीयल-उपयोगकर्ता के व्यवहार के आधार पर उसका आकलन करें.

एलसीपी उम्मीदवार के बारे में बताएं

JavaScript में एलसीपी कैंडिडेट एलिमेंट का पता लगाने के लिए, सबसे बड़े Contentful Paint API, उसी एपीआई का इस्तेमाल करें जिसका इस्तेमाल एलसीपी टाइम वैल्यू तय करने के लिए किया जाता है.

largest-contentful-paint एंट्री को देखते समय, यह पता लगाया जा सकता है कि आखिरी एंट्री की element प्रॉपर्टी देखकर मौजूदा एलसीपी उम्मीदवार का एलिमेंट:

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];

  console.log('LCP element:', lastEntry.element);
}).observe({type: 'largest-contentful-paint', buffered: true});

एलसीपी उम्मीदवार के बारे में जानने के बाद, उसे अपने ऐनलिटिक्स टूल पर भेजा जा सकता है साथ ही, मेट्रिक की वैल्यू भी सेट की जा सकती है. सीएलएस की तरह ही, इससे आपको यह समझने में मदद मिलेगी कि एलिमेंट को ऑप्टिमाइज़ करना सबसे पहले ज़रूरी होता है.

एलसीपी कैंडिडेट एलिमेंट के अलावा, इसका इस्तेमाल करके, एलसीपी सब-पार्ट समय, जो काम का हो सकता है जो आपकी साइट के लिए काम के हैं.

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

आईएनपी के लिए फ़ील्ड में कैप्चर करने के लिए सबसे ज़रूरी जानकारी ये हैं:

1. किस एलिमेंट के साथ इंटरैक्ट किया गया है
2. यह इस तरह का इंटरैक्शन क्यों था
3. यह इंटरैक्शन कब हुआ

धीमे इंटरैक्शन की एक बड़ी वजह, ब्लॉक किया गया मुख्य थ्रेड है. यह थ्रेड, सामान्य हो सकते हैं. यह जानना कि सबसे धीमे इंटरैक्शन पेज लोड होने के दौरान होता है. इससे यह तय करने में मदद मिलती है कि समस्या को कैसे ठीक करने की ज़रूरत है उस समस्या को हल कर सकें.

आईएनपी मेट्रिक, इंटरैक्शन—जिसमें किसी भी रजिस्टर किए हुए इवेंट लिसनर को चलाने में लगने वाला समय शामिल है यह भी जानें कि सभी इवेंट लिसनर के बाद, अगले फ़्रेम को पेंट करने में कितना समय लगता है चला चुके हैं. इसका मतलब है कि आईएनपी के लिए यह जानना वाकई काम का है कि कौनसा टारगेट की वजह से एलिमेंट में देरी हो सकती है और हमें यह भी पता चल सकता है कि किस तरह के इंटरैक्शन वे हैं.

यह कोड, आईएनपी एंट्री के टारगेट एलिमेंट और समय को लॉग करता है.

function logINPDebugInfo(inpEntry) {
  console.log('INP target element:', inpEntry.target);
  console.log('INP interaction type:', inpEntry.name);
  console.log('INP time:', inpEntry.startTime);
}

ध्यान दें कि यह कोड नहीं दिखाता कि यह कैसे तय किया जाए कि कौनसी event एंट्री आईएनपी है है, क्योंकि तर्क ज़्यादा ज़रूरी है. हालांकि, नीचे दिए गए सेक्शन में, का इस्तेमाल करके यह जानकारी कैसे पाएं web-vitals JavaScript लाइब्रेरी पर जाएं.

वेब-वाइटल JavaScript लाइब्रेरी के साथ इस्तेमाल

पिछले सेक्शन में, कैप्चर करने के लिए कुछ सामान्य सुझाव और कोड के उदाहरण दिए गए हैं डीबग की जानकारी का इस्तेमाल करें.

वर्शन 3 से, web-vitals JavaScript लाइब्रेरी में एक एट्रिब्यूशन शामिल होता है उसे बनाने इस तरह की पूरी जानकारी दिखाता है और कुछ और भी सिग्नल भी भेजे जाएंगे.

यहां दिए गए कोड के उदाहरण में, अतिरिक्त इवेंट सेट करने का तरीका बताया गया है पैरामीटर (या कस्टम डाइमेंशन) में डीबग स्ट्रिंग से परफ़ॉर्मेंस की मूल वजह का पता लगाने में मदद मिलती है समस्याएं.

import {onCLS, onINP, onLCP} from 'web-vitals/attribution';

function sendToGoogleAnalytics({name, value, id, attribution}) {
  const eventParams = {
    metric_value: value,
    metric_id: id,
  }

  switch (name) {
    case 'CLS':
      eventParams.debug_target = attribution.largestShiftTarget;
      break;
    case 'LCP':
      eventParams.debug_target = attribution.element;
      break;
    case 'INP':
      eventParams.debug_target = attribution.interactionTarget;
      break;
  }

  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/ga4
  gtag('event', name, eventParams);
}

onCLS(sendToGoogleAnalytics);
onLCP(sendToGoogleAnalytics);
onFID(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);

यह कोड खास तौर पर Google Analytics के लिए है, लेकिन आम तौर पर इस्तेमाल किए जाने वाले आइडिया का इस्तेमाल करना चाहिए टूल का इस्तेमाल भी कर सकते हैं.

यह कोड सिर्फ़ एक डीबग सिग्नल पर रिपोर्ट करने का तरीका दिखाता है, लेकिन इससे कई अलग-अलग सिग्नल को इकट्ठा और रिपोर्ट किया जा सकता है. मेट्रिक के हिसाब से फ़िल्टर करें.

उदाहरण के लिए, आईएनपी को डीबग करने के लिए, हो सकता है कि आप एलिमेंट को इसके साथ इंटरैक्ट किया गया, इंटरैक्शन टाइप, समय, loadState, इंटरैक्शन के चरण वगैरह शामिल हैं (जैसे, लंबी ऐनिमेशन फ़्रेम का डेटा).

web-vitals एट्रिब्यूशन बिल्ड से, एट्रिब्यूशन की ज़्यादा जानकारी मिलती है, जैसा कि आईएनपी के लिए यहां दिए गए उदाहरण में दिखाया गया है:

import {onCLS, onINP, onLCP} from 'web-vitals/attribution';

function sendToGoogleAnalytics({name, value, id, attribution}) {
  const eventParams = {
    metric_value: value,
    metric_id: id,
  }

  switch (name) {
    case 'INP':
      eventParams.debug_target = attribution.interactionTarget;
      eventParams.debug_type = attribution.interactionType;
      eventParams.debug_time = attribution.interactionTime;
      eventParams.debug_load_state = attribution.loadState;
      eventParams.debug_interaction_delay = Math.round(attribution.inputDelay);
      eventParams.debug_processing_duration = Math.round(attribution.processingDuration);
      eventParams.debug_presentation_delay =  Math.round(attribution.presentationDelay);
      break;

    // Additional metric logic...
  }

  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/ga4
  gtag('event', name, eventParams);
}

onCLS(sendToGoogleAnalytics);
onLCP(sendToGoogleAnalytics);
onFID(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);

वेब-वाइटल एट्रिब्यूशन देखें दस्तावेज़ डीबग सिग्नल की पूरी सूची दिखाता है.

डेटा की रिपोर्ट करना और उसे विज़ुअलाइज़ करना

मेट्रिक की वैल्यू के साथ-साथ डीबग की जानकारी इकट्ठा करने के बाद, तो आपका अगला कदम है डेटा को इकट्ठा करके पैटर्न और ट्रेंड के बारे में बात करते हैं.

जैसा कि पहले बताया गया है, ज़रूरी नहीं है कि आपको हर समस्या को हल करना हो करना चाहते हैं, खास तौर पर तब, जब आपको उन समस्याओं को हल करना हो. लोगों की सबसे ज़्यादा संख्या पर असर पड़ रहा है. इसमें भी समस्याएं हो सकती हैं जो आपकी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के स्कोर पर सबसे ज़्यादा खराब असर डालती हैं.

GA4 के लिए, क्वेरी करने और डेटा को विज़ुअलाइज़ करने के तरीके के बारे में बताने वाला लेख पढ़ें. BigQuery.

खास जानकारी

उम्मीद है कि इस पोस्ट से आपको उन खास तरीकों के बारे में जानकारी मिलेगी जिनसे डीबग की जानकारी पाने के लिए, मौजूदा परफ़ॉर्मेंस एपीआई और web-vitals लाइब्रेरी का इस्तेमाल करें. इसकी मदद से, फ़ील्ड में असल उपयोगकर्ताओं की विज़िट के आधार पर परफ़ॉर्मेंस का विश्लेषण किया जा सकता है. हालांकि, यह इस गाइड में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी शामिल होती है. साथ ही, ये सिद्धांत डीबग करने पर भी लागू होते हैं किसी भी ऐसी परफ़ॉर्मेंस मेट्रिक को जोड़ना जिसे JavaScript में मेज़र किया जा सके.

अगर आपने हाल ही में परफ़ॉर्मेंस मेज़र करना शुरू किया है और आपने पहले से ही अगर आपको Google Analytics का इस्तेमाल करना है, तो वेब की परफ़ॉर्मेंस की अहम जानकारी देने वाले रिपोर्ट टूल से आपको क्योंकि यह पहले से ही Core Web के लिए डीबग की जानकारी की रिपोर्टिंग का काम करता है ज़रूरी जानकारी वाली मेट्रिक.

अगर आप आंकड़ों के वेंडर हैं और आपको अपने प्रॉडक्ट और अपने उपयोगकर्ताओं को डीबग करने की ज़्यादा जानकारी दें, तो इनमें से कुछ यहां बताई गई तकनीकों का इस्तेमाल करें, लेकिन खुद को सिर्फ़ बताए गए आइडिया तक सीमित न रखें यहां. यह पोस्ट, आम तौर पर सभी Analytics टूल के लिए है; हालांकि, अलग-अलग आंकड़े वाले टूल, आपकी रिपोर्ट को कैप्चर और रिपोर्ट कर सकते हैं. डीबग करने की ज़्यादा जानकारी.

आखिर में, अगर आपको लगता है कि किसी वजह से इन मेट्रिक को डीबग करने में अनुपलब्ध सुविधाओं या जानकारी से संबंधी अपने आप फ़ीडबैक इस पते पर भेजें web-vitals-feedback@googlegroups.com.