ज़्यादा डेटा वाले कॉन्टेंट को रेंडर करने में देरी करना

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

रेंडरिंग को ऑप्टिमाइज़ करने के लिए, सीएसएस content-visibility प्रॉपर्टी और एचटीएमएल hidden="until-found" एट्रिब्यूट का इस्तेमाल किया जा सकता है. दोनों ही परफ़ॉर्मेंस को बेहतर बनाने में मदद करते हैं, लेकिन दोनों का इस्तेमाल अलग-अलग मामलों में किया जाता है.

किसका इस्तेमाल कब करना चाहिए

content-visibility: auto को लागू करने का तरीका

स्क्रीन पर न दिखने वाला कॉन्टेंट चुनना

ज़रूरी: आपको ध्यान से यह पहचानना होगा कि किन एलिमेंट को content-visibility: auto मिलता है.

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

लागू करने के चरण

1. ज़रूरी: ऐसे बड़े सेक्शन की पहचान करें जो शुरुआती लोड के दौरान, स्क्रीन पर नहीं दिखते.
2. ज़रूरी: स्क्रीन से बाहर मौजूद इन सभी एलिमेंट पर content-visibility: auto लागू करें.
3. ज़रूरी: हर एलिमेंट पर contain-intrinsic-size का इस्तेमाल करके, लेआउट स्ट्रक्चर का अनुमानित साइज़ दें.

contain-intrinsic-size का इस्तेमाल कैसे करें

ज़रूरी: आपको content-visibility: auto को contain-intrinsic-size के साथ जोड़ना होगा. ऐसा न करने पर, ब्राउज़र को एलिमेंट को ऑफ़-स्क्रीन होने पर 0 पिक्सल की ऊंचाई तक छोटा करना पड़ता है. इससे, उपयोगकर्ता के स्क्रोल करने पर, लेआउट में काफ़ी बदलाव होता है और स्क्रोलबार जंप करता है.

contain-intrinsic-size सीएसएस शॉर्टहैंड प्रॉपर्टी, प्लेसहोल्डर डाइमेंशन के तौर पर काम करती है. auto कीवर्ड का इस्तेमाल करने से, ब्राउज़र को एलिमेंट के रेंडर होने के बाद उसके सटीक साइज़ को "याद रखने" में मदद मिलती है. अगर एलिमेंट फिर से ऑफ़-स्क्रीन हो जाता है, तो ब्राउज़र प्लेसहोल्डर के बजाय उस साइज़ का इस्तेमाल करता है.

कोड का उदाहरण

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

content-visibility: hidden को लागू करने का तरीका

1. ज़्यादा डेटा वाले सेक्शन की पहचान करें: ऐसे लेआउट ब्लॉक ढूंढें जो शुरुआत में छिपे हुए हों. जैसे, किसी बड़ी डेटा टेबल में मौजूद अतिरिक्त लाइनें.
2. सीएसएस लागू करें: एलिमेंट में content-visibility: hidden जोड़ें.
3. एलिमेंट को दिखाना: जब एलिमेंट को दिखाना हो, तब content-visibility प्रॉपर्टी को visible या auto में बदलें.

कोड का उदाहरण

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

content-visibility: hidden, एलिमेंट और उसके चाइल्ड एलिमेंट को सुलभता ट्री और पेज पर खोजने की सुविधा से बाहर रखता है. इसलिए, अगर कॉन्टेंट को छिपाए जाने के दौरान भी उसे खोजने लायक बनाए रखना ज़रूरी है, तो इसका इस्तेमाल न करें. अगर आपको छिपाए गए कॉन्टेंट को नेटिव Find-in-page की मदद से खोजने की सुविधा चालू रखनी है, तो hidden="until-found" का इस्तेमाल करें. इसके बारे में छिपाया गया कॉन्टेंट खोजना में बताया गया है.

सबसे सही तरीके

• content-visibility: auto के साथ contain-intrinsic-size का इस्तेमाल करें. ऐसा न करने पर, स्क्रोल करने के दौरान ऊंचाई का फिर से हिसाब लगाना पड़ता है. इससे व्यूपोर्ट लेआउट में जंपिंग या विज़ुअल से जुड़ी गड़बड़ियां हो सकती हैं.
• शुरुआती फ़ोल्ड व्यूपोर्ट में मौजूद एलिमेंट पर content-visibility: auto लागू न करें. इससे पेज रेंडर होने में देरी होती है.
• सुलभता की पुष्टि करना ज़रूरी है: content-visibility: auto लागू करते समय, आपको यह पुष्टि करनी होगी कि कीबोर्ड से क्रम में ऐक्सेस करने की सुविधा चालू है. सहायक टेक्नोलॉजी के कुछ कॉन्फ़िगरेशन में, content-visibility: auto का इस्तेमाल करने वाले ऑफ़-स्क्रीन नोड को सुलभता ट्री या क्रम से चलने वाले नेविगेशन रूट से तब तक बाहर रखा जा सकता है, जब तक कि फ़ोकस को ज़बरदस्ती उनके अंदर न ले जाया जाए. सिर्फ़ कीबोर्ड का इस्तेमाल करके, ऑफ़-स्क्रीन बाउंड्री पर लीनियर नेविगेशन की जांच करें.

फ़ॉलबैक रणनीतियां

content-visibility फ़ॉलबैक

अगर content-visibility काम नहीं करता है, तो ब्राउज़र इसे अनदेखा कर देगा. ज़्यादातर मामलों में, content-visibility: auto को फ़ॉलबैक की ज़रूरत नहीं होगी. हालांकि, इसके बिना परफ़ॉर्मेंस में होने वाले फ़ायदे नहीं मिलेंगे. अगर ब्राउज़र पर यह सुविधा काम नहीं करती, तो content-visibility: hidden एलिमेंट पूरी तरह से दिखेंगे. फ़ॉलबैक लागू करने के लिए, सुविधा की पहचान करने की सुविधा का इस्तेमाल करें.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}