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

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

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

टूलिंग

Layout Instability API

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

इस्तेमाल

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

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

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

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

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

LayoutShiftAttribution

LayoutShiftAttribution इंटरफ़ेस, किसी एक DOM एलिमेंट के एक शिफ़्ट के बारे में बताता है. अगर लेआउट में बदलाव होने के दौरान कई एलिमेंट शिफ़्ट होते हैं, तो 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 पर सेट हैं, तो इसका मतलब है कि एलिमेंट व्यू से बाहर हो गया है.

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

उदाहरण #1

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

उदाहरण #2

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

तीसरा उदाहरण

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

चौथा उदाहरण

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

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

DevTools

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

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

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

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

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

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

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

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

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

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

लेआउट में बदलाव की वजह का पता लगाना

लेआउट में बदलाव इन वजहों से हो सकते हैं:

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

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

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

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

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

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

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

इस तरह का बदलाव, आम तौर पर इन वजहों से होता है:

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

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

इस तरह का बदलाव, आम तौर पर इन वजहों से होता है:

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

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

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

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

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

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

लेआउट शिफ़्ट को फिर से दिखाना

ऐसे लेआउट शिफ़्ट को ठीक नहीं किया जा सकता जिन्हें दोबारा नहीं दिखाया जा सकता. अपनी साइट के लेआउट की स्थिरता को बेहतर तरीके से समझने के लिए, सबसे आसान और असरदार तरीका यह है कि आप अपनी साइट के साथ 5 से 10 मिनट तक इंटरैक्ट करें. ऐसा करने का मकसद, लेआउट में बदलाव को ट्रिगर करना है. ऐसा करते समय, Console को खुला रखें और लेआउट में होने वाले बदलावों की रिपोर्ट करने के लिए, 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});

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