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