चाहे आप यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी का इस्तेमाल करें या अपनी स्टाइल हैंडक्राफ़्ट करें, सीएसएस के लिए रेंडर होने में काफ़ी देरी होती है. इसकी वजह यह है कि पेज दिखाने से पहले, ब्राउज़र को सीएसएस फ़ाइलें डाउनलोड और पार्स करनी पड़ती हैं.
यह रिस्पॉन्सिव आइसक्रीम गैलरी, बूटस्ट्रैप की मदद से बनाई गई है. बूटस्ट्रैप जैसी यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी की मदद से डेवलपमेंट में तेज़ी मिलती है. हालांकि, अक्सर ऐसा करने के लिए कई बार बढ़ा-चढ़ाकर और ग़ैर-ज़रूरी सीएसएस का इस्तेमाल करना पड़ता है. इससे आपका कॉन्टेंट लोड होने में लगने वाला समय कम हो सकता है. बूटस्ट्रैप 4 187 केबी का है, जबकि सेमैंटिक यूज़र इंटरफ़ेस (यूआई), दूसरी यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी का है. इसका साइज़ 730 केबी से ज़्यादा नहीं होना चाहिए. छोटा और gzip करने के बाद भी, बूटस्ट्रैप का वज़न करीब 20 केबी होता है. यह पहले राउंडट्रिप के लिए 14 केबी के थ्रेशोल्ड से ज़्यादा होता है.
क्रिटिकल ऐसा टूल है जो पेज के ऊपरी हिस्से में मौजूद सीएसएस को एक्सट्रैक्ट करता है, छोटा करता है, और इनलाइन करता है. इससे पेज के ऊपरी हिस्से पर मौजूद कॉन्टेंट को जल्द से जल्द रेंडर किया जा सकता है. भले ही, पेज के अन्य हिस्सों के लिए सीएसएस अभी तक लोड न हुई हो. इस कोडलैब में, आप क्रिटिकल के npm मॉड्यूल को इस्तेमाल करने का तरीका जानेंगे.
दूरी मापें
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
इस साइट पर लाइटहाउस ऑडिट चलाने के लिए:
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- लाइटहाउस टैब पर क्लिक करें.
- मोबाइल पर क्लिक करें.
- परफ़ॉर्मेंस चेकबॉक्स चुनें.
- ऑडिट सेक्शन में मौजूद बाकी चेकबॉक्स हटाएं.
- सिम्युलेटेड फ़ास्ट 3G, 4x सीपीयू स्लोडाउन पर क्लिक करें.
- स्टोरेज खाली करें चेकबॉक्स को चुनें. यह विकल्प चुनने पर लाइटहाउस, कैश मेमोरी से संसाधनों को लोड नहीं करेगा. इससे यह पता चलता है कि आपकी वेबसाइट पर पहली बार आने वाले लोगों को पेज कैसा दिखेगा.
- ऑडिट चलाएं पर क्लिक करें.
मशीन पर ऑडिट करने से, सटीक नतीजे अलग-अलग हो सकते हैं. हालांकि, फ़िल्मस्ट्रिप के हिसाब से कॉन्टेंट को रेंडर करने से पहले, आपको ऐप्लिकेशन में कुछ समय के लिए खाली स्क्रीन दिखेगी. इस वजह से, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) ज़्यादा है और कुल परफ़ॉर्मेंस का स्कोर बढ़िया नहीं है.
परफ़ॉर्मेंस से जुड़ी समस्याओं को ठीक करने में आपकी मदद करने के लिए, लाइटहाउस उपलब्ध है. इसलिए, ऑपर्च्यूनिटी सेक्शन में जाकर इसके समाधान देखें. रेंडर ब्लॉक करने वाले संसाधनों को हटाने की सुविधा एक अवसर के तौर पर दी गई है. यही वजह है कि ज़रूरी और असरदार हो जाते हैं!
Optimize
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
काम की रफ़्तार बढ़ाने के लिए, क्रिटिकल पहले से ही इंस्टॉल है और कोडलैब में एक खाली कॉन्फ़िगरेशन फ़ाइल शामिल है.
कॉन्फ़िगरेशन फ़ाइल 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 |
स्ट्रिंग | आउटपुट फ़ाइल का टारगेट. अगर सीएसएस इनलाइन किया गया है, तो आउटपुट फ़ाइल एचटीएमएल होती है. अगर ऐसा नहीं है, तो आउटपुट एक सीएसएस फ़ाइल है. |
width, height |
नंबर | पिक्सल में व्यूपोर्ट की चौड़ाई और ऊंचाई. |
dimensions |
श्रेणी | इसमें चौड़ाई और ऊंचाई के गुणों वाले ऑब्जेक्ट होते हैं. ये ऑब्जेक्ट, उन व्यूपोर्ट को दिखाते हैं जिन्हें आपको पेज के ऊपरी हिस्से पर मौजूद सीएसएस की मदद से टारगेट करना है. अगर आपकी सीएसएस में मीडिया क्वेरी हैं, तो इससे एक ज़रूरी सीएसएस जनरेट की जा सकती है. यह सीएसएस, व्यूपोर्ट के कई साइज़ को कवर करती है. |
inline |
boolean | अगर इस नीति को 'सही है' पर सेट किया जाता है, तो जनरेट किया गया क्रिटिकल सीएसएस, एचटीएमएल सोर्स फ़ाइल में इनलाइन हो जाता है. |
minify |
boolean | अगर वैल्यू को 'सही है' पर सेट किया जाता है, तो जनरेट की गई क्रिटिकल सीएसएस को कम से कम लागू कर दिया जाता है. एक से ज़्यादा रिज़ॉल्यूशन के लिए ज़रूरी सीएसएस एक्सट्रैक्ट करते समय हटाया जा सकता है, क्योंकि क्रिटिकल डुप्लीकेट नियम को शामिल करने से बचने के लिए इसे अपने-आप छोटा कर देता है. |
यहां एक से ज़्यादा रिज़ॉल्यूशन के लिए ज़रूरी सीएसएस एक्सट्रैक्ट करने के लिए कॉन्फ़िगरेशन का एक उदाहरण दिया गया है. इसे 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 विकल्प हटा दिया गया है, क्योंकि क्रिटिकल तब अपने-आप निकाले गए सीएसएस को छोटा कर देता है, जब व्यूपोर्ट के कई साइज़ तय किए जाते हैं.
ज़रूरी दौड़
package.json में अपनी स्क्रिप्ट में महत्वपूर्ण जोड़ें:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Terminal पर क्लिक करें (ध्यान दें: अगर टर्मिनल बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
ज़रूरी सीएसएस जनरेट करने के लिए, कंसोल में इसे चलाएं:
npm run critical
refresh
अब index.html के <head> टैग में, जनरेट किया गया क्रिटिकल सीएसएस, <style> टैग के बीच इनलाइन है. इसके बाद, एक ऐसी स्क्रिप्ट है जो बाकी सीएसएस को एसिंक्रोनस रूप से लोड करती है.
फिर से मापें
लाइटहाउस परफ़ॉर्मेंस ऑडिट को फिर से चलाने के लिए, कोडलैब की शुरुआत में दिए गए निर्देशों का पालन करें. आपको मिलने वाले नतीजे कुछ ऐसे दिखेंगे:
