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