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