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