पब्लिश किया गया: 17 अगस्त, 2018
इस गाइड में, PageSpeed Insights के नियमों की समीक्षा की गई है: क्रिटिकल रेंडरिंग पाथ को ऑप्टिमाइज़ करते समय किन बातों का ध्यान रखना चाहिए और क्यों.
रेंडर को ब्लॉक करने वाली JavaScript और सीएसएस को हटाएं
पेज को तेज़ी से रेंडर करने के लिए, पेज पर मौजूद ज़रूरी रिसॉर्स की संख्या को कम करें और जहां हो सके वहां उन्हें हटा दें. साथ ही, डाउनलोड किए गए ज़रूरी बाइट की संख्या को कम करें और क्रिटिकल पाथ की लंबाई को ऑप्टिमाइज़ करें.
JavaScript के इस्तेमाल को ऑप्टिमाइज़ करना
JavaScript रिसॉर्स, डिफ़ॉल्ट रूप से पार्स करने से रोकने वाले होते हैं. हालांकि, अगर उन्हें async के तौर पर मार्क किया जाता है या किसी खास JavaScript स्निपेट का इस्तेमाल करके जोड़ा जाता है, तो ऐसा नहीं होता. JavaScript को पार्स करने से रोकने की सुविधा, ब्राउज़र को सीएसएसओएम के इंतज़ार में मजबूर कर देती है. साथ ही, डीओएम के निर्माण को रोक देती है. इस वजह से, पेज को पहली बार रेंडर होने में काफ़ी समय लग सकता है.
एसिंक्रोनस JavaScript रिसॉर्स को प्राथमिकता दें
असाइनोक्रोनस रिसॉर्स, दस्तावेज़ पार्स करने वाले टूल को अनब्लॉक करते हैं. साथ ही, स्क्रिप्ट को लागू करने से पहले, ब्राउज़र को सीएसएसओएम को ब्लॉक करने से रोकते हैं. आम तौर पर, अगर स्क्रिप्ट में async एट्रिब्यूट का इस्तेमाल किया जा सकता है, तो इसका मतलब यह भी है कि इसे पहले रेंडर के लिए ज़रूरी नहीं है. शुरुआती रेंडर के बाद, एसिंक्रोनस तरीके से स्क्रिप्ट लोड करें.
सिंक्रोनस सर्वर कॉल से बचना
unload हैंडलर में XMLHttpRequests से भेजे गए डेटा को सीमित करने के लिए, navigator.sendBeacon() तरीके का इस्तेमाल करें. कई ब्राउज़र में, ऐसे अनुरोधों को एक साथ करने की ज़रूरत होती है. इसलिए, ये पेज ट्रांज़िशन को धीमा कर सकते हैं. यहां दिए गए कोड में, unload हैंडलर के बजाय pagehide हैंडलर में सर्वर को डेटा भेजने के लिए, navigator.sendBeacon() का इस्तेमाल करने का तरीका बताया गया है.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
fetch() का तरीका, डेटा का अनुरोध करने का बेहतर तरीका है. fetch(), कई इवेंट हैंडलर के बजाय Promises का इस्तेमाल करके रिस्पॉन्स प्रोसेस करता है. XMLHttpRequest के रिस्पॉन्स के उलट, fetch() रिस्पॉन्स एक स्ट्रीम ऑब्जेक्ट होता है. इसका मतलब है कि json() को कॉल करने पर भी एक प्रॉमिस मिलता है.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
fetch() मेथड, पोस्ट अनुरोधों को भी मैनेज कर सकता है.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
JavaScript को पार्स करने की प्रोसेस को रोकना
पेज को रेंडर करने के लिए ब्राउज़र को ज़्यादा काम न करना पड़े, इसके लिए ऐसी सभी स्क्रिप्ट को बाद में चलाएं जो शुरुआती रेंडर के लिए दिखने वाले कॉन्टेंट को बनाने के लिए ज़रूरी नहीं हैं.
लंबे समय तक चलने वाली JavaScript से बचना
लंबे समय तक चलने वाला JavaScript, ब्राउज़र को DOM, CSSOM बनाने और पेज को रेंडर करने से रोकता है. इसलिए, शुरुआती रेंडरिंग के लिए ज़रूरी न होने वाले किसी भी लॉजिक को बाद के लिए छोड़ दें. अगर आपको लंबा इनिशलाइज़ेशन सीक्वेंस चलाना है, तो उसे कई चरणों में बांटें, ताकि ब्राउज़र बीच में अन्य इवेंट को प्रोसेस कर सके.
सीएसएस के इस्तेमाल को ऑप्टिमाइज़ करना
रेंडर ट्री बनाने के लिए सीएसएस ज़रूरी है. साथ ही, पेज के शुरुआती कॉन्टेंट को बनाने के दौरान, JavaScript अक्सर सीएसएस पर ब्लॉक हो जाता है. पक्का करें कि ज़रूरी नहीं सीएसएस को 'ज़रूरी नहीं' के तौर पर मार्क किया गया हो. जैसे, प्रिंट और अन्य मीडिया क्वेरी. साथ ही, ज़रूरी सीएसएस की संख्या और उसे डिलीवर करने में लगने वाला समय कम से कम हो.
CSS को दस्तावेज़ के शीर्ष भाग में रखें
एचटीएमएल दस्तावेज़ में, सीएसएस के सभी रिसॉर्स को जल्द से जल्द बताएं, ताकि ब्राउज़र <link> टैग को ढूंढ सके और सीएसएस के लिए अनुरोध जल्द से जल्द भेज सके.
सीएसएस इंपोर्ट से बचना
सीएसएस इंपोर्ट (@import) डायरेक्टिव की मदद से, एक स्टाइल शीट से दूसरी स्टाइल शीट फ़ाइल में नियम इंपोर्ट किए जा सकते हैं. हालांकि, इन निर्देशों का इस्तेमाल न करें, क्योंकि ये क्रिटिकल पाथ में अतिरिक्त राउंड ट्रिप जोड़ते हैं: इंपोर्ट किए गए सीएसएस संसाधनों का पता तब चलता है, जब @import नियम वाली सीएसएस स्टाइल शीट को पार्स कर लिया जाता है.
रेंडर रोकने वाले सीएसएस को इनलाइन करें
बेहतर परफ़ॉर्मेंस के लिए, क्रिटिकल सीएसएस को सीधे एचटीएमएल दस्तावेज़ में इनलाइन किया जा सकता है. इससे क्रिटिकल पाथ में अतिरिक्त राउंड ट्रिप खत्म हो जाते हैं. अगर सही तरीके से किया जाता है, तो क्रिटिकल पाथ की लंबाई "एक राउंड ट्रिप" हो सकती है. ऐसा तब होता है, जब सिर्फ़ एचटीएमएल एक ब्लॉकिंग रिसॉर्स होता है.