content-vision: वह नई सीएसएस प्रॉपर्टी, जो आपकी रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाती है

ऑफ़स्क्रीन कॉन्टेंट को रेंडर करने से रोककर, शुरुआती लोड समय को बेहतर बनाएं.

Una Kravets
Jeremy Wagner
Vladimir Levin
Vladimir Levin

पब्लिश करने की तारीख: 5 अगस्त, 2020

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 85.
  • किनारा: 85.
  • Firefox: 125.
  • Safari: 18.

सोर्स

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

सीएसएस कंटेनमेंट

सीएसएस कंटेनमेंट का मुख्य और सबसे अहम लक्ष्य, वेब कॉन्टेंट की रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाना है. इसके लिए, पेज के बाकी हिस्सों से DOM सबट्री को अलग करके, उसे अनुमानित तरीके से अलग किया जाता है.

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

सीएसएस के कॉन्टेंट चार तरह के होते हैं. इनमें से हर एक, contain सीएसएस प्रॉपर्टी की संभावित वैल्यू होती है. इन्हें वैल्यू की सूची में जोड़ा जा सकता है. इसके लिए, वैल्यू के बीच स्पेस का इस्तेमाल करें:

  • size: किसी एलिमेंट के साइज़ को कंट्रोल करने से यह पक्का होता है कि एलिमेंट के बॉक्स को, उसके डिस्सेंटेंट की जांच किए बिना लेआउट किया जा सकता है. इसका मतलब है कि अगर हमें सिर्फ़ एलिमेंट का साइज़ चाहिए, तो हम डिस्सेंटेंट के लेआउट को छोड़ सकते हैं.
  • layout: लेआउट कंटेनमेंट का मतलब है कि वंशजों का असर, पेज पर मौजूद अन्य बॉक्स के बाहरी लेआउट पर नहीं पड़ता. अगर हमें सिर्फ़ अन्य बॉक्स का लेआउट बनाना है, तो इससे हम डिसेंटेंट के लेआउट को छोड़ सकते हैं.
  • style: स्टाइल कंटेनमेंट से यह पक्का होता है कि ऐसी प्रॉपर्टी, एलिमेंट से बाहर न जाएं जिनका असर सिर्फ़ उनके वंशजों पर पड़ता है. जैसे, काउंटर. इससे हम डिसेंडेंट के लिए स्टाइल कंप्यूटेशन को छोड़ सकते हैं. ऐसा तब होगा, जब हम सिर्फ़ दूसरे एलिमेंट पर स्टाइल की गणना करना चाहते हैं.
  • paint: पेंट कंटेनमेंट यह पक्का करता है कि बॉक्स के अंदर मौजूद डिसेंडेंट, इसके बाहर न दिखें. एलिमेंट के बाहर कुछ भी नहीं दिख सकता. अगर कोई एलिमेंट स्क्रीन पर नहीं दिख रहा है या किसी और वजह से नहीं दिख रहा है, तो उसके वंशज भी नहीं दिखेंगे. इससे, अगर एलिमेंट ऑफ़स्क्रीन है, तो हम डिसेंटेंट को पेंट करने की प्रोसेस को छोड़ सकते हैं.

content-visibility के साथ रेंडरिंग का काम छोड़ें

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

content-visibility प्रॉपर्टी में कई वैल्यू डाली जा सकती हैं. हालांकि, auto वह वैल्यू है जिससे परफ़ॉर्मेंस में तुरंत सुधार होता है. content-visibility: auto एलिमेंट में layout, style, और paint कंटेनमेंट शामिल होते हैं. अगर एलिमेंट स्क्रीन पर नहीं है और वह उपयोगकर्ता के लिए काम का नहीं है, तो उसे भी size कंटेनमेंट मिलता है. साथ ही, वह अपने कॉन्टेंट को पेंट करना और हिट-टेस्ट करना बंद कर देता है.

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

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

सुलभता के बारे में जानकारी

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

हालांकि, इसका दूसरा पहलू यह है कि display: none या visibility: hidden जैसी स्टाइल सुविधाओं वाले लैंडमार्क एलिमेंट, स्क्रीन पर न होने पर भी सुलभता ट्री में दिखेंगे. ऐसा इसलिए होगा, क्योंकि ब्राउज़र तब तक इन स्टाइल को रेंडर नहीं करेगा, जब तक वे व्यूपोर्ट में नहीं आ जाते. इन एलिमेंट को ऐक्सेसबिलिटी ट्री में न दिखाने के लिए, aria-hidden="true" भी जोड़ना न भूलें. ऐसा न करने पर, इन एलिमेंट की वजह से ट्री में गड़बड़ी हो सकती है.

उदाहरण: ट्रैवल ब्लॉग

इस उदाहरण में, हमने अपने यात्रा ब्लॉग को दाईं ओर बेसलाइन बनाया है और बाईं ओर दिए गए दो हिस्सों में content-visibility: auto को लागू किया है. नतीजों से पता चलता है कि पेज लोड होने में लगने वाला समय, शुरुआती 232 मिलीसेकंड से घटकर 30 मिलीसेकंड हो गया है.

आम तौर पर, ट्रैवल ब्लॉग में कुछ तस्वीरों के साथ कहानियों का एक सेट और जानकारी देने वाला कुछ टेक्स्ट होता है. किसी सामान्य ब्राउज़र में, ट्रैवल ब्लॉग पर जाने पर क्या होता है, यह जानने के लिए यहां देखें:

  1. पेज का कुछ हिस्सा और ज़रूरी रिसॉर्स, नेटवर्क से डाउनलोड किए जाते हैं.
  2. ब्राउज़र, पेज के सभी कॉन्टेंट को स्टाइल और लेआउट देता है. ऐसा करते समय, वह इस बात पर ध्यान नहीं देता कि कॉन्टेंट उपयोगकर्ता को दिख रहा है या नहीं.
  3. जब तक पेज और रिसॉर्स डाउनलोड नहीं हो जाते, तब तक ब्राउज़र पहले चरण पर वापस चला जाता है.

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

किसी ट्रैवल ब्लॉग का स्क्रीनशॉट.
ट्रैवल ब्लॉग का उदाहरण. कोडपेन पर डेमो देखें

अब देखें कि ब्लॉग में मौजूद हर स्टोरी पर content-visibility: auto लगाने पर क्या होता है. सामान्य लूप समान होता है: ब्राउज़र, पेज के कई हिस्सों को डाउनलोड और रेंडर करता है. हालांकि, अंतर यह है कि दूसरे चरण में यह कितना काम करता है.

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

इस पेज को लोड करने की परफ़ॉर्मेंस वैसी ही होगी, जैसे कि इसमें स्क्रीन पर पूरी तरह से दिखने वाली खबरें और स्क्रीन पर नहीं दिखने वाली हर खबर के लिए खाली बॉक्स हों. यह तरीका काफ़ी बेहतर तरीके से काम करता है. इससे, लोड करने के लिए रेंडरिंग की लागत में 50% या उससे ज़्यादा की कमी आती है. हमारे उदाहरण में, रेंडरिंग में लगने वाले समय में 232 मिलीसेकंड से घटकर 30 मिलीसेकंड हो गया. इसका मतलब है कि परफ़ॉर्मेंस में सात गुना बढ़ोतरी हुई है.

इन फ़ायदों को पाने के लिए, आपको क्या करना होगा? सबसे पहले, हम कॉन्टेंट को सेक्शन में बांटते हैं:

सीएसएस क्लास वाले सेक्शन में छोटे-छोटे कॉन्टेंट की व्याख्या करने वाला एक स्क्रीनशॉट.
content-visibility: auto पाने के लिए, कॉन्टेंट को story क्लास के साथ सेक्शन में बांटने का उदाहरण. कोडपेन पर डेमो देखें

इसके बाद, हम सेक्शन पर यह स्टाइल नियम लागू करते हैं:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

contain-intrinsic-size का इस्तेमाल करके, किसी एलिमेंट का नैचुरल साइज़ तय करना

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

ऐसा हो सकता है कि यह सही न हो, क्योंकि स्क्रोलबार का साइज़ बदल जाएगा. इसलिए, हर स्टोरी की ऊंचाई शून्य से ज़्यादा नहीं होगी.

अच्छी बात यह है कि सीएसएस, contain-intrinsic-size नाम की एक और प्रॉपर्टी उपलब्ध कराता है. यह एलिमेंट के नैचुरल साइज़ को असरदार तरीके से बताता है, अगर एलिमेंट पर साइज़ कंटेनमेंट से असर पड़ता है. हमारे उदाहरण में, हम इसे 1000px पर सेट कर रहे हैं, क्योंकि यह सेक्शन की ऊंचाई और चौड़ाई का अनुमान है.

इसका मतलब है कि यह ऐसे लेआउट होगा जैसे कि इसमें "intrinsic-size" डाइमेंशन का एक बच्चा है. इससे यह पक्का होता है कि बिना साइज़ वाले आपके div अब भी जगह घेरते हैं. contain-intrinsic-size, रेंडर किए गए कॉन्टेंट के बजाय प्लेसहोल्डर साइज़ के तौर पर काम करता है.

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

content-visibility: hidden वाला कॉन्टेंट छिपाना

अगर आपको कॉन्टेंट को रेंडर नहीं करना है, तो क्या करें? भले ही, वह स्क्रीन पर दिख रहा हो या नहीं. साथ ही, कैश मेमोरी में रेंडरिंग की स्थिति के फ़ायदों का फ़ायदा कैसे लें? डालें: content-visibility: hidden.

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

इससे आपको ज़्यादा कंट्रोल मिलता है, जिससे एलिमेंट के कॉन्टेंट को छिपाया जा सकता है और बाद में तुरंत दिखाया जा सकता है.

एलिमेंट के कॉन्टेंट को छिपाने के अन्य सामान्य तरीकों से इसकी तुलना करें:

  • display: none: एलिमेंट को छिपा देता है और उसकी रेंडरिंग स्थिति को खत्म कर देता है. इसका मतलब है कि एलिमेंट को छिपाने से उतना ही खर्च आता है जितना कि उसी कॉन्टेंट के साथ नया एलिमेंट रेंडर करने में आता है.
  • visibility: hidden: एलिमेंट को छिपा देता है और उसकी रेंडरिंग की स्थिति को बनाए रखता है. ऐसा करने पर, दस्तावेज़ से एलिमेंट पूरी तरह से नहीं हटता. इसकी वजह यह है कि एलिमेंट और उसका सबट्री, पेज पर अब भी ज्यामितीय जगह लेता है और उस पर क्लिक किया जा सकता है. ज़रूरत पड़ने पर, इससे रेंडरिंग की स्थिति को भी अपडेट किया जाता है. भले ही, विज्ञापन को छिपाया गया हो.

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

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

पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) पर असर

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

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

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

नतीजा

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