इस पेज का अनुवाद Cloud Translation API से किया गया है.

Chrome की UX रिपोर्ट में, फ़र्स्ट इनपुट डिले के साथ प्रयोग करना

Rick Viscomi

Chrome उपयोगकर्ता अनुभव रिपोर्ट का मकसद, वेब कम्यूनिटी को असली उपयोगकर्ता की परफ़ॉर्मेंस के डिस्ट्रिब्यूशन और इवोल्यूशन को समझने में मदद करना है. अब तक, हमारा ध्यान पेंट और पेज लोड मेट्रिक पर रहा है. जैसे, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और ऑनलोड (ओएल). इनसे हमें यह समझने में मदद मिली है कि उपयोगकर्ताओं के लिए वेबसाइटें विज़ुअल तौर पर कैसी परफ़ॉर्म करती हैं. जून 2018 के रिलीज़ से, हम उपयोगकर्ता के हिसाब से बनाई गई एक नई मेट्रिक आज़मा रहे हैं. यह मेट्रिक, वेब पेजों के इंटरैक्शन पर फ़ोकस करती है: फ़र्स्ट इनपुट डिले (एफ़आईडी). इस नई मेट्रिक की मदद से, हमें यह बेहतर तरीके से समझने में मदद मिलेगी कि वेबसाइटें, उपयोगकर्ता के इनपुट के हिसाब से कितनी तेज़ी से काम करती हैं.

एफ़आईडी को हाल ही में Chrome में ऑरिजिन ट्रायल के तौर पर उपलब्ध कराया गया था. इसका मतलब है कि वेबसाइटें, वेब प्लैटफ़ॉर्म की इस नई सुविधा को आज़माने के लिए ऑप्ट इन कर सकती हैं. इसी तरह, Chrome UX रिपोर्ट में एफ़आईडी, प्रयोग के तौर पर उपलब्ध मेट्रिक के तौर पर दिखेगा. इसका मतलब है कि यह ऑरिजिन ट्रायल के दौरान, अलग "प्रयोग के तौर पर" नेमस्पेस में उपलब्ध होगा.

एफ़आईडी को कैसे मेज़र किया जाता है

तो असल में एफ़आईडी क्या है? पेज पर मौजूद लिंक को क्लिक करके उस पर पहुंचने वाला समय के एलान वाली ब्लॉग पोस्ट में, इसकी परिभाषा इस तरह दी गई है:

फ़र्स्ट इनपुट डिले (एफ़आईडी) से यह पता चलता है कि उपयोगकर्ता के आपकी साइट से इंटरैक्ट करने (जैसे, किसी लिंक पर क्लिक करने, बटन पर टैप करने या पसंद के मुताबिक JavaScript से चलने वाले कंट्रोल का इस्तेमाल करने) से लेकर ब्राउज़र के उस इंटरैक्शन का जवाब देने में कितना समय लगा.

इस ऐनिमेशन में दिखाया गया है कि किसी व्यस्त मुख्य थ्रेड की वजह से, उपयोगकर्ता के इंटरैक्शन के जवाब में देरी कैसे होती है.

यह किसी के दरवाज़े की घंटी बजने से लेकर, दरवाज़े के खुलने तक का समय मेज़र करने जैसा है. अगर इसमें ज़्यादा समय लगता है, तो इसकी कई वजहें हो सकती हैं. उदाहरण के लिए, हो सकता है कि वह व्यक्ति दरवाज़े से दूर हो या वह तेज़ी से हिल न पा रहा हो. इसी तरह, हो सकता है कि वेब पेज दूसरे काम करने में व्यस्त हों या उपयोगकर्ता का डिवाइस धीमा हो.

Chrome UX रिपोर्ट में एफ़आईडी को एक्सप्लोर करना

लाखों ऑरिजिन से मिले एक महीने के एफ़आईडी डेटा से, पहले से ही कई दिलचस्प अहम जानकारी मिल सकती है. आइए कुछ ऐसी क्वेरी पर नज़र डालते हैं, जो BigQuery पर Chrome UX रिपोर्ट से इस अहम जानकारी को पाने का तरीका दिखाती हैं.

developers.google.com के लिए, तेज़ एफ़आईडी अनुभव के प्रतिशत के बारे में क्वेरी करके शुरू करें. तेज़ अनुभव का मतलब है कि एफ़आईडी 100 मिलीसेकंड से कम हो. RAIL के सुझावों के मुताबिक, अगर देरी 100 मिलीसेकंड या उससे कम है, तो उपयोगकर्ता को तुरंत अनुभव मिलना चाहिए.

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
  origin = 'https://developers.google.com'

नतीजों से पता चलता है कि इस ऑरिजिन पर 95% एफ़आईडी अनुभव, तुरंत के तौर पर महसूस किए जाते हैं. यह काफ़ी अच्छा लगता है, लेकिन डेटासेट में मौजूद सभी ऑरिजिन की तुलना में यह कैसा है?

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid

इस क्वेरी के नतीजों से पता चलता है कि 84% एफ़आईडी 100 मिलीसेकंड से कम हैं. इसलिए, developers.google.com का एफ़आईडी औसत से ज़्यादा है.

ध्यान दें: यह समय-समय पर आपका रिमाइंडर भी है कि ऑरिजिन की लोकप्रियता को डेटासेट में कहीं भी नहीं दिखाया गया है. इसलिए, किसी ऐसे ऑरिजिन की डेंसिटी, जिसमें कुछ ही लाख उपयोगकर्ताओं को तुरंत एफ़आईडी का अनुभव मिलता है, वही हो सकती है जो तुरंत एफ़आईडी का अनुभव देने वाले कुछ ही सौ उपयोगकर्ताओं वाले ऑरिजिन की होती है.

इसके बाद, इस डेटा को स्लाइस करके देखें कि डेस्कटॉप और मोबाइल पर, फ़ास्ट एफ़आईडी के प्रतिशत में कोई फ़र्क़ है या नहीं. एक अनुमान यह है कि मोबाइल डिवाइसों की एफ़आईडी वैल्यू धीमी होती हैं. ऐसा, डेस्कटॉप कंप्यूटर की तुलना में धीमे हार्डवेयर की वजह से हो सकता है. अगर सीपीयू की परफ़ॉर्मेंस कम है, तो हो सकता है कि वह लंबे समय तक व्यस्त रहे. इससे एफ़आईडी धीमा हो सकता है.

SELECT
  form_factor.name AS form_factor,
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
  form_factor

form_factor	fast_fid
डेस्कटॉप	96.02%
फ़ोन	79.90%
टैबलेट	76.48%

नतीजों से हमारे अनुमान की पुष्टि होती है. फ़ोन और टैबलेट फ़ॉर्म फ़ैक्टर की तुलना में, डेस्कटॉप पर तेज़ एफ़आईडी अनुभवों की कुल संख्या ज़्यादा है. इन अंतरों के मौजूद होने की वजह, जैसे कि सीपीयू की परफ़ॉर्मेंस को समझने के लिए, Chrome UX रिपोर्ट के बाहर A/B टेस्टिंग की ज़रूरत होगी.

अब हमने यह जान लिया है कि किसी ऑरिजिन में एफ़आईडी का अनुभव तेज़ है या नहीं, यह कैसे पता लगाया जा सकता है. अब चलिए, कुछ ऐसे ऑरिजिन पर नज़र डालते हैं जो काफ़ी अच्छी परफ़ॉर्म करते हैं.

पहला उदाहरण: http://secretlycanadian.com

secretlycanadian.com की WebPageTest फ़िल्मस्ट्रिप

इस ऑरिजिन के 98% एफ़आईडी 100 मिलीसेकंड से कम के हैं. ऐसा कैसे हुआ? WebPageTest में इसके बनने के तरीके का विश्लेषण करके, हम देख सकते हैं कि यह बहुत ज़्यादा इमेज वाला WordPress पेज है. हालांकि, इसमें 168 केबी की JavaScript है, जो हमारी लैब मशीन पर करीब 500 मि॰से॰ में काम करती है. एचटीटीपी संग्रह के मुताबिक, यह बहुत ज़्यादा JavaScript नहीं है. इस वजह से, इस पेज को 28वें प्रतिशत में रखा गया है.

secretlycanadian.com का AWebPageTest वॉटरफ़ॉल

2.7 से 3.0 सेकंड तक का गुलाबी बार, एचटीएमएल पार्स करने का फ़ेज़ है. इस दौरान, पेज इंटरैक्टिव नहीं होता और यह विज़ुअल रूप से अधूरा दिखता है. ऊपर दी गई फ़िल्मस्ट्रिप में “3.0s” देखें. इसके बाद, जिन लंबे टास्क को प्रोसेस करना ज़रूरी है उन्हें अलग-अलग हिस्सों में बांट दिया जाता है, ताकि मुख्य थ्रेड में कोई रुकावट न आए. पंक्ति 11 की गुलाबी रेखाओं से पता चलता है कि तुरंत आसानी से JavaScript कैसे काम करता है.

दूसरा उदाहरण: https://www.wtfast.com

इस ऑरिजिन में, 96% इंस्टैंट एफ़आईडी अनुभव मिलते हैं. यह 267 केबी JavaScript (एचटीटीपी संग्रह में 38वां पर्सेंटाइल) लोड करता है. साथ ही, इसे लैब मशीन पर 900 मि॰से॰ के लिए प्रोसेस करता है. फ़िल्मस्ट्रिप से पता चलता है कि पेज के बैकग्राउंड को रेंडर होने में करीब पांच सेकंड और कॉन्टेंट को रेंडर होने में करीब दो सेकंड लगते हैं.

नतीजों के बारे में सबसे दिलचस्प बात यह है कि मुख्य थ्रेड के व्यस्त होने के दौरान, तीन से पांच सेकंड के बीच इंटरैक्टिव कुछ भी नहीं दिखता. असल में, इस पेज के एफ़सीपी के धीमे होने की वजह से, एफ़आईडी बेहतर होता है. यह उपयोगकर्ता अनुभव को दिखाने के लिए, कई मेट्रिक का इस्तेमाल करने के महत्व का एक अच्छा उदाहरण है.

एक्सप्लोर करना शुरू करें

The State of the Web के इस हफ़्ते के एपिसोड में, एफ़आईडी के बारे में ज़्यादा जानें:

Chrome UX रिपोर्ट में एफ़आईडी की जानकारी उपलब्ध होने से, हमें इंटरैक्टिव अनुभवों का आधार तय करने में मदद मिलती है. इस बेसलाइन का इस्तेमाल करके, हम आने वाले समय में होने वाले बदलावों को देख सकते हैं या अलग-अलग ऑरिजिन को बेंचमार्क कर सकते हैं. अगर आपको अपनी साइट के फ़ील्ड मेज़रमेंट में एफ़आईडी इकट्ठा करना है, तो bit.ly/event-timing-ot पर जाकर, ऑरिजिन ट्रायल के लिए साइन अप करें और इवेंट टाइमिंग की सुविधा चुनें. इसके साथ ही, वेब पर इंटरैक्टिविटी की स्थिति के बारे में दिलचस्प इनसाइट पाने के लिए, डेटासेट को एक्सप्लोर करना शुरू करें. यह अब भी एक्सपेरिमेंट के तौर पर उपलब्ध मेट्रिक है. इसलिए, कृपया हमें अपना सुझाव/राय दें और Chrome UX रिपोर्ट के चर्चा ग्रुप या Twitter पर @ChromeUXReport पर अपना विश्लेषण शेयर करें.