पब्लिश किया गया: 17 अगस्त, 2018
इस गाइड में, PageSpeed Insights के नियमों की समीक्षा की गई है: क्रिटिकल रेंडरिंग पाथ को ऑप्टिमाइज़ करते समय किन बातों का ध्यान रखना चाहिए और क्यों.
रेंडर को ब्लॉक करने वाली JavaScript और सीएसएस को हटाएं
पेज को तेज़ी से रेंडर करने के लिए, पेज पर मौजूद ज़रूरी रिसॉर्स की संख्या को कम करें और जहां भी हो सके वहां उन्हें हटा दें. साथ ही, डाउनलोड किए गए ज़रूरी बाइट की संख्या को कम करें और क्रिटिकल पाथ की लंबाई को ऑप्टिमाइज़ करें.
JavaScript के इस्तेमाल को ऑप्टिमाइज़ करना
जब तक async के तौर पर मार्क न किया गया हो या किसी खास JavaScript स्निपेट का इस्तेमाल करके जोड़ा न गया हो, तब तक 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(), एक से ज़्यादा इवेंट हैंडलर के बजाय, प्रॉमिस का इस्तेमाल करके रिस्पॉन्स को प्रोसेस करता है. 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 नियम मिलता है और इसे पार्स किया जाता है.
रेंडर रोकने वाले सीएसएस को इनलाइन करें
सबसे अच्छी परफ़ॉर्मेंस के लिए, ज़रूरी सीएसएस को सीधे एचटीएमएल दस्तावेज़ में इनलाइन करें. इससे क्रिटिकल पाथ में अतिरिक्त राउंड ट्रिप खत्म हो जाते हैं. अगर सही तरीके से किया जाता है, तो क्रिटिकल पाथ की लंबाई "एक राउंड ट्रिप" हो सकती है. ऐसा तब होता है, जब सिर्फ़ एचटीएमएल एक ब्लॉकिंग रिसॉर्स होता है.