वेब की परफ़ॉर्मेंस से, उपयोगकर्ता के पूरे अनुभव पर काफ़ी असर पड़ सकता है. अगर आपने हाल ही में अपनी साइट की परफ़ॉर्मेंस को बेहतर बनाने की कोशिश की है, तो हो सकता है कि आपने PageSpeed Insights के बारे में सुना हो. यह एक ऐसा टूल है जो पेजों का विश्लेषण करता है और मोबाइल और डेस्कटॉप वेब की परफ़ॉर्मेंस के सबसे सही तरीकों के आधार पर, उन्हें तेज़ी से लोड करने के बारे में सलाह देता है.
PageSpeed का स्कोर कई बातों पर निर्भर करता है. जैसे, आपकी स्क्रिप्ट को कितना कम किया गया है, इमेज को कितना ऑप्टिमाइज़ किया गया है, कॉन्टेंट को कितना ज़िप किया गया है, टैप टारगेट का साइज़ कितना सही है, और लैंडिंग पेज पर रीडायरेक्ट से बचा गया है या नहीं.
40% लोग ऐसे पेज बंद कर देते हैं जिसे लोड होने में तीन सेकंड से ज़्यादा समय लगता है. इसलिए, यह देखना कि आपके पेज उपयोगकर्ताओं के डिवाइसों पर कितनी तेज़ी से लोड होते हैं, हमारे डेवलपमेंट वर्कफ़्लो का एक अहम हिस्सा बनता जा रहा है.
आपकी बिल्ड प्रोसेस में परफ़ॉर्मेंस मेट्रिक
अपने स्कोर के बारे में जानने के लिए, PageSpeed Insights पर मैन्युअल तरीके से जाना ठीक है. हालांकि, कई डेवलपर यह पूछ रहे हैं कि क्या उनकी बिल्ड प्रोसेस में भी परफ़ॉर्मेंस की मिलती-जुलती स्कोरिंग की जा सकती है.
इसका जवाब है: हां.
पेश है Node के लिए PSI
आज हमें Node के लिए PSI पेश करते हुए खुशी हो रही है. यह एक नया मॉड्यूल है, जो Gulp, Grunt, और अन्य बिल्ड सिस्टम के साथ बेहतर तरीके से काम करता है. साथ ही, यह PageSpeed Insights सेवा से कनेक्ट करके, आपकी वेबसाइट की परफ़ॉर्मेंस की पूरी जानकारी देने वाली रिपोर्ट दिखा सकता है. आइए, इस सुविधा की मदद से मिलने वाली रिपोर्टिंग की झलक देखें:
ऊपर दिए गए नतीजों से, यह पता चलता है कि किस तरह के सुधार किए जा सकते हैं. उदाहरण के लिए, व्यूपोर्ट के हिसाब से कॉन्टेंट का साइज़ 5.92 होने का मतलब है कि अब भी “कुछ” काम किया जा सकता है. वहीं, रेंडर ब्लॉक करने वाले संसाधनों को कम करने के लिए 24 का मतलब है कि आपको async एट्रिब्यूट का इस्तेमाल करके, JS को लोड करने में देरी करनी होगी.
PageSpeed Insights का इस्तेमाल करना आसान बनाना
अगर आपने पहले कभी PageSpeed Insights API का इस्तेमाल किया है या इसके आधार पर बनाए गए किसी टूल का इस्तेमाल किया है, तो हो सकता है कि आपको एपीआई पासकोड के लिए रजिस्टर करना पड़ा हो. हम जानते हैं कि यह प्रोसेस कुछ ही मिनटों में पूरी हो जाती है. हालांकि, अपने सामान्य वर्कफ़्लो के हिस्से के तौर पर अहम जानकारी पाने के लिए, यह प्रोसेस थोड़ी परेशानी वाली हो सकती है.
हमें आपको यह बताते हुए खुशी हो रही है कि PageSpeed Insights की सेवा, हर पांच सेकंड में एक अनुरोध करने के लिए, एपीआई पासकोड के बिना अनुरोध करने की सुविधा देती है. यह सुविधा सभी के लिए काफ़ी है. नियमित तौर पर इस्तेमाल करने या गंभीर प्रोडक्शन बिल्ड के लिए, आपको शायद किसी कुंजी के लिए रजिस्टर करना पड़े.
PSI मॉड्यूल, कुछ ही मिनटों में सेट अप करने के लिए nokey विकल्प और थोड़े समय के लिए key विकल्प, दोनों के साथ काम करता है. एपीआई पासकोड के लिए रजिस्टर करने का तरीका बताया गया है.
शुरू करना
अपने वर्कफ़्लो में पीएसआई को इंटिग्रेट करने के लिए, आपके पास दो विकल्प हैं. इसे अपनी बिल्ड प्रोसेस में इंटिग्रेट किया जा सकता है या अपने सिस्टम पर, दुनिया भर में इंस्टॉल किए गए टूल के तौर पर चलाया जा सकता है.
बिल्ड प्रोसेस
Grunt या Gulp की बिल्ड-प्रोसेस में PSI का इस्तेमाल करना काफ़ी आसान है. अगर किसी Gulp प्रोजेक्ट पर काम किया जा रहा है, तो PSI को सीधे तौर पर इंस्टॉल और इस्तेमाल किया जा सकता है.
इंस्टॉल करें
npm का इस्तेमाल करके PSI इंस्टॉल करें और इसे अपनी package.json फ़ाइल में सेव करने के लिए --save-dev पास करें.
npm install psi --save-dev
इसके बाद, अपनी gulpfile में इसके लिए 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 का इस्तेमाल किया जा रहा है, तो James Cryer के grunt-pagespeed का इस्तेमाल किया जा सकता है. यह टूल अब अपनी रिपोर्टिंग के लिए PSI का इस्तेमाल करता है.
इंस्टॉल करें
npm install grunt-pagespeed --save-dev
इसके बाद, टास्क को अपनी Gruntfile में लोड करें:
grunt.loadNpmTasks('grunt-pagespeed');
और इसे इस्तेमाल के लिए कॉन्फ़िगर करें:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
इसके बाद, टास्क को चलाने के लिए:
grunt pagespeed
ग्लोबल टूल के तौर पर इंस्टॉल करना
आपके पास अपने सिस्टम पर, दुनिया भर में उपलब्ध टूल के तौर पर PSI इंस्टॉल करने का भी विकल्प है. टूल को इंस्टॉल करने के लिए, हम फिर से npm का इस्तेमाल कर सकते हैं:
$ npm install -g psi
इसके बाद, किसी भी टर्मिनल विंडो से, किसी साइट के लिए PageSpeed Insights की रिपोर्ट का अनुरोध करें. इसके लिए, nokey विकल्प या एपीआई के हिसाब से key का इस्तेमाल करें. यह तरीका यहां बताया गया है:
psi http://www.html5rocks.com --nokey --strategy=mobile
या जिनके पास रजिस्टर की गई एपीआई पासकोड है उनके लिए:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
बस इतना ही!
आगे बढ़ें और परफ़ॉर्मेंस को अपनी संस्कृति का हिस्सा बनाएं
हमें अपने डिज़ाइन और उन्हें लागू करने के तरीके से, उपयोगकर्ता अनुभव पर पड़ने वाले असर के बारे में ज़्यादा सोचना होगा.
PSI जैसे समाधान, डेस्कटॉप और मोबाइल पर आपकी वेब परफ़ॉर्मेंस पर नज़र रख सकते हैं. साथ ही, डिप्लॉयमेंट के बाद के सामान्य वर्कफ़्लो के हिस्से के तौर पर इस्तेमाल किए जाने पर, ये आपके लिए मददगार होते हैं.
हमें आपके सुझाव, शिकायत या राय जानने में खुशी होगी. हमें उम्मीद है कि पीएसआई से आपकी टीम की परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलेगी.