वर्डप्रेस में प्रीलोड, प्रीफैच, प्रीकनेक्ट: ब्राउज़र संसाधन संकेत

वर्डप्रेस में प्रीलोड, प्रीफैच, प्रीकनेक्ट: ब्राउज़र संसाधन संकेत

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

संसाधन संकेतों और निर्देशों के साथ, आप बस यही कर सकते हैं—बेहतर वास्तविक और कथित वेबसाइट प्रदर्शन के लिए ब्राउज़रों को समय से पहले अपने पृष्ठों के लिए संसाधनों को लाने और डाउनलोड करने के लिए कहें। इस तकनीक के रूप में जाना जाता है प्रीब्राउज़िंग.

इस पोस्ट में, हम तीन प्रमुख संसाधन संकेतों का पता लगाएंगे: प्रीलोड, प्रीफ़ेच और प्रीकनेक्टसाथ ही वे कैसे काम करते हैं, उनके लाभ और उनका उपयोग कैसे करें।

प्रीब्राउज़िंग क्या है?

स्टीव सॉडर्स ने प्रीब्राउज़िंग शब्द गढ़ा (भविष्य कहनेवाला ब्राउज़िंग से) 2013 में।

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

“ब्राउज़र पहले से ही परदे के पीछे काम कर रहे हैं, नेविगेशन को यथासंभव तेज़ बनाने के लिए हमारी साइटों में पैटर्न की तलाश कर रहे हैं। प्रीब्राउज़िंग उस पर निर्मित होता है: हम उपयोगकर्ता पैटर्न के आगे के विश्लेषण के साथ अपने स्वयं के पृष्ठों पर मौजूद अंतर्दृष्टि को जोड़ सकते हैं। ब्राउज़रों को बेहतर काम करने में मदद करके, हम गति बढ़ाते हैं और अपने उपयोगकर्ताओं के अनुभव में सुधार करते हैं।

आप सोच रहे होंगे, “क्या यह कैशिंग नहीं है?” सही है। पेजों को तेजी से लोड करने के लिए ब्राउजर कैशिंग जरूरी है। लेकिन ऐसे समय होते हैं जब कैशिंग को थोड़ी मदद की जरूरत होती है:

  • पहली बार वेबसाइट का दौरा: जब कोई उपयोगकर्ता पहली बार किसी साइट पर जाता है, तो उसके ब्राउज़र ने अभी तक किसी स्थिर संसाधन को कैश नहीं किया है।
  • ब्राउज़र डेटा साफ़ किया गया: जो उपयोगकर्ता अपना ब्राउज़र कैश साफ़ करते हैं, उनके पास अगली बार आपकी साइट पर आने पर आपके संसाधनों की प्रति नहीं होगी।
  • समाप्त ब्राउज़र डेटा: HTTP आर्काइव के अनुसार, 69% संसाधनों में कोई कैशिंग हेडर नहीं है या एक दिन से कम समय के लिए कैश करने योग्य हैं। यदि उपयोगकर्ता इन पृष्ठों पर दोबारा जाता है और ब्राउज़र निर्धारित करता है कि संसाधन समाप्त हो गया है, तो अद्यतनों की जांच के लिए HTTP अनुरोध की आवश्यकता होती है। भले ही प्रतिक्रिया इंगित करती है कि कैश्ड संसाधन अभी भी मान्य है, ये नेटवर्क विलंब अभी भी पृष्ठों को अधिक धीरे-धीरे लोड करते हैं, विशेष रूप से मोबाइल पर।
  • पुराना ब्राउज़र डेटा: भले ही किसी उपयोगकर्ता ने पिछली विज़िट की सामग्री को कैश किया हो, हो सकता है कि वेबसाइट बदली गई हो या नए संसाधनों के साथ अपडेट की गई हो।

सौभाग्य से, ब्राउज़िंग तकनीकें आपको इन मुद्दों को हल करने में मदद कर सकती हैं।

1. प्रीलोड

क्या आप कभी पृष्ठ के ऑनलोड ईवेंट में देरी किए बिना ब्राउज़र को किसी महत्वपूर्ण फ़ॉन्ट या स्क्रिप्ट के बारे में बताना चाहते हैं?

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

इसका उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

<link rel="preload" as="script" href="really-important-stuff.js">
<link rel="preload" as="style" href="top-priority.css">

जैसा योव वीस, इस वेब मानक पर काम करने वाले अकामाई के एक प्रमुख वास्तुकार बताते हैं:

“[Preload provides] वेब डेवलपर्स के लिए अधिक विस्तृत लोडिंग नियंत्रण। यह डेवलपर्स को स्क्रिप्ट-आधारित संसाधन लोडर के प्रदर्शन दंड को भुगतने के बिना कस्टम लोडिंग लॉजिक को परिभाषित करने की क्षमता देता है।

जब आप निर्दिष्ट करते हैं कि प्रीलोड के माध्यम से किसी संसाधन की आवश्यकता है, तो इसे प्राथमिकता के रूप में डाउनलोड किया जाता है और ब्राउज़र में संग्रहीत किया जाता है, जब तक कि यह DOM, JavaScript या CSS में संदर्भित नहीं हो जाता।

as विशेषता ब्राउज़र को बताती है कि वह किस प्रकार का संसाधन डाउनलोड करेगा ताकि इसे सही तरीके से संभाला जा सके। इसके बिना, ब्राउज़र प्रीलोडेड संसाधन का उपयोग नहीं करेगा। संभावित मूल्यों में शामिल हैं:

  • “फ़ॉन्ट”
  • “लिखी हुई कहानी”
  • “शैली”
  • “छवि”
  • “मीडिया”
  • “दस्तावेज़”
का स्थान लेता है, जिसमें, Google के अनुसार, महत्वपूर्ण बग और कमियां थीं। इसे क्रोम के अलावा अन्य ब्राउज़रों में कभी लागू नहीं किया गया था। जैसे, मार्च 2016 में क्रोम 50 ने इसके लिए समर्थन हटा दिया।

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

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

यह न भूलें कि सबसे बड़े कंटेंटफुल पेंट स्कोर को अनुकूलित करने के लिए प्रीलोडिंग भी उपयोगी है।

2. प्रीफैच

क्या आपको लगता है कि आप भविष्यवाणी कर सकते हैं कि उपयोगकर्ता आगे क्या क्लिक करेगा या किसके साथ इंटरैक्ट करेगा?

प्रीफ़ेच संसाधन संकेत प्रीलोड से कुछ अलग है। यह किसी महत्वपूर्ण चीज़ को तेज़ी से घटित करने का प्रयास नहीं करता; बल्कि, यह पहले कुछ गैर-महत्वपूर्ण बनाने की कोशिश करता है—अगर कोई मौका है।

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

इसका मतलब यह है कि उपयोगकर्ता की अगली कार्रवाई का अनुमान लगाने और उसके लिए तैयार करने के लिए प्रीफ़ेच का सबसे अच्छा उपयोग किया जाता है, जैसे कि आवश्यक स्क्रिप्ट या छवियों को पुनर्प्राप्त करना।

प्रीफ़ेचिंग 3 प्रकार के होते हैं, और जो मैंने ऊपर वर्णित किया है उसे आमतौर पर के रूप में जाना जाता है लिंक प्रीफेचिंग.

Mozilla’s MDN web docs for link prefetching के अनुसार:

“… ब्राउज़र द्वारा पृष्ठ को लोड करना समाप्त करने के बाद, यह चुपचाप निर्दिष्ट दस्तावेज़ों को प्रीफ़ेच करना शुरू कर देता है और उन्हें अपने कैश में संग्रहीत कर लेता है। जब उपयोगकर्ता प्रीफ़ेच किए गए दस्तावेज़ों में से किसी एक पर जाता है, तो इसे ब्राउज़र के कैशे से तुरंत प्राप्त किया जा सकता है।

इस प्रकार की प्रीफ़ेचिंग के लिए, ब्राउज़र या तो HTML या HTTP Link: शीर्षलेख में प्रीफ़ेच की तलाश करता है। लिंक टैग का उपयोग करते हुए यहां एक उदाहरण दिया गया है:

<link rel="prefetch" href="page-2.html">

और यहां HTTP Link: शीर्षलेख का उपयोग करके वही लिंक प्रीफ़ेचिंग संकेत दिया गया है:

Link: </page-2.html>; rel=prefetch

अन्य प्रकार के प्रीफेचिंग हैं डीएनएस प्रीफेचिंग तथा प्रीरेंडरिंग.

डीएनएस प्रीफेटिंग

DNS प्रीफ़ेचिंग से आप ब्राउज़र को बता सकते हैं कि जब उपयोगकर्ता ब्राउज़ कर रहा हो तो पृष्ठभूमि में पृष्ठ पर DNS लुकअप करें। इसलिए जब तक उपयोगकर्ता प्रत्याशित रूप से एक लिंक पर क्लिक करता है, तब तक DNS लुक पहले ही हो चुका होता है, इस प्रकार विलंबता कम हो जाती है।

लिंक विशेषता में rel=”dns-prefetch” टैग जोड़कर DNS प्रीफ़ेचिंग को किसी विशिष्ट URL में जोड़ा जा सकता है। उदाहरण के लिए:

<link rel="dns-prefetch" href="//fonts.googleapis.com">

मोज़िला के एमडीएन वेब डॉक्स डीएनएस प्रीफेच प्रविष्टि बताते हैं कि:

“बैंडविड्थ के मामले में डीएनएस अनुरोध बहुत कम हैं, लेकिन विलंबता काफी अधिक हो सकती है, खासकर मोबाइल नेटवर्क पर। अनुमानित रूप से DNS परिणामों को प्रीफ़ेच करके, निश्चित समय पर विलंबता को उल्लेखनीय रूप से कम किया जा सकता है, जैसे कि जब उपयोगकर्ता लिंक पर क्लिक करता है। कुछ मामलों में, विलंबता को एक सेकंड तक कम किया जा सकता है।”

प्रीरेंडरिंग

प्रीरेंडरिंग चीजों को एक पायदान ऊपर ले जाता है, जिससे आप ब्राउज़र को संपूर्ण पृष्ठ डाउनलोड करने के लिए कह सकते हैं।

मान लीजिए, उदाहरण के लिए, आप निश्चित रूप से जानते हैं (क्योंकि आपने अपने एनालिटिक्स की जाँच की है और यह एक सामान्य उपयोग पैटर्न है) कि उपयोगकर्ता आपके होमपेज पर आएंगे और फिर services.html पर जाने के लिए आगे बढ़ेंगे क्योंकि यह सबसे लोकप्रिय नेविगेशन है। आप ब्राउज़र को संसाधन संकेत दे सकते हैं:

<link rel="prerender" href="http://example.com/services.html">

मुखपृष्ठ डाउनलोड करने के बाद, ब्राउज़र पृष्ठभूमि में services.html डाउनलोड करेगा और जैसे ही वे इसके लिए कहेंगे, इसे उपयोगकर्ता के लिए तैयार कर देगा। जब वे अंत में “सेवाएं” लिंक पर क्लिक करते हैं, तो पहले से रेंडर किया गया पेज तुरंत लोड हो जाएगा।

लेकिन क्या होगा यदि उपयोगकर्ता आपके “सेवाओं” पृष्ठ पर जाने के लिए क्लिक नहीं करता है और इसके बजाय “अबाउट” पृष्ठ पर जाता है? कहने की आवश्यकता नहीं है, प्रीरेंडरिंग एक जोखिम भरी तकनीक है क्योंकि आप उपयोगकर्ता के अगले कदम पर दांव लगा रहे हैं।

यदि आप सही हैं, तो आप एक अन्य पृष्ठ को डाउनलोड करने का समय बचा लेंगे। लेकिन अगर आप गलत हैं, तो इससे बैंडविड्थ की बड़ी बर्बादी हो सकती है, जो विशेष रूप से मोबाइल उपयोगकर्ताओं के लिए हानिकारक है।

प्रीकनेक्ट क्या है?

तृतीय-पक्ष संसाधन वास्तव में एक पृष्ठ को धीमा कर सकते हैं धन्यवाद ब्राउज़र वास्तव में संसाधन डाउनलोड करना शुरू करने से पहले आवश्यक राउंड-ट्रिप की संख्या के लिए कोई छोटा हिस्सा नहीं है। इन राउंड-ट्रिप में HTTPS के लिए DNS लुकअप, TCP हैंडशेक और TLS बातचीत शामिल है।

पृष्ठ और नेटवर्क की स्थितियों के आधार पर, ये राउंड-ट्रिप सैकड़ों मिलीसेकंड विलंबता या अधिक जोड़ सकते हैं, जो कि यदि आप कई अलग-अलग होस्ट से संसाधनों का अनुरोध कर रहे हैं तो जल्दी से जोड़ सकते हैं। उदाहरण के लिए, आपका पृष्ठ सामाजिक साझाकरण के लिए Twitter और Facebook, टिप्पणियों के लिए Gravatar, और Google Analytics से कनेक्ट हो सकता है।

लेकिन क्या होगा अगर आप इनमें से कुछ राउंड-ट्रिप को खत्म कर सकें और कथित प्रदर्शन और वास्तविक लोडिंग समय को तेज कर सकें?

प्रीकनेक्ट से आप ब्राउज़र को बता सकते हैं कि आपका पेज किसी बाहरी संसाधन से कनेक्शन स्थापित करना चाहता है, और आप चाहते हैं कि प्रक्रिया जल्द से जल्द शुरू हो। आप इस संसाधन संकेत का उपयोग कैसे करेंगे इसका एक उदाहरण यहां दिया गया है:

मान लें कि आप अपने पृष्ठ पर Google फ़ॉन्ट्स वेबफ़ॉन्ट के प्रदर्शन की गति बढ़ाना चाहते हैं। Google की वैश्विक सीडीएन के कारण सेवा विश्वसनीय और आम तौर पर तेज़ है। लेकिन चूँकि @font-face नियमों को सबसे पहले CSS फाइलों में खोजा जाना चाहिए, इससे पहले कि ब्राउज़र वेबफॉन्ट अनुरोध करता है, पेज रेंडर के दौरान अनस्टाइल्ड कंटेंट (FOUC) का ध्यान देने योग्य फ्लैश हो सकता है।

प्रीकनेक्ट के साथ, आप निम्नलिखित प्रीकनेक्ट संकेत जोड़कर इस विलंब को बहुत कम कर सकते हैं:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

जैसा कि विगेट के वरिष्ठ फ्रंट-एंड डेवलपर जेरेमी फ्रैंक प्रीकनेक्ट हिंट्स के लिए अपने गाइड में लिखते हैं, प्रीकनेक्ट को जोड़कर अपने परीक्षण में महत्वपूर्ण रेंडरिंग पथ से 3 राउंड-ट्रिप को हटा दिया और विलंबता के आधे से अधिक सेकंड में कटौती की:

वर्डप्रेस में प्रीलोड, प्रीफैच, प्रीकनेक्ट: ब्राउज़र संसाधन संकेत

इस विशेष उदाहरण के बारे में बहुत अच्छी बात यह है कि प्रीकनेक्ट का उपयोग करने से रेंडरिंग ब्लॉकिंग को कम करने में मदद मिलती है और पेंट करने के समय में सुधार होता है (LCP सहित)।

Google वेब प्रदर्शन इंजीनियर इल्या ग्रिगोरिक के अनुसार:

“प्रीकनेक्ट आपके ऑप्टिमाइज़ेशन टूलबॉक्स में एक महत्वपूर्ण उपकरण है … यह आपके अनुरोध पथ से कई महंगी राउंड-ट्रिप को समाप्त कर सकता है – कुछ मामलों में अनुरोध विलंबता को सैकड़ों और यहां तक ​​कि हजारों मिलीसेकंड तक कम कर देता है।”

निष्कर्ष

प्रीब्राउज़िंग तकनीकें अब कुछ वर्षों से मौजूद हैं और पूरे वेब पर अधिक प्रचलित हैं जितना आपने महसूस किया होगा—Google अपने उपयोगकर्ताओं के लिए खोज को लगभग तात्कालिक बनाने के लिए संसाधन संकेतों का उपयोग करता है।

इसके अलावा, WP रॉकेट के साथ आप बिना उंगली उठाए प्रीलोडिंग और डीएनएस प्रीफेटिंग से लाभ उठा सकते हैं! और यह न भूलें कि वेब प्रदर्शन में सुधार का मतलब आपके कोर वेब विटल्स स्कोर में सुधार करना भी है!

अपनी साइट पर प्रीब्राउज़िंग शुरू करने के लिए तैयार हैं?
इस बारे में सोचें कि आप अपने पृष्ठों और अपने उपयोगकर्ताओं के बारे में क्या जानते हैं; उपयोगकर्ता पैटर्न को नोट करना शुरू करें, यह पता लगाने के लिए कि उपयोगकर्ता आपकी साइट पर कैसे नेविगेट करते हैं और वे किन संसाधनों का उपयोग करते हैं, अपने Google Analytics में खुदाई करें। इस जानकारी के साथ, आप उपयोगकर्ता अनुभव को तेज और बेहतर बना सकते हैं।



वर्डप्रेस में प्रीलोड, प्रीफैच, प्रीकनेक्ट: ब्राउज़र संसाधन संकेत वर्डप्रेस में प्रीलोड, प्रीफैच, प्रीकनेक्ट: ब्राउज़र संसाधन संकेत

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *