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