अगले पेज के लोड होने की परफ़ॉर्मेंस को बेहतर बनाना

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

यह कैसे काम करता है

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

नियमों में, urls कुंजी (इसे सूची का नियम कहा जाता है) वाले यूआरएल की हार्डकोड की गई सूची शामिल हो सकती है. इसके अलावा, इनमें where कुंजी भी शामिल हो सकती है. इसमें href और सीएसएस सिलेक्टर का सेट होता है. इसका इस्तेमाल, पेज पर लिंक ढूंढने के लिए किया जाता है. इसे document नियम कहा जाता है.

नियमों में एक वैकल्पिक eagerness प्रॉपर्टी भी शामिल हो सकती है. इससे यह तय होता है कि पेज को कब प्रीफ़ेच या प्रीरेंडर किया जाना चाहिए. eagerness प्रॉपर्टी को immediate, eager, moderate या conservative पर सेट किया जा सकता है. immediate जल्द से जल्द अनुमान लगाता है. वहीं, अन्य ब्राउज़र उपयोगकर्ता के सिग्नल का इंतज़ार करते हैं. जैसे, कुछ समय के लिए कर्सर घुमाना, लंबे समय तक कर्सर घुमाना या पेज पर क्लिक करना.

नियमों को अलग-अलग ईगरनेस सेटिंग के साथ जोड़ा जा सकता है, ताकि पहले से ही प्रीफ़ेच किया जा सके. इसके बाद, जब उपयोगकर्ता ज़्यादा इंटरैक्ट करे, तब प्रीरेंडरिंग किया जा सके.

इसका इस्तेमाल कब करें

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

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

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

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

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

इसका इस्तेमाल कैसे करें

Speculation rules, JSON पर आधारित फ़ॉर्मैट में होते हैं. इन्हें <script type="speculationrules"> टैग में शामिल किया जा सकता है. नियमों को दस्तावेज़ के <head> या <body> में शामिल किया जा सकता है. इसके अलावा, JavaScript का इस्तेमाल करके उन्हें डाइनैमिक तरीके से जोड़ा जा सकता है.

tag का इस्तेमाल, ग्लोबल लेवल पर या हर नियम के हिसाब से भी किया जा सकता है. सेट किए जाने पर, यह टैग Sec-Speculation-Tags हेडर में शामिल हो जाएगा. इससे आपको सर्वर-साइड पर यह पहचानने में मदद मिलेगी कि कौनसे अनुमान लगाए गए थे.

पहले से तय किए गए यूआरएल को पहले से फ़ेच करने के लिए, यूआरएल की सूची के सामान्य नियम का उदाहरण

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

किसी पेज पर मौजूद, एक ही ऑरिजिन वाले सभी लिंक को प्रीरेंडर करने के लिए, दस्तावेज़ के सामान्य नियम का उदाहरण

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

इंटरैक्टिव साइटों को छोड़कर, लिंक को पहले से रेंडर करने के लिए, दस्तावेज़ के जटिल नियम का उदाहरण

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

नियमों के मिले-जुले सेट का उदाहरण

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

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

सबसे सही तरीके

• उन पेजों को प्रीफ़ेच और प्रीरेंडर करने के लिए, अनुमान के आधार पर तय किए गए नियमों का इस्तेमाल करें जिन पर उपयोगकर्ता के जाने की संभावना ज़्यादा है.
• ज़रूर करें: स्टैटिक साइटों के लिए, अनुमान लगाने के नियमों का इस्तेमाल करें. इन साइटों पर कॉन्टेंट में अक्सर बदलाव नहीं होता है और इनके पेज बनाने में कम खर्च आता है. खास तौर पर, तब जब कॉन्टेंट को एज पर कैश मेमोरी में सेव किया गया हो.
• डाइनैमिक पेजों के लिए, अनुमान लगाने के नियमों का इस्तेमाल करते समय ज़्यादा सावधानी बरतें. डाइनैमिक पेजों का कॉन्टेंट अक्सर बदलता रहता है और पुराना हो सकता है. साथ ही, इन पेजों को बनाने में ज़्यादा खर्च आता है.
• ज़रूर करें: सूची के नियमों के बजाय, दस्तावेज़ के नियमों को प्राथमिकता दें. ऐसा इसलिए, क्योंकि ये ज़्यादा सुविधाजनक होते हैं. साथ ही, इनमें एक ही नियम को कई पेजों पर शेयर किया जा सकता है. इसके अलावा, इनका इस्तेमाल उन पेजों को पहले से प्रीफ़ेच और प्रीरेंडर करने के लिए किया जा सकता है जिनके बारे में पहले से जानकारी नहीं होती.
• ज़रूर करें: प्रीफ़ेच और प्रीरेंडर के बीच के अंतर को समझें और अपनी ज़रूरत के हिसाब से सही विकल्प चुनें. प्रीरेंडर, प्रीफ़ेच की तुलना में ज़्यादा महंगा होता है. साथ ही, डाइनैमिक स्टेट दिखाने वाले जटिल ऐप्लिकेशन में, इससे अनचाहे खराब असर हो सकते हैं. हालांकि, इससे उपयोगकर्ता को बेहतर अनुभव मिलता है. अगर आपको नहीं पता है, तो डेवलपर से उनकी प्राथमिकता पूछें.
• eagerness के अलग-अलग लेवल के बीच के फ़ायदों और नुकसानों को समझें और अपने इस्तेमाल के हिसाब से सही लेवल चुनें. ज़्यादा उत्सुकता से अनुमान लगाने से, उपयोगकर्ता को बेहतर अनुभव मिलता है. हालांकि, इसमें ज़्यादा संसाधनों का इस्तेमाल होता है. साथ ही, डाइनैमिक स्टेट दिखाने वाले जटिल ऐप्लिकेशन में, अनचाहे खराब असर ज़्यादा हो सकते हैं. अगर आपको नहीं पता है, तो डेवलपर से उनकी प्राथमिकता पूछें.
• अनुमान लगाने के नियमों का ज़रूरत से ज़्यादा इस्तेमाल न करें. उदाहरण के लिए, पेज पर मौजूद हर लिंक के लिए अनुमान लगाने के नियम का इस्तेमाल न करें. ब्राउज़र की सीमाएं होती हैं. जैसे, नॉन-ईगर स्पेकुलेशन के लिए दो स्पेकुलेशन. immediate का इस्तेमाल, बहुत कम लिंक के लिए किया जाना चाहिए.
• ऐसे यूआरएल का अनुमान न लगाएं जिनसे पेज की स्थिति में बदलाव होने की संभावना हो. जैसे, /logout या /add-to-cart. अगर ऐसे यूआरएल के दस्तावेज़ के नियमों में शामिल होने की संभावना है, तो उन्हें अनुमान लगाने के नियमों से साफ़ तौर पर बाहर रखें.
• एक पेज के ऐप्लिकेशन (एसपीए) पर, अनुमान लगाने के नियमों का इस्तेमाल न करें. अनुमान लगाने के नियम, मल्टी-पेज ऐप्लिकेशन (एमपीए) के लिए डिज़ाइन किए गए हैं. इनमें ब्राउज़र, हर नेविगेशन पर एक नए दस्तावेज़ पर ले जाता है. एसपीए में, ब्राउज़र हर नेविगेशन पर नए दस्तावेज़ पर नहीं जाता. इसलिए, अनुमान लगाने के नियम उम्मीद के मुताबिक काम नहीं करेंगे.

ब्राउज़र से जुड़ी सहायता और फ़ॉलबैक रणनीतियां

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