ऑफ़स्क्रीन कॉन्टेंट को रेंडर करने की प्रोसेस को स्किप करके, लोड होने के शुरुआती समय में सुधार करें.
Chromium 85 में लॉन्च होने वाली content-visibility प्रॉपर्टी, पेज लोड की परफ़ॉर्मेंस को बेहतर बनाने के लिए, सबसे असरदार नई सीएसएस प्रॉपर्टी में से एक हो सकती है. content-visibility, उपयोगकर्ता एजेंट को तब तक किसी एलिमेंट के रेंडर करने के काम को स्किप करता है, जब तक उसकी ज़रूरत न हो. इसमें लेआउट और पेंटिंग भी शामिल है. अगर आपके कॉन्टेंट का एक बड़ा हिस्सा स्क्रीन पर नहीं दिखता, तो रेंडरिंग को स्किप किया जाता है. इसलिए, content-visibility प्रॉपर्टी का इस्तेमाल करने पर, शुरुआती उपयोगकर्ता तेज़ी से लोड होते हैं. इससे स्क्रीन पर मौजूद कॉन्टेंट
के साथ तेज़ी से इंटरैक्शन भी हो सकता है. बहुत व्यवस्थित.
content-visibility: auto को अलग-अलग कॉन्टेंट के अलग-अलग हिस्सों पर लागू करने से, शुरुआती लोड होने पर रेंडरिंग की परफ़ॉर्मेंस सात गुना बढ़ जाती है. ज़्यादा जानने के लिए आगे पढ़ें.ब्राउज़र समर्थन
content-visibility, सीएसएस कंटेनमेंट स्पेसिफ़िकेशन के प्रिमिटिव पर निर्भर करता है. फ़िलहाल, content-visibility सिर्फ़ Chromium 85 में काम करता है और Firefox के लिए "प्रोटोटाइपिंग" माना जाता है. हालांकि, कंटेनमेंट स्पेसिफ़िकेशन ज़्यादातर आधुनिक ब्राउज़र में काम करता है.
सीएसएस कंटेनमेंट
सीएसएस को कंट्रोल करने का मुख्य और अहम लक्ष्य, पेज के बाकी हिस्सों से डीओएम सबट्री को अनुमान के हिसाब से अलग करके वेब कॉन्टेंट की रेंडरिंग परफ़ॉर्मेंस को बेहतर बनाना है.
इसका मतलब है कि डेवलपर, ब्राउज़र को यह बता सकता है कि पेज के कौनसे हिस्से कॉन्टेंट के सेट के तौर पर शामिल किए गए हैं. इससे ब्राउज़र को सबट्री के बाहर की स्थिति के बारे में सोचकर, कॉन्टेंट के बारे में तर्क देने में मदद मिलती है. यह जानने के बाद कि किस कॉन्टेंट (सबट्री) में आइसोलेटेड कॉन्टेंट है, ब्राउज़र उस पेज को रेंडर करने के लिए बेहतर फ़ैसले ले सकता है.
सीएसएस कंटेनमेंट चार तरह की होती है. इसमें हर एक contain सीएसएस प्रॉपर्टी की संभावित वैल्यू होती है, जिसे स्पेस से अलग की गई वैल्यू की सूची में जोड़ा जा सकता है:
size: एलिमेंट के साइज़ कंटेनमेंट से यह पक्का होता है कि एलिमेंट के डिसेंडेंट की जांच किए बिना एलिमेंट के बॉक्स को रखा जा सकता है. इसका मतलब है कि अगर हमें सिर्फ़ एलिमेंट का साइज़ चाहिए, तो हम डिसेंडेंट का लेआउट छोड़ सकते हैं.layout: लेआउट कंटेनमेंट का मतलब है कि डिसेंडेंट, पेज पर मौजूद दूसरे बॉक्स के बाहरी लेआउट पर असर नहीं डालते. इससे हम डिसेंडेंट के लेआउट को छोड़ सकते हैं, अगर हमें सिर्फ़ अन्य बॉक्स लिखना है.style: स्टाइल कंटेनमेंट यह पक्का करता है कि जिन प्रॉपर्टी पर सिर्फ़ इसके डिसेंडेंट के अलावा, कई दूसरी चीज़ों पर असर हो सकता है वे एलिमेंट (जैसे, काउंटर) को एस्केप न करें. इससे हम डिसेंडेंट के लिए स्टाइल कंप्यूटेशन को छोड़ सकते हैं. ऐसा तब होगा, जब हम सिर्फ़ दूसरे एलिमेंट पर स्टाइल को कंप्यूट करना चाहते हैं.paint: पेंट कंटेनमेंट यह पक्का करता है कि बॉक्स के अंदर मौजूद डिसेंडेंट, इसके बाहर न दिखें. इस एलिमेंट को देखकर कोई भी एलिमेंट ओवरफ़्लो नहीं हो सकता. साथ ही, अगर कोई एलिमेंट ऑफ़-स्क्रीन है या नहीं दिख रहा है, तो उसके डिसेंडेंट भी नहीं दिखेंगे. इससे अगर एलिमेंट ऑफ़स्क्रीन हो, तो हमें डिसेंडेंट की पेंटिंग करने की ज़रूरत नहीं पड़ेगी.
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 मि॰से॰ तक हो गया है.आम तौर पर, यात्रा से जुड़े ब्लॉग में कुछ तस्वीरों और जानकारी के साथ कहानियों का एक सेट होता है. यहां बताया गया है कि किसी सामान्य ब्राउज़र पर, यात्रा से जुड़े ब्लॉग पर जाने पर क्या होता है:
- नेटवर्क से पेज का एक हिस्सा डाउनलोड किया जाता है और साथ में ज़रूरी संसाधन भी डाउनलोड किए जाते हैं.
- ब्राउज़र स्टाइल और पेज का पूरा कॉन्टेंट दिखाता है, लेकिन इस बात की परवाह किए बिना कि कॉन्टेंट उपयोगकर्ता को दिख रहा है या नहीं.
- जब तक सभी पेज और संसाधन डाउनलोड नहीं हो जाते, तब तक ब्राउज़र पहले चरण पर वापस चला जाता है.
दूसरे चरण में, ब्राउज़र उन सभी कॉन्टेंट को प्रोसेस करता है जिनमें बदलाव किया गया है. यह किसी भी नए एलिमेंट की स्टाइल और लेआउट को अपडेट करता है. साथ ही, यह उन एलिमेंट को भी अपडेट करता है जो नए अपडेट की वजह से शिफ़्ट हो गए हैं. यह काम रेंडर कर रहा है. इसमें समय लगता है.
अब देखें कि अगर आप ब्लॉग की हर एक खबर में content-visibility: auto डालते हैं, तो क्या होगा. सामान्य लूप समान होता है: ब्राउज़र,
पेज के कई हिस्सों को डाउनलोड और रेंडर करता है. हालांकि, अंतर चरण 2 में किए जाने वाले
काम की संख्या में है.
कॉन्टेंट दिखने की सुविधा की मदद से, यह उन सभी कॉन्टेंट को स्टाइल और लेआउट में बदल देगा जो मौजूदा समय में लोगों को स्क्रीन पर दिखते हैं. हालांकि, पूरी तरह से स्क्रीन पर दिखने वाली कहानी को प्रोसेस करने के दौरान, ब्राउज़र, रेंडरिंग के काम को छोड़ देगा और सिर्फ़ एलिमेंट बॉक्स की स्टाइल और लेआउट को तय करेगा.
इस पेज को लोड करने का तरीका कुछ ऐसा होगा जैसे स्क्रीन पर पूरी कहानियां दिखाई गई हों और हर ऑफ़ स्क्रीन कहानी के लिए खाली बॉक्स हों. यह बहुत बेहतर परफ़ॉर्म करता है. इसमें लोड करने की रेंडरिंग लागत के मुकाबले 50% या उससे ज़्यादा की कमी होती है. अपने उदाहरण में, हम बताते हैं कि रेंडर होने में 232 मि॰से॰ समय से लेकर 30 मि॰से॰ तक रेंडर होने में लगने वाला समय बढ़ गया है. यह परफ़ॉर्मेंस में 7 गुना बढ़ोतरी है.
इन फ़ायदों का फ़ायदा पाने के लिए आपको क्या करना होगा? सबसे पहले, हम कॉन्टेंट को सेक्शन में बांटते हैं:
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 पर सेट कर रहे हैं.
इसका मतलब है कि यह इस तरह दिखेगा कि उसमें "इंट्रिनसिक-साइज़" डाइमेंशन का एक ही चाइल्ड व्यू हो, ताकि यह पक्का हो सके कि आपके बिना साइज़ के div अब भी जगह ले रहे हैं.
contain-intrinsic-size, रेंडर किए गए कॉन्टेंट के बजाय, प्लेसहोल्डर साइज़ की तरह काम करता है.
Chromium 98 और उसके बाद के वर्शन में, 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 सीएसएस प्रॉपर्टी का इस्तेमाल करने से, रेंडरिंग के काम में कमी आ सकती है. खास तौर पर, जब रेंडरिंग और लेआउट का ज़्यादातर काम पूरा हो जाता है.
रेंडरिंग के काम को कम करने से, आईएनपी पर सीधा असर पड़ता है. जब उपयोगकर्ता ऐसे पेज के साथ इंटरैक्ट करते हैं जो ऑफ़स्क्रीन एलिमेंट के लेआउट और रेंडरिंग को रोकने के लिए, content-visibility प्रॉपर्टी का सही तरीके से इस्तेमाल करता है, तो इसका मतलब है कि मुख्य थ्रेड को उपयोगकर्ताओं को दिखने वाले ज़रूरी काम का जवाब देने का मौका दिया जा रहा है. इससे कुछ स्थितियों में, आपके पेज का आईएनपी बेहतर हो सकता है.
नतीजा
content-visibility और सीएसएस कंटेनमेंट स्पेसिफ़िकेशन का मतलब है कि आपकी सीएसएस फ़ाइल में, परफ़ॉर्मेंस को बेहतर बनाने वाले कुछ बेहतरीन अपडेट आने वाले हैं. इन प्रॉपर्टी के बारे में ज़्यादा जानकारी के लिए, यहां जाएं: