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

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

Katie Hempenius

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

टूलिंग

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

Layout Instability API, लेआउट शिफ़्ट को मापने और रिपोर्ट करने के लिए ब्राउज़र प्रणाली. के लिए सभी टूल DevTools के साथ-साथ, डीबग करने वाले लेआउट शिफ़्ट, आखिर में लेआउट इंस्टेंसेबिलिटी एपीआई. हालांकि, 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 मुख्य हिस्से से पहले लेआउट शिफ़्ट की रिपोर्ट देने के लिए, थ्रेड कुछ समय से इस्तेमाल में नहीं है. इस वजह से, मुख्य थ्रेड व्यस्त है, इसलिए लेआउट मिलने में थोड़ा समय लग सकता है 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 इंस्टेंस की प्रॉपर्टी हैं, जो लेआउट शिफ़्ट डीबग करने का तरीका:

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 पर सेट की गई हैं, तो इसका मतलब है कि एलिमेंट व्यू से बाहर चला गया हो.

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

उदाहरण #1

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

उदाहरण #2

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

उदाहरण #3

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

उदाहरण #4

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

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

DevTools

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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