बड़े DOM साइज़, इंटरैक्टिविटी पर कैसे असर डालते हैं और इस बारे में क्या किया जा सकता है

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

Jeremy Wagner

कोई दूसरा विकल्प नहीं है: वेब पेज बनाने पर, उस पेज में डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) होगा. डीओएम, आपके पेज के एचटीएमएल के स्ट्रक्चर को दिखाता है. साथ ही, JavaScript और सीएसएस को पेज के स्ट्रक्चर और कॉन्टेंट का ऐक्सेस देता है.

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

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

किसी पेज का डीओएम बहुत बड़ा कब होता है?

Lighthouse के मुताबिक, अगर किसी पेज के डीओएम में 1,400 से ज़्यादा नोड हैं, तो इसका साइज़ बहुत ज़्यादा है. जब किसी पेज का डीओएम 800 नोड से ज़्यादा हो जाएगा, तब Lighthouse चेतावनियां दिखाना शुरू कर देगा. उदाहरण के लिए, यह एचटीएमएल देखें:

<ul>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
</ul>

ऊपर दिए गए कोड में, चार डीओएम एलिमेंट हैं: <ul> एलिमेंट और उसके तीन <li> चाइल्ड एलिमेंट. आपके वेब पेज में ज़्यादा से ज़्यादा नोड होंगे. इसलिए, यह समझना ज़रूरी है कि डीओएम के साइज़ को कंट्रोल करने के लिए क्या किया जा सकता है. साथ ही, पेज के डीओएम को जितना हो सके उतना छोटा करने के बाद, रेंडरिंग के काम को ऑप्टिमाइज़ करने के लिए अन्य रणनीतियों के बारे में भी जानना ज़रूरी है.

बड़े डीओएम का पेज की परफ़ॉर्मेंस पर क्या असर पड़ता है?

बड़े डीओएम, पेज की परफ़ॉर्मेंस पर इन तरीकों से असर डालते हैं:

1. पेज के शुरुआती रेंडर के दौरान. जब किसी पेज पर सीएसएस लागू की जाती है, तो डीओएम जैसा एक स्ट्रक्चर बनता है. इसे सीएसएस ऑब्जेक्ट मॉडल (सीएसएसओएम) कहा जाता है. सीएसएस सिलेक्टर ज़्यादा सटीक होने पर, सीएसओएम ज़्यादा जटिल हो जाता है. साथ ही, वेब पेज को स्क्रीन पर दिखाने के लिए, ज़रूरी लेआउट, स्टाइल, कंपोजिंग, और पेंट वर्क को चलाने में ज़्यादा समय लगता है. इस अतिरिक्त काम की वजह से, पेज लोड होने के दौरान होने वाले इंटरैक्शन के लिए, इंटरैक्शन में लगने वाला समय बढ़ जाता है.
2. जब इंटरैक्शन, एलिमेंट डालने या मिटाने या डीओएम कॉन्टेंट और स्टाइल में बदलाव करके डीओएम में बदलाव करते हैं, तो उस अपडेट को रेंडर करने के लिए ज़रूरी काम की वजह से, लेआउट, स्टाइल, कंपोजिट, और पेंट करने में काफ़ी समय लग सकता है. पेज के शुरुआती रेंडर की तरह, सीएसएस सिलेक्टर की खास जानकारी में बढ़ोतरी होने पर, रेंडरिंग के काम में बढ़ोतरी हो सकती है. ऐसा तब होता है, जब किसी इंटरैक्शन के नतीजे के तौर पर एचटीएमएल एलिमेंट, DOM में डाले जाते हैं.
3. जब JavaScript, डीओएम से क्वेरी करता है, तो डीओएम एलिमेंट के रेफ़रंस मेमोरी में सेव हो जाते हैं. उदाहरण के लिए, अगर किसी पेज पर सभी <div> एलिमेंट चुनने के लिए document.querySelectorAll को कॉल किया जाता है, तो अगर नतीजे में बड़ी संख्या में डीओएम एलिमेंट दिखते हैं, तो मेमोरी की लागत काफ़ी ज़्यादा हो सकती है.

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

मैं डीओएम के साइज़ को कैसे मेज़र करूं?

डीओएम साइज़ को कई तरीकों से मेज़र किया जा सकता है. पहला तरीका, Lighthouse का इस्तेमाल करता है. ऑडिट करने पर, मौजूदा पेज के डीओएम के आंकड़े, "गड़बड़ी की जानकारी" हेडिंग में "बड़े साइज़ के डीओएम से बचें" ऑडिट में दिखेंगे. इस सेक्शन में, डीओएम एलिमेंट की कुल संख्या, सबसे ज़्यादा चाइल्ड एलिमेंट वाला डीओएम एलिमेंट, और सबसे डीप डीओएम एलिमेंट देखा जा सकता है.

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

document.querySelectorAll('*').length;

अगर आपको रीयलटाइम में DOM साइज़ का अपडेट देखना है, तो परफ़ॉर्मेंस मॉनिटर टूल का इस्तेमाल भी किया जा सकता है. इस टूल का इस्तेमाल करके, मौजूदा डीओएम साइज़ के साथ-साथ लेआउट और स्टाइलिंग ऑपरेशन (और परफ़ॉर्मेंस के अन्य पहलुओं) को जोड़ा जा सकता है.

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

मैं किसी इंटरैक्शन से प्रभावित डीओएम एलिमेंट की संख्या को कैसे मेज़र करूं?

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

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

मैं DOM का साइज़ कैसे कम करूं?

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

<div>
  <div>
    <div>
      <div>
        <!-- Contents -->
      </div>
    </div>
  </div>
</div>

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

डीओएम की गहराई, इस्तेमाल किए जा रहे फ़्रेमवर्क की वजह से भी हो सकती है. खास तौर पर, कॉम्पोनेंट पर आधारित फ़्रेमवर्क, जैसे कि JSX पर आधारित फ़्रेमवर्क के लिए, आपको पैरंट कंटेनर में कई कॉम्पोनेंट नेस्ट करने होंगे.

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

• प्रतिक्रिया देना
• Preact
• Vue
• Svelte

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

ध्यान में रखने वाली अन्य रणनीतियां

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

बेहतर तरीके से काम करने के बारे में सोचें

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

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

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

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

सीएसएस सिलेक्टर को जटिल न बनाएं

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

content-visibility प्रॉपर्टी का इस्तेमाल करना

सीएसएस में content-visibility प्रॉपर्टी होती है. यह ऑफ़-स्क्रीन डीओएम एलिमेंट को लैज़ी रेंडर करने का असरदार तरीका है. जब एलिमेंट व्यूपोर्ट के करीब आते हैं, तो उन्हें मांग पर रेंडर किया जाता है. content-visibility के फ़ायदे सिर्फ़ पेज के शुरुआती रेंडर पर रेंडरिंग के काम को काटने तक ही सीमित नहीं हैं. बल्कि, उपयोगकर्ता के इंटरैक्शन की वजह से पेज के डीओएम में बदलाव होने पर, ऑफ़स्क्रीन एलिमेंट के लिए रेंडरिंग का काम भी छोड़ दिया जाता है.

नतीजा

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

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