पब्लिश करने की तारीख: 30 अक्टूबर, 2024
साल 2024 की शुरुआत में, पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) को वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के तौर पर शामिल किए जाने से, रेंडरिंग की परफ़ॉर्मेंस में ज़्यादा दिलचस्पी पैदा हुई है. आईएनपी का एक हिस्सा इस बात पर फ़ोकस करता है कि उपयोगकर्ता के पेज से इंटरैक्ट करने के बाद, ब्राउज़र को अगला फ़्रेम पेंट करने में कितना समय लगता है. अपनी वेबसाइट का आईएनपी कम रखना, इसका मतलब है कि उपयोगकर्ताओं को यह महसूस होगा कि वेबसाइट उनके इंटरैक्शन का जवाब जल्द से जल्द और आसानी से दे रही है.
पेज लोड होने के साथ रेंडरिंग की प्रोसेस शुरू होनी चाहिए. ऐसा न होने पर, इंटरैक्शन शुरू होने में देरी हो सकती है. पेज के लाइफ़साइकल के इस अहम हिस्से के दौरान होने वाले काम को कम करने के तरीके ढूंढना ज़रूरी है. CSS content-visibility प्रॉपर्टी का इस्तेमाल करके, यह लक्ष्य हासिल किया जा सकता है. हमें यह बताते हुए खुशी हो रही है कि सितंबर 2024 से, यह बेसलाइन के तौर पर उपलब्ध है!
content-visibility एक सीएसएस प्रॉपर्टी है, जो उपयोगकर्ता एजेंट को एलिमेंट को तब तक रेंडर करने से रोकती है, जब तक वे व्यूपोर्ट तक नहीं पहुंच जाते. कई डीओएम एलिमेंट वाले पेजों के लिए, यह फ़ायदेमंद हो सकता है. इसका मतलब है कि पेज के शुरुआती लोड में, रेंडर करने का कम काम होगा. इसके बजाय, काम तब होता है, जब उपयोगकर्ता को उसे देखने की ज़रूरत होती है.
content-visibility: auto लागू करने से, शुरुआती लोड होने पर रेंडरिंग की परफ़ॉर्मेंस सात गुना बढ़ जाती है. ज़्यादा जानने के लिए आगे पढ़ें.
ऑफ़-स्क्रीन एलिमेंट के लिए इस ऑप्टिमाइज़ेशन को चालू करने के लिए, अपनी वेबसाइट की सीएसएस में उन पर content-visibility: auto नियम लागू करें:
.render-me-later {
content-visibility: auto;
}
content-visibility, सीएसएस कंटेनमेंट में contain प्रॉपर्टी के लिए तय किए गए कुछ तरीकों के हिसाब से काम करता है. सीएसएस कंटेनमेंट का मकसद, डीओएम ट्री के कुछ हिस्सों को अलग करना है. इसकी मदद से, रेंडरिंग ऑपरेशन को डीओएम ट्री के किसी खास हिस्से तक ही सीमित किया जा सकता है. इससे, लेआउट को अमान्य कर दिया जाता है और डीओएम ट्री के सिर्फ़ एक सबसेट के लिए फिर से बना दिया जाता है. रेंडरिंग की परफ़ॉर्मेंस के लिए इसे लागू करते समय, contain प्रॉपर्टी की अलग-अलग वैल्यू और उनका असरदार तरीके से इस्तेमाल करने के बारे में ज़रूरत के मुताबिक जानकारी होनी चाहिए.
जब content-visibility: auto एलिमेंट पर लागू किया जाता है, तो वह contain प्रॉपर्टी से मिली कुछ प्रॉपर्टी को अपने-आप ले लेता है. इस वजह से, जिन एलिमेंट पर असर पड़ा है उन्हें शुरुआत में 0px की ऊंचाई के साथ रेंडर किया जाएगा. इसका मतलब है कि उन्हें रेंडर नहीं किया जाएगा.
हालांकि, इसका कुछ असर पड़ता है. उदाहरण के लिए, जब उपयोगकर्ता पहले से रेंडर नहीं किए गए एलिमेंट की ओर स्क्रोल करता है, तो पेज का स्क्रोलबार शिफ़्ट हो सकता है और उसकी ऊंचाई बदल सकता है. ये एलिमेंट, उपयोगकर्ता को तुरंत दिखने लगते हैं. इसे कम करने के लिए, contain-intrinsic-size प्रॉपर्टी लागू करें.
content-visibility को हाल ही में 'बेसलाइन न्यूली' उपलब्ध कराया गया है. इसलिए, ब्राउज़र का इस्तेमाल करने वाले उन उपयोगकर्ताओं को लेकर आपकी कुछ समस्याएं हो सकती हैं जिन्हें अभी तक नई प्रॉपर्टी का इस्तेमाल करने के लिए अपडेट नहीं किया गया है. content-visibility एक सीएसएस प्रॉपर्टी है, इसलिए आपको ज़्यादा परेशान होने की ज़रूरत नहीं है! जो ब्राउज़र इसे समझते हैं वे इसका इस्तेमाल करेंगे और जो नहीं समझते वे इसका इस्तेमाल नहीं करेंगे. इसका मतलब है कि content-visibility के साथ काम करने वाले ब्राउज़र से आपको परफ़ॉर्मेंस से जुड़े फ़ायदे मिलेंगे. साथ ही, आपको यह भी उम्मीद करनी चाहिए कि पेज पहले की तरह ही काम करेंगे.
content-visibility से एक अतिरिक्त फ़ायदा मिलता है—और अगर कुछ ऐसे मामले हैं जहां पेज लोड होने के दौरान रेंडरिंग के काम को कम किया जा सकता है, तो आपको इसका इस्तेमाल करके यह पक्का करना चाहिए कि आपके पेजों को प्रोसेस करने के लिए, ज़रूरत के समय ज़्यादा से ज़्यादा इस्तेमाल किया जा सके. अब यह सुविधा, बेसलाइन के तौर पर उपलब्ध है. इसका इस्तेमाल करें, ताकि उपयोगकर्ताओं को रेंडरिंग के उस काम से फ़ायदा मिल सके जिसे यह सुविधा ज़रूरत पड़ने तक नहीं करती.