इस पेज का अनुवाद Cloud Translation API से किया गया है.

लेआउट शिफ़्ट को डीबग करें

लेआउट में होने वाले बदलावों की पहचान करने और उन्हें ठीक करने का तरीका जानें.

Katie Hempenius

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

टूलिंग

लेआउट इंस्टेंसेबिलिटी एपीआई

Layout Instability API, ब्राउज़र का एक ऐसा तरीका है जिसकी मदद से लेआउट में होने वाले बदलावों को मेज़र और रिपोर्ट किया जाता है. लेआउट शिफ़्ट डिबग करने के लिए उपलब्ध सभी टूल, जिसमें DevTools भी शामिल हैं. ये आखिरकार, Layout Instability API पर बनाए जाते हैं. हालांकि, Layout Instability API का सीधे तौर पर इस्तेमाल करना, डीबग करने का एक बेहतर टूल है. इसकी वजह यह है कि इसमें कई सुविधाएं हैं.

इस्तेमाल

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

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

इस स्क्रिप्ट को चलाते समय यह ध्यान रखें:

buffered: true विकल्प से पता चलता है कि PerformanceObserver को ब्राउज़र की परफ़ॉर्मेंस एंट्री बफ़र की जांच करनी चाहिए, ताकि ऑब्ज़र्वर के शुरू होने से पहले बनाई गई परफ़ॉर्मेंस एंट्री देखी जा सकें. इस वजह से, PerformanceObserver उन लेआउट शिफ़्ट की जानकारी देगा जो शुरू होने से पहले और बाद में हुए थे. कंसोल लॉग की जांच करते समय, इस बात का ध्यान रखें. लेआउट शिफ़्ट का शुरुआती असर रिपोर्टिंग बैकलॉग को दिखा सकता है. इससे, लेआउट शिफ़्ट में अचानक कोई बदलाव नहीं होगा.
परफ़ॉर्मेंस पर असर न पड़े, इसके लिए PerformanceObserver तब तक इंतज़ार करता है, जब तक मुख्य धागा, लेआउट में हुए बदलावों की रिपोर्ट करने के लिए, काम न कर रहा हो. इस वजह से, मुख्य थ्रेड के व्यस्त होने के आधार पर, लेआउट में बदलाव होने और कंसोल में उसे लॉग होने में थोड़ी देरी हो सकती है.
यह स्क्रिप्ट, उपयोगकर्ता के इनपुट के 500 मिलीसेकंड के अंदर हुए लेआउट शिफ़्ट को अनदेखा करती है. इसलिए, इन लेआउट शिफ़्ट को सीएलएस में नहीं गिना जाता.

लेआउट में हुए बदलावों की जानकारी, दो एपीआई के कॉम्बिनेशन का इस्तेमाल करके दी जाती है: LayoutShift और LayoutShiftAttribution इंटरफ़ेस. इनमें से हर इंटरफ़ेस के बारे में ज़्यादा जानकारी, यहां दिए गए सेक्शन में दी गई है.

LayoutShift

हर लेआउट शिफ़्ट की रिपोर्ट, LayoutShift इंटरफ़ेस का इस्तेमाल करके दी जाती है. किसी एंट्री का कॉन्टेंट ऐसा दिखता है:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

ऊपर दी गई एंट्री ऐसे लेआउट शिफ़्ट के बारे में बताती है जिस दौरान तीन डीओएम एलिमेंट की पोज़िशन बदल गई. इस लेआउट शिफ़्ट का लेआउट शिफ़्ट स्कोर 0.175 था.

ये LayoutShift इंस्टेंस की प्रॉपर्टी हैं, जो लेआउट शिफ़्ट को डीबग करने के लिए सबसे ज़्यादा काम की हैं:

प्रॉपर्टी	ब्यौरा
`sources`	`sources` प्रॉपर्टी में, लेआउट शिफ़्ट के दौरान मूव किए गए डीओएम एलिमेंट शामिल होते हैं. इस अरे में ज़्यादा से ज़्यादा पांच सोर्स शामिल हो सकते हैं. अगर लेआउट शिफ़्ट का असर पांच से ज़्यादा एलिमेंट पर पड़ता है, तो लेआउट शिफ़्ट के पांच सबसे बड़े सोर्स की रिपोर्ट की जाती है. इन सोर्स को लेआउट के स्थिर होने पर पड़ने वाले असर के हिसाब से मेज़र किया जाता है. इस जानकारी को LayoutShiftAttribution इंटरफ़ेस का इस्तेमाल करके रिपोर्ट किया जाता है. इस बारे में यहां ज़्यादा जानकारी दी गई है.
`value`	`value` प्रॉपर्टी, किसी खास लेआउट शिफ़्ट के लिए, लेआउट शिफ़्ट स्कोर को रिपोर्ट करती है.
`hadRecentInput`	`hadRecentInput` प्रॉपर्टी से पता चलता है कि उपयोगकर्ता के इनपुट के 500 मिलीसेकंड के अंदर, लेआउट शिफ़्ट हुआ है या नहीं.
`startTime`	`startTime` प्रॉपर्टी से पता चलता है कि लेआउट शिफ़्ट कब हुआ. `startTime` को मिलीसेकंड में दिखाया जाता है और इसे पेज लोड होने के समय के हिसाब से मेज़र किया जाता है.
`duration`	`duration` प्रॉपर्टी हमेशा `0` पर सेट रहेगी. यह प्रॉपर्टी, `PerformanceEntry` इंटरफ़ेस से इनहेरिट की गई है. `LayoutShift` इंटरफ़ेस, `PerformanceEntry` इंटरफ़ेस को बड़ा करता है. हालांकि, अवधि का सिद्धांत, लेआउट शिफ़्ट इवेंट पर लागू नहीं होता है. इसलिए, इसे `0` पर सेट किया गया है. `PerformanceEntry` इंटरफ़ेस के बारे में जानकारी के लिए, स्पेसिफ़िकेशन देखें.

LayoutShiftAttribution

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

उदाहरण के लिए, नीचे दिया गया JSON, एक सोर्स वाले लेआउट शिफ़्ट से मेल खाता है: <div id='banner'> DOM एलिमेंट का डाउनवर्ड शिफ़्ट y: 76 से y:246 तक का है.

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

node प्रॉपर्टी से उस एचटीएमएल एलिमेंट की पहचान होती है जिसे शिफ़्ट किया गया है. DevTools में इस प्रॉपर्टी पर कर्सर घुमाने से, उससे जुड़ा पेज एलिमेंट हाइलाइट हो जाता है.

previousRect और currentRect प्रॉपर्टी, नोड के साइज़ और पोज़िशन की जानकारी देती हैं.

x और y कोऑर्डिनेट, एलिमेंट के ऊपरी बाएं कोने के x-कोऑर्डिनेट और y-कोऑर्डिनेट को दिखाते हैं
width और height प्रॉपर्टी, एलिमेंट की चौड़ाई और ऊंचाई के बारे में बताती हैं.
top, right, bottom, और left प्रॉपर्टी, एलिमेंट के दिए गए किनारे से जुड़े x या y कोऑर्डिनेट की वैल्यू रिपोर्ट करती हैं. दूसरे शब्दों में, top का मान y के बराबर है; bottom का मान y+height के बराबर है.

अगर previousRect की सभी प्रॉपर्टी 0 पर सेट हैं, तो इसका मतलब है कि एलिमेंट व्यू में शिफ़्ट हो गया है. अगर currentRect की सभी प्रॉपर्टी 0 पर सेट हैं, तो इसका मतलब है कि एलिमेंट व्यू से बाहर हो गया है.

चेतावनी: फ़िलहाल, लेआउट में बदलाव होने की जानकारी देने वाला एपीआई, उन एलिमेंट को अनदेखा नहीं करता जो किसी दूसरे एलिमेंट के सामने होने की वजह से दिख नहीं रहे थे. display: none, visibility: hidden या opacity: 0 का इस्तेमाल करें, ताकि उन मामलों में लेआउट शिफ़्ट होने से बचा जा सके जहां आपको कुछ एलिमेंट पर, लेआउट चलाने की ज़रूरत होती है. ऐसा करने पर ही, वह उपयोगकर्ताओं को दिखता है.

इन आउटपुट को समझने के लिए सबसे ज़रूरी चीज़ों में से एक यह है कि सोर्स के तौर पर लिस्ट किए गए एलिमेंट वे एलिमेंट होते हैं जो लेआउट शिफ़्ट के दौरान शिफ़्ट हो गए हैं. हालांकि, ऐसा हो सकता है कि ये एलिमेंट, लेआउट में बदलाव की "असल वजह" से सिर्फ़ अप्रत्यक्ष तौर पर जुड़े हों. यहां कुछ उदाहरण दिए गए हैं.

उदाहरण #1

इस लेआउट शिफ़्ट की रिपोर्ट, एक सोर्स: एलिमेंट B के साथ की जाएगी. हालांकि, इस लेआउट शिफ़्ट की मूल वजह एलिमेंट A के साइज़ में बदलाव है.

एलिमेंट के डाइमेंशन में बदलाव की वजह से लेआउट शिफ़्ट होने का उदाहरण

उदाहरण #2

इस उदाहरण में, लेआउट में हुए बदलाव की रिपोर्ट दो सोर्स के साथ दी जाएगी: एलिमेंट A और एलिमेंट B. इस लेआउट शिफ़्ट की मुख्य वजह, एलिमेंट A की पोज़िशन में बदलाव होना है.

एलिमेंट की पोज़िशन में बदलाव की वजह से हुए लेआउट शिफ़्ट को दिखाने वाला उदाहरण

उदाहरण #3

इस उदाहरण में, लेआउट शिफ़्ट को एक सोर्स के साथ रिपोर्ट किया जाएगा: एलिमेंट B. एलिमेंट B की पोज़िशन बदलने की वजह से, यह लेआउट शिफ़्ट हुआ.

एलिमेंट की पोज़िशन में बदलाव की वजह से लेआउट शिफ़्ट दिखाने वाला उदाहरण

चौथा उदाहरण

इस उदाहरण में, एलिमेंट B का साइज़ बदलता है, लेकिन लेआउट में कोई बदलाव नहीं होता.

ऐसे एलिमेंट का उदाहरण जिसका साइज़ बदल रहा है, लेकिन लेआउट में कोई बदलाव नहीं हो रहा

Layout Instability API से डीओएम बदलावों को रिपोर्ट करने के तरीके का डेमो देखें.

DevTools

परफ़ॉर्मेंस पैनल

DevTools के परफ़ॉर्मेंस पैनल के परफ़ॉर्मेंस पैनल में, परफ़ॉर्मेंस ट्रैक के दौरान होने वाले सभी लेआउट शिफ़्ट दिखते हैं. भले ही, वे उपयोगकर्ता इंटरैक्शन के 500 एमएस के अंदर ही क्यों न हों. इसलिए, इनकी गिनती सीएलएस में नहीं की जाती. एक्सपीरियंस पैनल में, किसी खास लेआउट शिफ़्ट पर कर्सर घुमाने से, उस DOM एलिमेंट को हाइलाइट किया जाता है जिस पर असर पड़ा है.

DevTools नेटवर्क पैनल में लेआउट शिफ़्ट का स्क्रीनशॉट

लेआउट शिफ़्ट के बारे में ज़्यादा जानकारी देखने के लिए, लेआउट शिफ़्ट पर क्लिक करें. इसके बाद, खास जानकारी ड्रॉअर खोलें. एलिमेंट के डाइमेंशन में किए गए बदलावों को [width, height] फ़ॉर्मैट का इस्तेमाल करके सूची में शामिल किया जाता है. वहीं, एलिमेंट की पोज़िशन में किए गए बदलावों को [x,y] फ़ॉर्मैट का इस्तेमाल करके सूची में शामिल किया जाता है. हाल ही का इनपुट प्रॉपर्टी से पता चलता है कि उपयोगकर्ता इंटरैक्शन के 500 मिलीसेकंड के अंदर, लेआउट शिफ़्ट हुआ या नहीं.

लेआउट शिफ़्ट के लिए, DevTools के 'खास जानकारी' टैब का स्क्रीनशॉट

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

लेआउट शिफ़्ट के लिए, DevTools के 'इवेंट लॉग' टैब का स्क्रीनशॉट

परफ़ॉर्मेंस पैनल का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, परफ़ॉर्मेंस के विश्लेषण की जानकारी देखें.

लेआउट शिफ़्ट रीजन को हाइलाइट करें

लेआउट शिफ़्ट वाले रीजन को हाइलाइट करने से, किसी पेज पर होने वाले लेआउट शिफ़्ट की जगह और समय को तुरंत और एक नज़र में समझने में मदद मिलती है.

DevTools में लेआउट शिफ़्ट रीजन को चालू करने के लिए, सेटिंग > ज़्यादा टूल > रेंडरिंग > लेआउट शिफ़्ट क्षेत्र पर जाएं. इसके बाद, उस पेज को रीफ़्रेश करें जिसे डीबग करना है. लेआउट शिफ़्ट वाले हिस्सों को कुछ समय के लिए बैंगनी रंग में हाइलाइट किया जाएगा.

लेआउट में बदलाव की वजहों का पता लगाने के लिए सोचने का तरीका

लेआउट शिफ़्ट होने की वजह का पता लगाने के लिए, नीचे दिया गया तरीका अपनाया जा सकता है. इससे कोई फ़र्क़ नहीं पड़ता कि लेआउट कब और कैसे शिफ़्ट होता है. इन चरणों के साथ, चालू लाइटहाउस भी जोड़ा जा सकता है. हालांकि, ध्यान रखें कि लाइटहाउस सिर्फ़ उन लेआउट शिफ़्ट की पहचान कर सकता है जो पेज के शुरुआती लोड होने के दौरान हुए हैं. इसके अलावा, Lighthouse सिर्फ़ लेआउट में बदलाव की कुछ वजहों के लिए सुझाव दे सकता है. उदाहरण के लिए, ऐसे इमेज एलिमेंट जिनकी चौड़ाई और ऊंचाई साफ़ तौर पर नहीं दी गई है.

लेआउट शिफ़्ट की वजह का पता लगाना

लेआउट शिफ़्ट इन इवेंट की वजह से हो सकते हैं:

डीओएम एलिमेंट की पोज़िशन में बदलाव
डीओएम एलिमेंट के डाइमेंशन में बदलाव करना
डीओएम एलिमेंट को जोड़ना या हटाना
लेआउट को ट्रिगर करने वाले ऐनिमेशन

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

क्या पिछले एलिमेंट की पोज़िशन या डाइमेंशन बदले हैं?
क्या शिफ़्ट किए गए एलिमेंट से पहले डीओएम एलिमेंट शामिल किया गया या हटाया गया?
क्या शिफ़्ट किए गए एलिमेंट की पोज़िशन साफ़ तौर पर बदली गई थी?

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

इसके अलावा, लेआउट शिफ़्ट की दिशा और दूरी से, इस समस्या की असल वजह के बारे में जानकारी मिल सकती है. उदाहरण के लिए, नीचे की ओर के बड़े शिफ़्ट का मतलब है कि अक्सर डीओएम एलिमेंट शामिल होना चाहिए. वहीं, 1 पिक्सल या 2 पिक्सल वाला लेआउट शिफ़्ट अक्सर अलग-अलग सीएसएस स्टाइल के लागू होने या वेब फ़ॉन्ट के लोड होने और ऐप्लिकेशन के बारे में जानकारी देता है.

फ़ॉन्ट स्वैप की वजह से लेआउट में हुए बदलाव को दिखाने वाला डायग्राम — इस उदाहरण में, फ़ॉन्ट बदलने की वजह से पेज के एलिमेंट पांच पिक्सल ऊपर की ओर शिफ़्ट हो गए.

लेआउट शिफ़्ट इवेंट की सबसे ज़्यादा वजहें, यहां बताए गए कुछ खास व्यवहार हैं:

किसी एलिमेंट की पोज़िशन में होने वाले बदलाव (जो किसी दूसरे एलिमेंट की हलचल की वजह से नहीं होते)

ऐसा अक्सर इन वजहों से होता है:

ऐसी स्टाइलशीट जो देर से लोड होती हैं या पहले से तय की गई स्टाइल की जगह ले लेती हैं.
ऐनिमेशन और ट्रांज़िशन इफ़ेक्ट.

एलिमेंट के डाइमेंशन में बदलाव करना

इस तरह का बदलाव अक्सर इन वजहों से होता है:

ऐसी स्टाइलशीट जो देर से लोड होती हैं या पहले से तय की गई स्टाइल को ओवरराइट करती हैं.
width और height एट्रिब्यूट के बिना इमेज और iframe, जो "स्लॉट" रेंडर होने के बाद लोड होते हैं.
width या height एट्रिब्यूट के बिना टेक्स्ट ब्लॉक, जो टेक्स्ट रेंडर होने के बाद फ़ॉन्ट स्वैप करते हैं.

डीओएम एलिमेंट को जोड़ना या हटाना

ऐसा अक्सर इन वजहों से होता है:

विज्ञापन और तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट जोड़ना.
बैनर, सूचनाएं, और मॉडल डालना.
इनफ़ाइनाइट स्क्रोल और यूज़र एक्सपीरियंस (यूएक्स) के ऐसे पैटर्न जो मौजूदा कॉन्टेंट के ऊपर ज़्यादा कॉन्टेंट लोड करते हैं.

लेआउट को ट्रिगर करने वाले ऐनिमेशन

कुछ ऐनिमेशन इफ़ेक्ट से लेआउट ट्रिगर हो सकता है. इसका एक आम उदाहरण यह है कि जब डीओएम एलिमेंट, सीएसएस की transform प्रॉपर्टी का इस्तेमाल करने के बजाय top या left जैसी प्रॉपर्टी को बढ़ाकर 'ऐनिमेशन' करते हैं. ज़्यादा जानकारी के लिए, बेहतर परफ़ॉर्म करने वाले सीएसएस ऐनिमेशन बनाने का तरीका पढ़ें.

लेआउट शिफ़्ट फिर से बनाए जा रहे हैं

ऐसे लेआउट शिफ़्ट को ठीक नहीं किया जा सकता जिन्हें दोबारा नहीं दिखाया जा सकता. अपनी साइट के लेआउट के बारे में बेहतर जानकारी पाने के लिए, सबसे आसान और असरदार काम है कि लेआउट शिफ़्ट को ट्रिगर करने वाले लक्ष्य के साथ, अपनी साइट से इंटरैक्ट करें. ऐसा करते समय कंसोल को खुला रखें और लेआउट शिफ़्ट की रिपोर्ट पाने के लिए, Layout Instability API का इस्तेमाल करें.

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

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

आखिर में, लेआउट की ऐसी समस्याएं जिनका डेवलपमेंट के दौरान फिर से इस्तेमाल नहीं हो पाता, उनके लिए अपनी पसंद के फ़्रंट-एंड लॉगिंग टूल के साथ Layout Instability API का इस्तेमाल करें. इससे, आपको इन समस्याओं के बारे में ज़्यादा जानकारी इकट्ठा करने में मदद मिलेगी. पेज पर सबसे ज़्यादा शिफ़्ट हुए एलिमेंट को ट्रैक करने के तरीके के लिए, कोड का उदाहरण देखें.