चाहे आप किसी यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी का इस्तेमाल करें या अपनी स्टाइल को हैंडक्राफ़्ट करें, आपको सीएसएस को रेंडर करने में काफ़ी देरी हो सकती है. इसकी वजह यह है कि पेज दिखाने से पहले ब्राउज़र को सीएसएस फ़ाइलें डाउनलोड और पार्स करनी होती हैं.
आइसक्रीम की यह रिस्पॉन्सिव गैलरी, Bootstrap की मदद से बनाई गई है. बूटस्ट्रैप जैसी यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी डेवलपमेंट की रफ़्तार को बढ़ा देती हैं, लेकिन इसकी वजह अक्सर ज़्यादा सीएसएस की वजह से हो जाती है, जिससे आपका लोड समय कम हो सकता है. बूटस्ट्रैप 4 का साइज़ 187 केबी है. वहीं, एक और यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी, सिमैंटिक यूज़र इंटरफ़ेस (यूआई) का साइज़, 730 केबी का है, जिसे कंप्रेस किया गया है. छोटी की गई और gzip करने के बाद भी, बूटस्ट्रैप का वज़न करीब 20 केबी होता है. यह पहली दोतरफ़ा यात्रा के लिए 14 केबी थ्रेशोल्ड से भी ज़्यादा होता है.
ज़रूरी एक ऐसा टूल है जो फ़ोल्ड के ऊपर मौजूद सीएसएस को निकालता है, छोटा करता है, और इनलाइन करता है. इससे पेज के ऊपरी हिस्से पर मौजूद कॉन्टेंट को जल्द से जल्द रेंडर किया जा सकता है. भले ही, पेज के अन्य हिस्सों के लिए सीएसएस अभी तक लोड न हुई हो. इस कोडलैब में, आपको Critical के npm मॉड्यूल का इस्तेमाल करने का तरीका पता चलेगा.
मापें
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
इस साइट पर Lighthouse ऑडिट चलाने के लिए:
- DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
- Lighthouse टैब पर क्लिक करें.
- मोबाइल पर क्लिक करें.
- परफ़ॉर्मेंस चेकबॉक्स चुनें.
- ऑडिट सेक्शन में, बाकी चेकबॉक्स से सही का निशान हटाएं.
- सिमुलेटेड फ़ास्ट 3G, 4x सीपीयू स्लोडाउन पर क्लिक करें.
- स्टोरेज खाली करें चेकबॉक्स को चुनें. इस विकल्प को चुनने पर, Lighthouse कैश मेमोरी से संसाधन लोड नहीं करेगा. इससे यह पता चलता है कि पहली बार आने वाले लोगों को पेज कैसा दिखेगा.
- ऑडिट चलाएं पर क्लिक करें.
मशीन पर ऑडिट करने पर, सटीक नतीजे अलग-अलग हो सकते हैं. हालांकि, फ़िल्मस्ट्रिप व्यू में आपको दिखेगा कि कॉन्टेंट को रेंडर करने से पहले, ऐप्लिकेशन में काफ़ी देर तक खाली स्क्रीन दिखती है. यही वजह है कि फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) का स्कोर ज़्यादा है और परफ़ॉर्मेंस का कुल स्कोर अच्छा नहीं है.
Lighthouse, परफ़ॉर्मेंस से जुड़ी समस्याओं को ठीक करने में आपकी मदद करता है. इसलिए, अवसर सेक्शन में समाधान देखें. रेंडर ब्लॉक करने वाले रिसॉर्स हटाना को अवसर के तौर पर लिस्ट किया गया है. यहां क्रिटिकल की भूमिका अहम है!
Optimize
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
प्रोसेस को तेज़ करने के लिए, Critical पहले से ही इंस्टॉल है और कोडलैब में एक खाली कॉन्फ़िगरेशन फ़ाइल शामिल है.
कॉन्फ़िगरेशन फ़ाइल critical.js में, क्रिटिकल का रेफ़रंस जोड़ें. इसके बाद, critical.generate() फ़ंक्शन शुरू करें. यह फ़ंक्शन, कॉन्फ़िगरेशन वाले ऑब्जेक्ट को स्वीकार करता है.
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
गड़बड़ी को मैनेज करना ज़रूरी नहीं है. हालांकि, इससे कंसोल में ऑपरेशन के सही तरीके से होने का पता लगाना आसान हो जाता है.
'गंभीर' को कॉन्फ़िगर करना
नीचे दी गई टेबल में, अहम विकल्पों के कुछ अहम विकल्प दिए गए हैं. GitHub पर उपलब्ध सभी विकल्प देखे जा सकते हैं.
| विकल्प | टाइप | जानकारी |
|---|---|---|
base |
स्ट्रिंग | आपकी फ़ाइलों की मुख्य डायरेक्ट्री. |
src |
स्ट्रिंग | एचटीएमएल सोर्स फ़ाइल. |
dest |
स्ट्रिंग | आउटपुट फ़ाइल का टारगेट. अगर सीएसएस इनलाइन है, तो आउटपुट फ़ाइल एचटीएमएल है. अगर ऐसा नहीं है, तो आउटपुट एक CSS फ़ाइल है. |
width, height |
नंबर | पिक्सल में व्यूपोर्ट की चौड़ाई और ऊंचाई. |
dimensions |
श्रेणी | इसमें चौड़ाई और ऊंचाई प्रॉपर्टी वाले ऑब्जेक्ट शामिल होते हैं. ये ऑब्जेक्ट उन व्यूपोर्ट को दिखाते हैं जिन्हें आपको फ़ोल्ड के ऊपर मौजूद सीएसएस से टारगेट करना है. अगर आपकी सीएसएस में मीडिया क्वेरी हैं, तो इससे आपको ज़रूरी सीएसएस जनरेट करने में मदद मिलती है. यह सीएसएस, व्यूपोर्ट के कई साइज़ को कवर करती है. |
inline |
बूलियन | अगर नीति को 'सही है' पर सेट किया जाता है, तो जनरेट किया गया अहम सीएसएस, एचटीएमएल सोर्स फ़ाइल की लाइन में दिखता है. |
minify |
बूलियन | 'सही है' पर सेट होने पर, क्रिटिकल, जनरेट की गई क्रिटिकल सीएसएस को छोटा कर देता है. एक से ज़्यादा रिज़ॉल्यूशन के लिए क्रिटिकल सीएसएस निकालते समय, इसे छोड़ा जा सकता है. ऐसा इसलिए, क्योंकि डुप्लीकेट नियम को शामिल करने से बचने के लिए, क्रिटिकल अपने-आप छोटा हो जाता है. |
यहां एक से ज़्यादा रिज़ॉल्यूशन के लिए, क्रिटिकल सीएसएस निकालने के कॉन्फ़िगरेशन का उदाहरण दिया गया है. इसे critical.js में जोड़ें या विकल्पों को आज़माकर उनमें बदलाव करें.
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
इस उदाहरण में, index.html सोर्स फ़ाइल और डेस्टिनेशन फ़ाइल, दोनों है, क्योंकि inline विकल्प 'सही' पर सेट है. क्रिटिकल सबसे पहले एचटीएमएल सोर्स फ़ाइल को पढ़ता है, ज़रूरी सीएसएस को निकालता है, और फिर <head> में इनलाइन की गई ज़रूरी सीएसएस के साथ index.html को ओवरराइट करता है.
dimensions कलेक्शन में दो व्यूपोर्ट साइज़ तय किए गए हैं: बहुत छोटी स्क्रीन के लिए 300 x 500 और स्टैंडर्ड लैपटॉप स्क्रीन के लिए 1280 x 720.
minify विकल्प को छोड़ दिया गया है, क्योंकि व्यूपोर्ट के एक से ज़्यादा साइज़ तय होने पर 'ज़रूरी', एक्सट्रैक्ट किए गए सीएसएस को अपने-आप छोटा कर देता है.
Run Critical
package.json में अपनी स्क्रिप्ट में ज़रूरी जोड़ें:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Terminal पर क्लिक करें (ध्यान दें: अगर Terminal बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
क्रिटिकल सीएसएस जनरेट करने के लिए, कंसोल में यह कमांड चलाएं:
npm run critical
refresh
अब index.html के <head> टैग में, जनरेट की गई ज़रूरी सीएसएस को <style> टैग के बीच इनलाइन किया गया है. इसके बाद, एक स्क्रिप्ट है जो बाकी सीएसएस को एसिंक्रोनस तरीके से लोड करती है.
फिर से मापें
लाइटहाउस परफ़ॉर्मेंस ऑडिट फिर से चलाने के लिए, कोडलैब की शुरुआत में दिया गया तरीका अपनाएं. आपको मिलने वाले नतीजे कुछ इस तरह दिखेंगे:
