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

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

लेआउट शिफ़्ट की पहचान करने और उन्हें ठीक करने का तरीका जानें.

Katie Hempenius

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

टूलिंग

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 तब तक इंतज़ार करता है, जब तक लेआउट में बदलाव होने की रिपोर्ट देने के लिए मुख्य धागा काम न कर रहा हो. इस वजह से, मुख्य थ्रेड व्यस्त है, इसलिए लेआउट मिलने में थोड़ा समय लग सकता है shift होता है और जब यह कंसोल में लॉग होता है.
यह स्क्रिप्ट, उपयोगकर्ता के इनपुट के 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 की पोज़िशन में बदलाव होना है.

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

तीसरा उदाहरण

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

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

उदाहरण #4

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

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

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

DevTools

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

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

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

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

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

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

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

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

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

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

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

लेआउट शिफ़्ट होने की वजह जानने के लिए सोचने की प्रोसेस

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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