सॉफ़्ट नेविगेशन के मेज़रमेंट के साथ प्रयोग करना

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

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

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

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

Chrome की टीम कुछ समय से इस चुनौती पर विचार कर रही है. वह "सॉफ़्ट-नेविगेशन" क्या है और इसके लिए वेबसाइट की परफ़ॉर्मेंस की मेट्रिक को किस तरह मापा जा सकता है, इसकी परिभाषा तय करना है—जिस तरह पारंपरिक मल्टी-पेज आर्किटेक्चर (एमपीए) में लागू की गई वेबसाइटों को मापा जाता है. हालांकि, टीम अब भी अपने शुरुआती चरणों में है, लेकिन अब टीम इसे लागू करने के लिए तैयार है. इसे साइटों के लिए, बड़े पैमाने पर इस्तेमाल किया जा सकता है. इससे साइटों को, अब तक के तरीकों के बारे में सुझाव, शिकायत या राय देने में मदद मिलेगी.

सॉफ़्ट नेविगेशन क्या है?

हमने सॉफ़्ट नेविगेशन की यह परिभाषा दी है:

  • नेविगेशन, उपयोगकर्ता की कार्रवाई से शुरू होता है.
  • नेविगेशन की वजह से, उपयोगकर्ता को दिखने वाले यूआरएल में बदलाव होता है और इतिहास में बदलाव होता है.
  • नेविगेशन की वजह से डीओएम में बदलाव होता है.

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

Chrome, सॉफ़्ट नेविगेशन को कैसे लागू करता है?

सॉफ़्ट नेविगेशन अनुभवों के चालू होने पर (अगले सेक्शन में इस बारे में ज़्यादा जानकारी दी गई है), Chrome कुछ परफ़ॉर्मेंस मेट्रिक की रिपोर्ट करने के तरीके को बदल देगा:

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

Chrome में सॉफ़्ट नेविगेशन चालू करने पर क्या होता है?

यहां कुछ ऐसे बदलावों के बारे में बताया गया है जिन पर यह सुविधा चालू करने के बाद, साइट के मालिकों को ध्यान में रखना होगा:

  • सॉफ़्ट नेविगेशन के लिए, अन्य एफ़सीपी, एफ़सीपी, और एलसीपी इवेंट फिर से उत्सर्जित हो सकते हैं. Chrome की उपयोगकर्ता अनुभव रिपोर्ट (CrUX), इन अतिरिक्त वैल्यू पर ध्यान नहीं देगी. हालांकि, इससे आपकी साइट पर रीयल यूज़र मेज़रमेंट (आरयूएम) मॉनिटरिंग की सुविधा पर असर पड़ सकता है. अगर आपका कोई सवाल है, तो आरयूएम की सेवा देने वाली कंपनी से संपर्क करें. इससे उन मेज़रमेंट पर असर पड़ सकता है या नहीं. सॉफ़्ट नेविगेशन के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला सेक्शन देखें.
  • परफ़ॉर्मेंस की जानकारी में मौजूद नए (और ज़रूरी नहीं) navigationID एट्रिब्यूट को, इन एंट्री का इस्तेमाल करके अपने ऐप्लिकेशन कोड में शामिल करना पड़ सकता है.
  • यह मोड सिर्फ़ Chromium पर काम करने वाले ब्राउज़र पर काम करेगा. हालांकि, कई नई मेट्रिक सिर्फ़ Chromium का इस्तेमाल करने वाले ब्राउज़र में उपलब्ध हैं, लेकिन कुछ (एफ़सीपी, एलसीपी) अन्य ब्राउज़र में उपलब्ध हैं. ऐसा हो सकता है कि सभी लोगों ने Chromium पर काम करने वाले ब्राउज़र के नए वर्शन पर अपग्रेड न किया हो. इसलिए, ध्यान रखें कि कुछ उपयोगकर्ता, सॉफ़्ट नेविगेशन मेट्रिक की रिपोर्ट नहीं कर सकते.
  • प्रयोग के तौर पर शुरू की गई एक नई सुविधा, जो डिफ़ॉल्ट रूप से चालू नहीं होती है. इसलिए, साइटों को इस सुविधा की जांच करनी चाहिए, ताकि यह पक्का किया जा सके कि इसकी वजह से किसी तरह का अनजाने में खराब असर तो नहीं हुआ.

सॉफ़्ट नेविगेशन की मेट्रिक को मेज़र करने के तरीके के बारे में ज़्यादा जानने के लिए, हर सॉफ़्ट नेविगेशन के लिए वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाला सेक्शन देखें.

मैं Chrome में सॉफ़्ट नेविगेशन की सुविधा कैसे चालू करूं?

Chrome में सॉफ़्ट नेविगेशन की सुविधा डिफ़ॉल्ट रूप से चालू नहीं होती है. हालांकि, इस सुविधा को साफ़ तौर पर चालू करके, Chrome 110 में इसे प्रयोग के लिए उपलब्ध कराया जा सकता है.

डेवलपर के लिए, इसे chrome://flags/#enable-experimental-web-platform-features पर प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं फ़्लैग को चालू करके या Chrome को लॉन्च करते समय --enable-experimental-web-platform-features कमांड लाइन आर्ग्युमेंट का इस्तेमाल करके चालू किया जा सकता है.

एक ऐसी वेबसाइट जो अपने सभी विज़िटर के लिए इसे चालू करना चाहती है, तो उनके लिए Chrome 117 पर एक ऑरिजिन ट्रायल चल रहा है. इसे ट्रायल के लिए साइन अप करके और एचटीएमएल या एचटीटीपी हेडर में ऑरिजिन ट्रायल टोकन वाले मेटा एलिमेंट को शामिल करके चालू किया जा सकता है. ज़्यादा जानकारी के लिए, ऑरिजिन ट्रायल का इस्तेमाल शुरू करना पोस्ट देखें.

साइट के मालिक अपने पेजों पर ऑरिजिन ट्रायल को शामिल करना चुन सकते हैं. ऐसा वे सभी या सिर्फ़ उपयोगकर्ताओं के किसी सबसेट के लिए कर सकते हैं. इससे आपकी मेट्रिक की रिपोर्ट करने के तरीके पर क्या असर पड़ता है, इसके लिए पहले से दिए गए अहम जानकारी वाले सेक्शन को ध्यान में रखें. खास तौर पर तब, जब अपने उपयोगकर्ताओं के एक बड़े हिस्से के लिए ऑरिजिन ट्रायल को चालू किया जा रहा हो. ध्यान दें कि CrUX, सॉफ़्ट नेविगेशन सेटिंग पर ध्यान दिए बिना मौजूदा तरीके से मेट्रिक को रिपोर्ट करता रहेगा. इसलिए, इन नतीजों का असर नहीं पड़ेगा. यह भी ध्यान में रखा जाना चाहिए कि ऑरिजिन ट्रायल, 14 दिनों के मीडियन के रूप में सभी Chrome पेज के ज़्यादा से ज़्यादा 0.5% पर प्रयोग के तौर पर शुरू की गई सुविधाओं को चालू करने तक सीमित हैं. हालांकि, यह समस्या सिर्फ़ बहुत बड़ी साइटों के लिए है.

सॉफ़्ट नेविगेशन को कैसे मापा जा सकता है?

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

सॉफ़्ट नेविगेशन की शिकायत करें

सॉफ़्ट नेविगेशन की निगरानी करने के लिए, PerformanceObserver का इस्तेमाल किया जा सकता है. नीचे एक उदाहरण कोड स्निपेट दिया गया है, जो कंसोल में सॉफ़्ट नेविगेशन एंट्री को लॉग करता है. इसमें buffered विकल्प का इस्तेमाल करके, इस पेज पर पिछले सॉफ़्ट नेविगेशन के बारे में भी बताया गया है:

const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

इसका इस्तेमाल, पिछले नेविगेशन में मौजूद पूरी जानकारी वाले पेज की मेट्रिक को फ़ाइनल करने के लिए किया जा सकता है.

सही यूआरएल के हिसाब से मेट्रिक की शिकायत करें

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

सही PerformanceEntry के navigationId एट्रिब्यूट का इस्तेमाल, इवेंट को वापस सही यूआरएल से लिंक करने के लिए किया जा सकता है. इसे PerformanceEntry एपीआई की मदद से खोजा जा सकता है:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const pageUrl = navEntry?.name;

इस pageUrl का इस्तेमाल, सही यूआरएल के आधार पर मेट्रिक की रिपोर्ट करने के लिए किया जाना चाहिए, न कि उस मौजूदा यूआरएल के बारे में जिसे शायद पहले इस्तेमाल किया हो.

सॉफ़्ट नेविगेशन के startTime फ़ेच किए जा रहे हैं

नेविगेशन शुरू होने के समय की जानकारी भी इसी तरह से ली जा सकती है:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const startTime = navEntry?.startTime;

startTime, सॉफ़्ट नेविगेशन की शुरुआत करने वाले शुरुआती इंटरैक्शन का समय होता है. जैसे, बटन पर होने वाला क्लिक.

सॉफ़्ट नेविगेशन के साथ-साथ सभी परफ़ॉर्मेंस टाइम को, शुरुआती "हार्ड" पेज नेविगेशन समय के बाद से रिपोर्ट किया जाता है. इसलिए, सॉफ़्ट नेविगेशन के शुरू होने का समय, सॉफ़्ट नेविगेशन लोड होने में लगने वाले समय (जैसे कि एलसीपी) को बेसलाइन के तौर पर दिखाने के लिए ज़रूरी है.

हर सॉफ़्ट नेविगेशन पर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का आकलन करना

सॉफ़्ट नेविगेशन मेट्रिक की एंट्री शामिल करने के लिए, आपको परफ़ॉर्मेंस ऑब्ज़र्वर के observe कॉल में includeSoftNavigationObservations: true को शामिल करना होगा.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout Shift time:', entry);
  }
}).observe({type: 'layout-shift', buffered: true, includeSoftNavigationObservations: true});

Chrome में सॉफ़्ट नेविगेशन की सुविधा चालू करने के साथ-साथ, observe तरीके में एक और includeSoftNavigationObservations फ़्लैग जोड़ना ज़रूरी है. परफ़ॉर्मेंस की निगरानी करने वाले लेवल पर, यह साफ़ तौर पर ऑप्ट-इन करने का मकसद यह है कि परफ़ॉर्मेंस की निगरानी करने वाले मौजूदा लोगों को इन अतिरिक्त जानकारी से कोई फ़र्क़ न पड़े. सॉफ़्ट नेविगेशन के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र करते समय, कुछ अन्य बातों का भी ध्यान रखना ज़रूरी है.

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

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const softNavEntry =
      performance.getEntriesByType('soft-navigation').filter(
        (navEntry) => navEntry.navigationId === entry.navigationId
      )[0];
    const hardNavEntry = performance.getEntriesByType('navigation')[0];
    const navEntry = softNavEntry || hardNavEntry;
    const startTime = navEntry?.startTime;
    console.log('LCP time:', entry.startTime - startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true, includeSoftNavigationObservations: true});

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

इसी तरह, लंबे समय तक मौजूद इन मेट्रिक के नए सॉफ़्ट नेविगेशन के लिए मेट्रिक को मेज़र करते समय, मेट्रिक को "रीसेट" या "फिर से शुरू करना" होगा. साथ ही, उन्हें नई मेट्रिक के तौर पर मानना होगा. इसमें पिछले "पेजों" के लिए सेट की गई वैल्यू की मेमोरी नहीं होनी चाहिए.

नेविगेशन के बीच जो कॉन्टेंट एक जैसा रहता है उसका इस्तेमाल किस तरह किया जाना चाहिए?

सॉफ़्ट नेविगेशन के लिए, एफ़पी, एफ़सीपी, और एलसीपी से सिर्फ़ नए पेंट को ही मेज़र किया जाएगा. इसकी वजह से, एलसीपी अलग हो सकता है. उदाहरण के लिए, सॉफ़्ट नेविगेशन के कोल्ड लोड से सॉफ़्ट लोड तक.

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

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

टीटीएफ़बी को कैसे मापें?

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

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

सॉफ़्ट नेविगेशन के लिए 0 के टीटीएफ़बी को उसी तरह रिपोर्ट करना एक आसान तरीका है जिस तरह हम बैक/फ़ॉरवर्ड कैश मेमोरी को पहले जैसा करने का सुझाव देते हैं. web-vitals लाइब्रेरी, फ़िलहाल सॉफ़्ट नेविगेशन के लिए इस तरीके का इस्तेमाल करती है.

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

पुराने और नए, दोनों का आकलन कैसे करें?

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

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

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

सॉफ़्ट नेविगेशन के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का आकलन करने के लिए, web-vitals लाइब्रेरी का इस्तेमाल करें

सभी बारीकियों को समझने का सबसे आसान तरीका है, web-vitals JavaScript लाइब्रेरी का इस्तेमाल करना, जिसमें सॉफ़्ट नेविगेशन के लिए एक्सपेरिमेंटल सपोर्ट एक अलग soft-navs branch में है (जो npm और unpkg पर भी उपलब्ध है). इसे नीचे बताए गए तरीके से मेज़र किया जा सकता है (doTraditionalProcessing और doSoftNavProcessing को सही तरीके से बदलकर):

import {
  onTTFB,
  onFCP,
  onLCP,
  onCLS,
  onINP,
} from 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.js?module';

onTTFB(doTraditionalProcessing);
onFCP(doTraditionalProcessing);
onLCP(doTraditionalProcessing);
onCLS(doTraditionalProcessing);
onINP(doTraditionalProcessing);

onTTFB(doSoftNavProcessing, {reportSoftNavs: true});
onFCP(doSoftNavProcessing, {reportSoftNavs: true});
onLCP(doSoftNavProcessing, {reportSoftNavs: true});
onCLS(doSoftNavProcessing, {reportSoftNavs: true});
onINP(doSoftNavProcessing, {reportSoftNavs: true});

पक्का करें कि मेट्रिक को सही यूआरएल के हिसाब से रिपोर्ट किया जाता है, जैसा कि पहले बताया गया है.

web-vitals लाइब्रेरी, सॉफ़्ट नेविगेशन के लिए इन मेट्रिक की रिपोर्ट करती है:

मेट्रिक ब्यौरा
टीटीएफ़बी 0 के तौर पर रिपोर्ट किया गया.
एफ़सीपी फ़िलहाल, web-vitals लाइब्रेरी, पेज के लिए सिर्फ़ पहले एफ़सीपी को रिपोर्ट करती है.
एलसीपी सॉफ़्ट नेविगेशन के शुरू होने के समय के मुकाबले, अगले सबसे बड़े कॉन्टेंटफ़ुल पेंट का समय. पिछले नेविगेशन में मौजूद पेंट को शामिल नहीं किया जाता. इसलिए, एलसीपी >= 0 होगा. हमेशा की तरह, इसे किसी इंटरैक्शन पर या पेज के बैकग्राउंड में चलने पर रिपोर्ट किया जाएगा. इसके बाद ही एलसीपी को फ़ाइनल किया जा सकता है.
सीएलएस नेविगेशन समय के बीच शिफ़्ट की सबसे बड़ी विंडो. हमेशा की तरह, जब पेज को बैकग्राउंड में बजाया जाता है, तब ही सीएलएस को फ़ाइनल किया जा सकता है. अगर कोई बदलाव नहीं होता है, तो वैल्यू 0 होती है.
आईएनपी नेविगेशन के समय के बीच का INP. हमेशा की तरह, इसे किसी इंटरैक्शन पर या पेज के बैकग्राउंड में चलने पर रिपोर्ट किया जाएगा. ऐसा तब किया जाएगा, जब आईएनपी को फ़ाइनल किया जा सकता है. अगर कोई इंटरैक्शन नहीं होते हैं, तो 0 वैल्यू रिपोर्ट नहीं की जाती है.

क्या ये बदलाव, वेबसाइट की परफ़ॉर्मेंस की जानकारी के मेज़रमेंट का हिस्सा बन जाएंगे?

यह सॉफ़्ट नेविगेशन प्रयोग बिलकुल वैसा ही है—एक प्रयोग. इससे पहले कि हम साइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली इनिशिएटिव में शामिल करें या नहीं, हम आकलन करने के तरीके का आकलन करना चाहते हैं. साथ ही, यह भी देखना चाहते हैं कि ये उपयोगकर्ताओं के अनुभव को बेहतर तरीके से दिखा रहे हैं या नहीं. हम इस प्रयोग को लेकर बहुत उत्साहित हैं. हालांकि, हम इस बात की गारंटी नहीं दे सकते कि यह मौजूदा मेज़रमेंट की जगह लेगा या नहीं.

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

CrUX में, सॉफ़्ट नेविगेशन की रिपोर्ट कैसे की जाएगी?

CrUX में, सॉफ़्ट नेविगेशन की रिपोर्ट किस तरह से की जाएगी, यह अभी तय नहीं किया गया है. यह ज़रूरी नहीं है कि उन्हें मौजूदा "हार्ड" नेविगेशन की तरह ही माना जाए.

उपयोगकर्ता के हिसाब से, कुछ वेब पेजों में सॉफ़्ट नेविगेशन करीब-करीब पूरे पेज लोड के बराबर होते हैं. साथ ही, सिंगल पेज ऐप्लिकेशन टेक्नोलॉजी का इस्तेमाल करना, सिर्फ़ लागू करने की जानकारी होती है. वहीं दूसरी ओर, इस पर ज़्यादा कॉन्टेंट नहीं होता.

इसलिए, हम CrUX में इन सॉफ़्ट नेविगेशन को अलग से रिपोर्ट करने का फ़ैसला ले सकते हैं या किसी पेज या पेजों के ग्रुप के लिए वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का हिसाब लगाते समय, इन सॉफ़्ट नेविगेशन की तुलना कर सकते हैं. अनुभव के बेहतर होने की वजह से, हम पार्शियल सॉफ़्ट नेविगेशन को पूरी तरह से बाहर भी कर सकते हैं.

फ़िलहाल, टीम अनुमानित और तकनीकी तौर पर लागू करने पर ध्यान दे रही है, जिसकी मदद से हम इस प्रयोग की सफलता का आकलन कर पाएंगे. इसलिए, इन पहलुओं पर कोई फ़ैसला नहीं लिया गया है.

सुझाव/राय दें या शिकायत करें

हम इस एक्सपेरिमेंट के बारे में, नीचे दी गई जगहों पर सुझाव, शिकायत या राय मांग रहे हैं:

बदलावों का लॉग

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

नतीजा

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

स्वीकार हैं

Unsplash पर जॉर्डन मैड्रिड की थंबनेल इमेज