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