क्रॉस-साइट प्रीफ़ेच की मदद से एलसीपी को बढ़ाना

आसानी से उपलब्ध टेक्नोलॉजी के बारे में जानकारी.

Kenji Baheux
Kenji Baheux
Michael Buettner
Michael Buettner
Devin Mullins
Devin Mullins

पेज लोड होने की स्पीड क्यों मायने रखती है?

ज़्यादातर उपयोगकर्ता, धीरे-धीरे पेज लोड होने में ज़्यादा समय लगने वाले पेजों की पहचान करते हैं. यह परेशानी की एक बड़ी वजह है. उपयोगकर्ताओं पर किए गए इस अध्ययन में 54% लोग शामिल हैं. इसलिए, इसे अचानक लोड नहीं होना चाहिए, क्योंकि तेज़ी से पेज लोड होने से कारोबार को बेहतर नतीजे मिलते हैं. वाकई, अगर वेबसाइट पर आने वाले लोग किसी वेबसाइट से इंटरैक्ट करने से पहले ही हताश हो जाते हैं, तो इस बात की संभावना बहुत कम है कि वे लंबे समय तक इसके महत्व की सराहना करेंगे. असल में, 254 ई-कॉमर्स, फ़ाइनेंस, और ट्रैवल साइटों की Google की एक अन्य स्टडी से पता चला है कि दो सेकंड या उससे कम समय में लोड होने वाली साइटों की कन्वर्ज़न रेट 15% ज़्यादा थी.

सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) की स्पीड बढ़ाना

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

आइए, देखते हैं कि किसी पेज के एलसीपी पर किन चीज़ों का असर पड़ता है.

पेज लोड होने वाला वॉटरफ़ॉल.
वेब पेज लोड करने के लिए, एक सामान्य वॉटरफ़ॉल की ज़रूरत होती है

जब कोई उपयोगकर्ता किसी पेज पर जाता है, तो ब्राउज़र, सर्वर से एचटीएमएल के लिए अनुरोध करता है. सर्वर, एचटीएमएल के साथ जवाब देता है. इससे ब्राउज़र को इस बारे में ज़्यादा संकेत मिलते हैं कि आगे क्या फ़ेच करना है. इसमें सीएसएस, JavaScript, फ़ॉन्ट, और इमेज शामिल हैं. जैसे-जैसे ये जवाब मिलते हैं, ब्राउज़र को इन जवाबों का आकलन करने के लिए कुछ काम भी करना होता है. इसके बाद, पेज पर कॉम्पोनेंट का लेआउट और पेंट करना पड़ता है. हालांकि, इन पैकेट के ज़रिए डिवाइस से सर्वर तक पहुंचने और फिर वापस डिवाइस पर आने में ही ज़्यादातर समय बीत जाता है. असल में, हमारा डेटा (Android के लिए Chrome; मीडियन) दिखाता है कि ब्राउज़र को उपयोगकर्ता को दिखने में लगने वाला करीब 40% इंतज़ार, सर्वर से सबसे पहले बाइट के वापस आने का इंतज़ार करने में लगता है.

प्रीफ़ेच करने के फ़ायदे

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

व्यवस्थित झरना.
सभी संसाधन पहले से लोड होने के बाद, वॉटरफ़ॉल पूरी तरह से व्यवस्थित हो जाता है.

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

क्रॉस-साइट नेविगेशन

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

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

समाधान

निजता को सुरक्षित रखने वाले क्रॉस-साइट प्रीफ़ेच करने की सुविधा को चालू करने के लिए, हमने पिछले तीन सालों में दो समाधान तैयार किए हैं: प्राइवेट प्रीफ़ेच प्रॉक्सी और साइन किए हुए एक्सचेंज (SXG). हमने यह पुष्टि करने के लिए बड़े स्तर पर एक प्रयोग भी किया है कि क्रॉस-ऑरिजिन प्रीफ़ेच से तेज़ी से होने वाले फ़ायदे मिलते हैं. निश्चित तौर पर, जब हमने उन मामलों को देखा जहां Google ने उपयोगकर्ता के अगले नेविगेशन के लिए, मुख्य एचटीएमएल को सुरक्षित तरीके से प्रीफ़ेच किया था, तो हमने देखा कि "अच्छे" एलसीपी वाले पेज लोड के हिस्से में 14 प्रतिशत पॉइंट की बढ़ोतरी हुई!

ज़रूरी बातें

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

वेबसाइट पर बार-बार आने वाले लोग

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

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

इस समय, निजी प्रीफ़ेच प्रॉक्सी को सिर्फ़ पहली बार आने वाले विज़िटर (कुकी के बिना लिंक) के लिए चालू किया गया है, ताकि वेबसाइट पर बार-बार आने वाले लोगों (कुकी वाले लिंक) के लिए कवरेज को बढ़ाया जा सके. दूसरी ओर, साइन किए हुए एक्सचेंज में पहली बार आने वाले और दोबारा आने वाले लोगों, दोनों के लिए पहले से ही क्रॉस-साइट प्रीफ़ेच करने की सुविधा काम करती है (ऊपर बताए गए तरीकों के साथ).

प्रीफ़ेच से ज़्यादा डेटा दिखाया जा रहा है

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

  • इसे कम करने के लिए, कोई अनुरोध कर सकता है कि रेफ़रर अपने प्रीफ़ेच अनुरोधों के साथ कम एग्रेसिव बने. इसी तरह, रेफ़रल देने वाला या ब्राउज़र, कम और बेहद ज़रूरी संसाधनों (उदाहरण के लिए, मुख्य संसाधन, ज़रूरी सीएसएस या JavaScript सब-संसाधन) पर फ़ोकस करके इस समस्या को कम कर सकता है. यह गति के फ़ायदे और अतिरिक्त ट्रैफ़िक के बीच एक बराबर का समझौता है.
  • इसके अलावा, अन्य कैश मेमोरी में ऑप्ट इन करके, इस ट्रैफ़िक को ऑफ़सेट किया जा सकता है. ज़्यादा जानकारी के लिए, Signed Exchange पर यह सेक्शन देखें. समस्या यह है कि कॉन्टेंट को लंबे समय तक कैश मेमोरी में सेव रखने से, आपके उपयोगकर्ताओं को पुरानी जानकारी दिख सकती है. यह अतिरिक्त डेटा पेश करने और कॉन्टेंट के अपडेट होने के बीच के फ़र्क़ को दिखाता है.

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

YouTube TV का इस्तेमाल शुरू करना

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

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