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

रिक विस्कोमी

Twitter GitHub होम पेज

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

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

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

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

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

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

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

Chrome की उपयोगकर्ता अनुभव रिपोर्ट में एफ़आईडी के बारे में जानकारी

लाखों ऑरिजिन से एक महीने के एफ़आईडी डेटा की मदद से, अब तक कई दिलचस्प और अहम जानकारी खोजी जा सकती है. चलिए, कुछ ऐसी क्वेरी पर नज़र डालते हैं जो 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

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

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

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

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

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

और जानें

द स्टेट ऑफ़ द वेब के इस हफ़्ते के एपिसोड में, एफ़आईडी के बारे में ज़्यादा जानें:

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