वेब परफ़ॉर्मेंस का आपके पूरे उपयोगकर्ता अनुभव पर गहरा असर पड़ सकता है. अगर आप हाल ही में अपनी साइट की परफ़ॉर्मेंस को बेहतर बनाने की कोशिश कर रहे थे, तो शायद आपने PageSpeed Insights के बारे में सुना होगा. यह एक ऐसा टूल है जो पेजों का विश्लेषण करता है. साथ ही, मोबाइल और डेस्कटॉप वेब परफ़ॉर्मेंस के सबसे सही तरीकों के आधार पर, पेजों को तेज़ बनाने के बारे में सलाह देता है.
PageSpeed के स्कोर कई चीज़ों पर आधारित होते हैं. इनमें, आपकी स्क्रिप्ट को कितनी अच्छी तरह छोटा किया गया है, इमेज को कितनी अच्छी तरह ऑप्टिमाइज़ किया गया है, कॉन्टेंट को gzip किया गया है, टैप किए गए टारगेट का सही साइज़ दिया गया है, और लैंडिंग पेज रीडायरेक्ट पर रोक लगाई गई है.
40% लोग ऐसे पेजों को छोड़ देते हैं जिन्हें लोड होने में तीन सेकंड से ज़्यादा समय लगता है. ऐसे में, हम यह जानना चाहते हैं कि उपयोगकर्ताओं के डिवाइसों पर आपके पेज कितनी तेज़ी से लोड होते हैं. इसलिए, हमारे डेवलपमेंट वर्कफ़्लो का एक अहम हिस्सा बनता जा रहा है.
बिल्ड प्रोसेस में परफ़ॉर्मेंस मेट्रिक
आपके स्कोर बेहतर हैं या नहीं, यह जानने के लिए वे मैन्युअल तरीके से PageSpeed Insights का इस्तेमाल करते हैं. हालांकि, कई डेवलपर ने पूछा था कि उनकी बिल्ड प्रोसेस में, मिलती-जुलती परफ़ॉर्मेंस स्कोरिंग मिल सकती है या नहीं.
जवाब है: बिल्कुल.
पेश है नोड के लिए पीएसआई
आज हमें नोड के लिए पीएसआई की सुविधा लॉन्च करने में खुशी हो रही है. यह एक नया मॉड्यूल है जो Gulp, Grunt, और अन्य बिल्ड सिस्टम के साथ अच्छी तरह काम करता है. साथ ही, यह PageSpeed Insights सेवा से कनेक्ट हो सकता है और आपके वेब की परफ़ॉर्मेंस की पूरी जानकारी वाली रिपोर्ट दे सकता है. आइए, इसके ज़रिए चालू होने वाली रिपोर्टिंग के टाइप की झलक देखते हैं:
ऊपर दिए गए नतीजों से, यह बेहतर तरीके से समझा जा सकता है कि किस तरह के सुधार किए जा सकते हैं. उदाहरण के लिए, व्यूपोर्ट के हिसाब से कॉन्टेंट के साइज़ के लिए 5.92 का मतलब है कि “कुछ” काम अब भी किए जा सकते हैं, जबकि रेंडर ब्लॉक करने वाले रिसॉर्स को कम करने के लिए 24 का कोड अब भी सुझाया जा सकता है कि आपको async एट्रिब्यूट का इस्तेमाल करके JS लोडिंग को रोकना होगा.
PageSpeed Insights की सुविधा में आने वाली रुकावट को कम करना
अगर आपने पहले PageSpeed Insights API को इस्तेमाल किया है या इसके साथ मिलने वाले हमारे किसी टूल को इस्तेमाल करने की कोशिश की है, तो आपको खास एपीआई पासकोड के लिए रजिस्टर करना पड़ता था. हम जानते हैं कि इसमें सिर्फ़ कुछ मिनट लगते हैं. हालांकि, सामान्य वर्कफ़्लो के तौर पर, अहम जानकारी पाने की सुविधा बंद हो सकती है.
हमें आपको यह बताते हुए खुशी हो रही है कि PageSpeed Insights सेवा, हर 5 सेकंड में ज़्यादा से ज़्यादा एक अनुरोध के लिए, एपीआई पासकोड के बिना अनुरोध करने की सुविधा देती है. यह सुविधा सभी के लिए उपलब्ध है. ज़्यादा नियमित इस्तेमाल या प्रोडक्शन में गंभीर समस्याओं के लिए, हो सकता है कि आप कुंजी के लिए रजिस्टर करना चाहें.
पीएसआई मॉड्यूल, nokey के विकल्प के साथ काम करता है. इससे कुछ ही मिनट में सेटअप हो जाता है और key विकल्प, दोनों का इस्तेमाल ज़्यादा समय के लिए किया जा सकता है. एपीआई पासकोड के लिए रजिस्टर करने के तरीके की जानकारी यहां दी गई है.
शुरुआत करना
अपने वर्कफ़्लो में पीएसआई को जोड़ने के लिए आपके पास दो विकल्प हैं. इसे या तो अपनी बिल्ड प्रोसेस में इंटिग्रेट किया जा सकता है या अपने सिस्टम पर, दुनिया भर में इंस्टॉल किए गए टूल के तौर पर चलाया जा सकता है.
बिल्ड प्रोसेस
अपने ग्रंट या Gulp बिल्ड-प्रोसेस में पीएसआई का इस्तेमाल करना बहुत आसान है. अगर किसी Gulp प्रोजेक्ट पर काम किया जा रहा है, तो आपके पास PSI को सीधे इंस्टॉल करने और इस्तेमाल करने का विकल्प है.
इंस्टॉल करें
एनपीएम का इस्तेमाल करके पीएसआई इंस्टॉल करें और उसे अपनी Package.json फ़ाइल में सेव करने के लिए, --save-dev पास करें.
npm install psi --save-dev
इसके बाद, अपनी गल्पफ़ाइल में इसके लिए एक Gulp टास्क इस तरह तय करें (इसे हमारे Gulp सैंपल प्रोजेक्ट में भी शामिल किया गया है):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
ऊपर दिए गए विकल्पों का इस्तेमाल करके टास्क चलाया जा सकता है:
gulp psi
अगर ग्रंट का इस्तेमाल किया जा रहा है, तो जेम्स क्रायर के grunt-pagespeed का इस्तेमाल किया जा सकता है. यह अब अपनी रिपोर्टिंग को बेहतर बनाने के लिए, पीएसआई का इस्तेमाल करता है.
इंस्टॉल करें
npm install grunt-pagespeed --save-dev
इसके बाद, Gruntfile में टास्क लोड करें:
grunt.loadNpmTasks('grunt-pagespeed');
और इसे इस्तेमाल के लिए कॉन्फ़िगर करें:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
इसके बाद, इनका इस्तेमाल करके टास्क चलाया जा सकता है:
grunt pagespeed
ग्लोबल टूल के तौर पर इंस्टॉल हो रहा है
अपने सिस्टम पर, दुनिया भर में उपलब्ध टूल के तौर पर पीएसआई को भी इंस्टॉल किया जा सकता है. एक बार फिर से, हम टूल इंस्टॉल करने के लिए एनपीएम का इस्तेमाल कर सकते हैं:
$ npm install -g psi
साथ ही, किसी भी टर्मिनल विंडो से, किसी साइट के लिए PageSpeed Insights रिपोर्ट का अनुरोध करें. (nokey विकल्प या एपीआई से जुड़े key का इस्तेमाल इस तरह से करें):
psi http://www.html5rocks.com --nokey --strategy=mobile
या जिनके पास रजिस्टर की गई API (एपीआई) कुंजी है:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
बस इतना ही!
आगे बढ़ें और परफ़ॉर्मेंस को अपनी संस्कृति का हिस्सा बनाएं
हमें इस बारे में ज़्यादा सोचना शुरू करना होगा कि उपयोगकर्ता अनुभव पर हमारे डिज़ाइन और उन्हें लागू करने का क्या असर होता है.
पीएसआई जैसे समाधान, डेस्कटॉप और मोबाइल पर वेब की परफ़ॉर्मेंस पर नज़र रख सकते हैं. इन्हें डिप्लॉयमेंट के बाद वाले वर्कफ़्लो के तौर पर इस्तेमाल करने से फ़ायदा होता है.
हम आपके सुझाव, शिकायत या राय का इंतज़ार करेंगे. हमें उम्मीद है कि पीएसआई, आपकी टीम की परफ़ॉर्मेंस को बेहतर बनाने में मदद करेगा.