ज़रूरी सीएसएस तकनीक की मदद से, रेंडर होने में लगने वाले समय को बेहतर बनाने का तरीका जानें.
ब्राउज़र को पेज दिखाने से पहले, सीएसएस फ़ाइलों को डाउनलोड और पार्स करना होगा. इससे सीएसएस, रेंडर होने की प्रोसेस पर रोक लगाने वाला रिसॉर्स बन जाता है. अगर सीएसएस फ़ाइलें बड़ी हैं या नेटवर्क की स्थिति खराब है, तो सीएसएस फ़ाइलों के लिए अनुरोध करने पर, वेब पेज को रेंडर होने में लगने वाला समय बढ़ सकता है.
एचटीएमएल दस्तावेज़ के <head> में निकाली गई स्टाइल को इनलाइन करने से, इन स्टाइल को पाने के लिए अलग से अनुरोध करने की ज़रूरत नहीं पड़ती. सीएसएस के बाकी हिस्से को एसिंक्रोनस रूप से लोड किया जा सकता है.
रेंडर होने में लगने वाले समय को कम करने से, अनुमानित परफ़ॉर्मेंस में काफ़ी अंतर दिख सकता है. ऐसा खास तौर पर तब होता है, जब नेटवर्क खराब हो. मोबाइल नेटवर्क पर, इंतज़ार का समय ज़्यादा होना एक समस्या है. इससे कोई फ़र्क़ नहीं पड़ता कि बैंडविथ कैसा है.
अगर आपका फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) खराब है और "रेंडर ब्लॉक करने वाले संसाधन हटाएं" देखें लाइटहाउस ऑडिट में हिस्सा लेने का मौका देते हैं. आकलन करने के लिए ज़रूरी सीएसएस को छोड़ दें.
पहली बार रेंडर करने के लिए राउंडट्रिप की संख्या को कम करने के लिए, पेज के ऊपरी हिस्से पर मौजूद कॉन्टेंट को 14 केबी (कंप्रेस्ड) से कम रखें.
इस तकनीक का इस्तेमाल करके हासिल की जा सकने वाली परफ़ॉर्मेंस का असर, आपकी वेबसाइट के टाइप पर निर्भर करता है. आम तौर पर, किसी साइट का सीएसएस जितना ज़्यादा होगा, इनलाइन सीएसएस का असर उतना ही ज़्यादा होगा.
टूल की खास जानकारी
ऐसे कई बेहतरीन टूल हैं जो किसी पेज के लिए ज़रूरी सीएसएस का पता अपने-आप लगा सकते हैं. यह अच्छी खबर है, क्योंकि मैन्युअल तरीके से ऐसा करना मुश्किल होगा. व्यूपोर्ट में हर एलिमेंट पर लागू होने वाली स्टाइल तय करने के लिए, पूरे डीओएम का विश्लेषण करना ज़रूरी होता है.
सबसे अहम सिद्धांत
क्रिटिकल एक्सट्रैक्ट, छोटी की गई, और वेबपेज के ऊपरी हिस्से में इनलाइन हैं. यह एनपीएम मॉड्यूल के तौर पर उपलब्ध है. इसका इस्तेमाल Gulp के साथ (सीधे तौर पर) या Grunt के साथ किया जा सकता है (प्लग-इन के तौर पर) और एक webpack प्लगिन भी मौजूद है.
यह एक आसान टूल है, जिसकी प्रोसेस के बारे में सोचने के लिए बहुत मेहनत करनी पड़ती है. आपको स्टाइलशीट तय करने की भी ज़रूरत नहीं होती है. क्रिटिकल, उनकी पहचान अपने-आप कर लेते हैं. इसकी मदद से, एक से ज़्यादा स्क्रीन रिज़ॉल्यूशन के लिए ज़रूरी सीएसएस को एक्सट्रैक्ट किया जा सकता है.
criticalCSS
CriticalCSS एक और एनपीएम मॉड्यूल है, जो पेज के ऊपरी हिस्से में मौजूद सीएसएस को एक्सट्रैक्ट करता है. यह सीएलआई के तौर पर भी उपलब्ध है.
इसमें ज़रूरी सीएसएस को इनलाइन और छोटा करने के विकल्प नहीं हैं. हालांकि, यह आपको ऐसे नियमों को ज़बरदस्ती शामिल करने देता है जो असल में ज़रूरी सीएसएस में शामिल नहीं हैं. साथ ही, यह आपको @font-face के एलान को शामिल करने के लिए ज़्यादा कंट्रोल देता है.
पेंटहाउस
अगर आपकी साइट या ऐप्लिकेशन में बड़ी संख्या में स्टाइल या स्टाइल हैं, जिन्हें डाइनैमिक तरीके से डीओएम में डाला जा रहा है, तो पेंटहाउस एक अच्छा विकल्प है. यह आम तौर पर ऐंग्युलर ऐप्लिकेशन में होता है. इसमें Puppeteer का इस्तेमाल किया जाता है. साथ ही, इसका ऑनलाइन होस्ट किया गया वर्शन भी है.
Penthouse, स्टाइलशीट का अपने-आप पता नहीं लगा लेता. आपको ऐसी एचटीएमएल और सीएसएस फ़ाइलें तय करनी होंगी जिनके लिए आपको ज़रूरी सीएसएस जनरेट करना है. इसका फ़ायदा यह है कि यह कई कामों को एक साथ चलाने में मदद करता है.