रीलॉन्च की गई वेबसाइट पर, विज्ञापन दिखने की दर 75% से ज़्यादा है. साथ ही, बाउंस रेट में 50% की कमी आई है और पेज व्यू में 27% की बढ़ोतरी हुई है.
जब Google ने वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट के बारे में एलान किया, तब जर्मन पब्लिशर Netzwelt को तुरंत पता चल गया कि इन नई मेट्रिक से, पेज की परफ़ॉर्मेंस को बेहतर बनाने और विज्ञापन से कमाई करने की सुविधा को बेहतर बनाने में मदद मिलेगी. उन्होंने अपनी वेबसाइट को फिर से लॉन्च करने के लिए, परफ़ॉर्मेंस को बेहतर बनाने के सबसे सही सामान्य तरीकों को अपनाया. साथ ही, विज्ञापन टैग और प्लेसमेंट को एक साथ ऑप्टिमाइज़ किया. बेहतर यूज़र एक्सपीरियंस (यूएक्स) और तेज़ी से लोड होने वाले पेजों पर फ़ोकस करने से, उपयोगकर्ताओं की दिलचस्पी और विज्ञापन से होने वाली आय को एक साथ ऑप्टिमाइज़ करने में मदद मिली. इससे, पेज व्यू में 27% की बढ़ोतरी हुई, विज्ञापन दिखने की दर 75% से ज़्यादा हो गई, और विज्ञापन से होने वाली आय में 18% की बढ़ोतरी हुई.
27%
पेज व्यू में बढ़ोतरी
18%
विज्ञापन से मिलने वाले रेवेन्यू में बढ़ोतरी
75%
विज्ञापन दिखने से जुड़े आंकड़े
चुनौती
कई अन्य समाचार पब्लिशर की तरह, Netzwelt को भी विज्ञापन से होने वाली आय को बनाए रखते हुए, उपयोगकर्ता अनुभव और पेज की स्पीड को ऑप्टिमाइज़ करने के बीच सही संतुलन खोजने में मुश्किल आ रही थी. उन्हें ये मुख्य चुनौतियां मिलीं:
- विज्ञापनों की वजह से ट्रिगर हुए लेआउट शिफ़्ट की वजह से कुल लेआउट शिफ़्ट (सीएलएस) ज़्यादा है. खास तौर पर, कई साइज़ वाले स्लॉट और टॉप बैनर की वजह से.
- सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) में देरी हो रही है. ऐसा इसलिए है, क्योंकि विज्ञापन सबसे बड़े पेंट हैं या हीरो इमेज लोड करने के लिए बैंडविड्थ का इस्तेमाल किया जा रहा है.
- विज्ञापन, हेडर बिडिंग, और अन्य कामों के लिए ज़रूरी तीसरे पक्ष के JavaScript की वजह से, फ़र्स्ट इनपुट डिले (एफ़आईडी) ज़्यादा होना.
- तीसरे पक्ष के वेंडर के कंट्रोल वाले सहमति वाले डायलॉग बॉक्स की वजह से, Core Web Vitals पर असर पड़ना. इन डायलॉग बॉक्स की वजह से लेआउट शिफ़्ट भी बढ़ते हैं और इन्हें ज़्यादा समय तक सबसे बड़े पेंट के तौर पर पहचाना जा सकता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के लिए, समाचार वेबसाइट को ऑप्टिमाइज़ करना
जब Netzwelt ने वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर काम करना शुरू किया, तो उन्हें तुरंत पता चला कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ करने से, विज्ञापन पर बुरा असर नहीं पड़ता. इसके बजाय, इसका इस्तेमाल विज्ञापन दिखने की दर को बेहतर बनाने के अवसर के तौर पर किया जा सकता है. इसलिए, Netzwelt की टीम ने वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ किया, ताकि विज्ञापन दिखने की दर को 75% से ज़्यादा किया जा सके. इससे, ज़्यादा रेवेन्यू देने वाले विज्ञापनों को आकर्षित किया जा सकेगा. डिसप्ले विज्ञापनों के लिए, दुनिया भर में विज्ञापन दिखने की दर 50%से कम है.
सीएलएस को ऑप्टिमाइज़ करना
विज्ञापन अक्सर देर से लोड होते हैं (कभी-कभी जान-बूझकर लेज़ी लोडिंग की मदद से). साथ ही, अलग-अलग साइज़ और फ़्लूइड विज्ञापन प्लेसमेंट की वजह से, उनके असल साइज़ का पता पहले से नहीं चलता.
इस समस्या को दो हिस्सों में बांटा जा सकता है—फ़ोल्ड के ऊपर और नीचे मौजूद विज्ञापन.
फ़ोल्ड के ऊपर मौजूद विज्ञापनों की वजह से, लेआउट में काफ़ी उछाल आ सकता है. ऐसा इसलिए होता है, क्योंकि ये विज्ञापन देर से लोड होते हैं और इनका साइज़ भी पता नहीं होता. विज्ञापन देने वालों को ज़रूरत के हिसाब से सबसे बड़ा स्पेस न देने से, यूज़र एक्सपीरियंस खराब हो सकता है. साथ ही, विज्ञापन देने वालों से तय साइज़ के विज्ञापन दिखाने के लिए कहने पर, विज्ञापन से होने वाली आय में कमी आ सकती है. Netzwelt ने सबसे ऊपर मौजूद विज्ञापन को स्टिक कर दिया और बैनर के लिए तय किए गए कुछ बड़े साइज़ हटा दिए. इससे यह समस्या हल हो गई. ओवरले वाला विज्ञापन, अलग-अलग साइज़ के विज्ञापनों के लिए लेआउट जंप को ट्रिगर करने से रोकता है. ज़रूरी शर्तें पूरी करने वाले साइज़ में कमी होने से, विज्ञापन की बिक्री पर असर पड़ता है. हालांकि, विज्ञापन दिखने की दर बेहतर होने से, इस असर को आसानी से कम किया जा सकता है.
पुराने डेटा और A/B टेस्ट की मदद से, Netzwelt ने अलग-अलग डिवाइसों और स्क्रीन साइज़ के लिए सही साइज़ और पोज़िशन तय की. साथ ही, जगह रिज़र्व करने के लिए इस्तेमाल किए जाने वाले सीएसएस मीडिया नियमों को भी तय किया.
फ़ोल्ड के नीचे दिखने वाले विज्ञापनों में काफ़ी सुधार किया जा सकता है:
- ऐसा बैनर जो लोड तो हो जाता है, लेकिन दिखता नहीं है. इससे विज्ञापन दिखने की दर खराब हो जाती है और पेज पर लोगों का अनुभव खराब हो जाता है.
- जब कोई उपयोगकर्ता किसी बैनर पर स्क्रोल करता है, तो वह बैनर लोड हो जाता है. इससे, कॉन्टेंट पर अतिरिक्त जंप हो सकते हैं.
पेज पर अच्छा अनुभव देने और विज्ञापन दिखने की दर को बढ़ाने के लिए, Netzwelt ने लेज़ी लोडिंग की सुविधा लागू की. साथ ही, सबसे छोटे कॉमन डिनोमिनेटर के साइज़ के लिए जगह भी सुरक्षित की. अलग-अलग साइज़ वाले ज़ोन में, 300x250 से 300x600 साइज़ के लिए अनुरोध किए गए बैनर, ऊंचाई में 250 पिक्सल के लिए रिज़र्व किए गए हैं. इससे छोटे साइज़ के लिए लेआउट में होने वाले बदलावों को खत्म किया गया. साथ ही, बड़े बैनर के लिए इन बदलावों को काफ़ी कम किया गया. यह तरीका सबसे सही नहीं है, लेकिन यह एक शुरुआत है और एक अच्छा समझौता है.
ज़्यादा ऑप्टिमाइज़ करने के लिए, नेटज़वेल्ट ने विज्ञापन प्लेसमेंट को कंट्रोल करने और लेआउट में होने वाले बदलावों को कम करने के लिए, इंटरसेक्शन ऑब्ज़र्वर और नेटवर्क इन्फ़ॉर्मेशन एपीआई का इस्तेमाल किया. स्क्रोल की पोज़िशन और नेटवर्क कनेक्शन की क्वालिटी के आधार पर, विज्ञापन की अलग-अलग पोज़िशन और लेज़ी लोडिंग की रणनीतियों का इस्तेमाल किया जाता है. साथ ही, विज्ञापनों को एक से ज़्यादा साइज़ से तय साइज़ में बदला जा सकता है. एल्गोरिदम का मकसद हमेशा लेआउट शिफ़्ट को कम करते हुए, विज्ञापन दिखने की दर को बढ़ाना होता है. NetworkInfo API के साथ काम न करने वाले ब्राउज़र, डिवाइस और आईपी से मिले नेटवर्क टाइप के कॉम्बिनेशन के आधार पर, किसी प्रॉक्सी वैल्यू का इस्तेमाल करते हैं. अडैप्टिव लोडिंग की इस रणनीति से, धीमे इंटरनेट कनेक्शन का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए सीएलएस कम हो जाता है.
एफ़आईडी को ऑप्टिमाइज़ करना
फ़र्स्ट इनपुट डिले, खबर पब्लिश करने वालों के लिए समस्या हो सकती है, क्योंकि विज्ञापन में अक्सर कई अतिरिक्त JavaScript लाइब्रेरी होती हैं. साथ ही, Lighthouse जैसे लैब डेटा को देखते समय, इसका बुरा असर पड़ता है. हालांकि, 2020 वेब अल्मनैक में मौजूद फ़ील्ड डेटा को देखते हुए, कई वेबसाइटों के जवाब मिलने में लगने वाला समय काफ़ी कम है. इसकी कुछ वजहें हैं. जैसे, विज्ञापन JavaScript का देर से लोड होना (पहले इनपुट के बाद), अच्छी तरह से कैश मेमोरी में सेव होना (उदाहरण के लिए, v8 कोड को कैश मेमोरी में सेव करने का तरीका इस्तेमाल करना) या विज्ञापन वेंडर का इसे अच्छी तरह से ऑप्टिमाइज़ करना. वेंडर के व्यूबिलिटी ट्रैकर, लंबे टास्क से बचते हैं. इसलिए, रनटाइम का कुल समय ज़्यादा होने पर भी, ब्लॉक होने का कुल समय (टीबीटी) और एफ़आईडी पर असर नहीं पड़ता. Netzwelt के लिए, एफ़आईडी कोई बड़ी समस्या नहीं थी. हालांकि, कुछ ऑप्टिमाइज़ेशन किए जा सकते थे:
- विज्ञापन स्क्रिप्ट और प्रोवाइडर की संख्या कम करना. अगर हो सके, तो एक ही स्टैक पर ध्यान देना.
- सभी स्क्रिप्ट को defer या async के साथ लोड करना.
- ट्रीशेकिंग और अनबंडलिंग के लिए, वेबपैक या मिलती-जुलती टेक्नोलॉजी का इस्तेमाल करना.
- BEM जैसे आसान सीएसएस नियमों का इस्तेमाल करना.
- लंबे समय तक चलने वाले टास्क से बचना और ज़रूरत पड़ने तक इंतज़ार करें पैटर्न का इस्तेमाल करना.
- जहां भी लेआउट पर असर पड़ता है वहां RequestAnimationFrame का इस्तेमाल करना.
एलसीपी को ऑप्टिमाइज़ करना
सबसे बड़े कॉन्टेंटफ़ुल पेंट पर, विज्ञापनों का असर दो तरीकों से पड़ सकता है. पहला, किसी विज्ञापन को सबसे बड़े पेंट के तौर पर पहचानकर और दूसरा, नेटवर्क बैंडविड्थ को कम करके या क्रिटिकल पाथ पर असर डालकर, ताकि सबसे बड़ा कॉन्टेंटफ़ुल पेंट (उदाहरण के लिए, हीरो इमेज) तेज़ी से लोड न हो पाए.
Netzwelt ने सीएलएस को ऑप्टिमाइज़ करते समय, सबसे ऊपर मौजूद विज्ञापन स्लॉट से पहले ही मीडियम रेक्टैंगल विज्ञापन हटा दिए थे. इससे यह भी फ़ायदा हुआ कि विज्ञापन सबसे बड़ा एलिमेंट नहीं बन पाए.
Netzwelt, विज्ञापनों के बजाय कॉन्टेंट को प्राथमिकता देने के लिए, एक सख्त नीति का पालन करता है. Netzwelt ने फ़ोल्ड के ऊपर इस्तेमाल की गई हीरो इमेज और फ़ॉन्ट को प्राथमिकता दी. साथ ही, विज्ञापन स्क्रिप्ट और विज्ञापनों के मुकाबले प्राथमिकता देने के लिए, क्रिटिकल पाथ को ऑप्टिमाइज़ किया. प्राथमिकता तय करने की इस सुविधा की मदद से, विज्ञापनों से एलसीपी पर कोई असर नहीं पड़ा.
इन ऑप्टिमाइज़ेशन के अलावा, Netzwelt ने इन सबसे सही तरीकों का भी इस्तेमाल किया:
- क्रिटिकल रेंडरिंग पाथ के लिए अलग सीएसएस बनाएं और उसे हेडर में डालें.
- सबसे ज़रूरी फ़ॉन्ट, स्क्रिप्ट, और इमेज पहले से लोड की गई हैं.
- फ़ोल्ड के ऊपर इमेज को लेज़ी लोड करने से बचाया गया.
font-display="swap"का इस्तेमाल किया गया.
जीडीपीआर की सहमति और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी
सहमति वाले डायलॉग बॉक्स से, अक्सर मुख्य वेब विटल्स पर बुरा असर पड़ता है. विज्ञापनों की तरह ही, सहमति वाले डायलॉग बॉक्स से भी, मुख्य वेब विटल पर दो तरह से असर पड़ सकता है:
- अगर इसे सबसे बड़े पेंट के तौर पर पहचाना जाता है या इससे लेआउट में बदलाव होता है, तो साफ़ तौर पर.
- असल में, सबसे बड़े कॉन्टेंटफ़ुल पेंट से बैंडविड्थ चुराकर, सबसे बड़े कॉन्टेंटफ़ुल पेंट के क्रिटिकल पाथ को ब्लॉक करके या सहमति मिलने तक विज्ञापनों को दिखाने में देरी करके. इससे लेआउट में बदलाव हो सकते हैं.
Netzwelt, सहमति देने की सुविधा देने वाली तीसरे पक्ष की कंपनी के साथ काम करता है. इस कंपनी ने ऑप्टिमाइज़ेशन भी लागू किए हैं. सबसे पहले, Netzwelt ने साफ़ तौर पर बताई गई गलतियों से बचने के लिए ये काम किए:
- सहमति वाली स्क्रिप्ट, अलग-अलग समय पर लोड की जाती हैं, ताकि ज़रूरी रिसॉर्स ब्लॉक न हों.
- सहमति को इस तरह से फ़ॉर्मैट किया जाता है कि बड़े एलिमेंट, एलसीपी में सबसे बड़े एलिमेंट के तौर पर शामिल न हों.
- सहमति वाला ओवरले, शिफ़्ट से बचने के लिए
position: fixedका इस्तेमाल करता है. - विज्ञापन सिर्फ़ सहमति मिलने के बाद दिखाए जाते हैं. हालांकि, विज्ञापन लोड होने पर लेआउट में बदलाव न हो, इसके लिए पहले से ज़रूरत के मुताबिक खाली जगह सेव की जाती है.
- यह पक्का करना कि सहमति वाले डायलॉग बॉक्स के डिसप्ले और पोज़िशनिंग से लेआउट में बदलाव न हो. यहां एक समस्या मिली और उसे ठीक किया गया. यह समस्या, सेवा देने वाली कंपनी के स्क्रोल-लॉक विकल्प की थी. इस विकल्प की वजह से, सहमति दिखाने के दौरान स्क्रोल करने की सुविधा बंद हो जाती थी. ऐसा, लेख के मुख्य कॉन्टेंट को स्क्रोल पर ले जाने की वजह से होता था. इससे लेआउट में बदलाव होता था.
इस काम के बाद भी, फ़ील्ड और लैब सीएलएस के बीच काफ़ी अंतर था. लैब सीएलएस शून्य के करीब था, जबकि फ़ील्ड वैल्यू थ्रेशोल्ड से काफ़ी ज़्यादा थीं. जांच करने के बाद, हमें पता चला है कि सहमति वाले iframe में लेआउट में बदलाव होने की वजह से ऐसा हुआ था. फ़िलहाल, यह बदलाव सिर्फ़ फ़ील्ड डेटा में सही तरीके से कैप्चर किया जाता है. Netzwelt, सहमति देने वाली तीसरे पक्ष की कंपनी के साथ मिलकर इस समस्या को ठीक करने के लिए काम कर रहा है.
समाचार की सदस्यता के मॉडल और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी
समाचार पब्लिशर, पत्रकारिता को फ़ंड देने के लिए सदस्यता मॉडल का इस्तेमाल कर रहे हैं. यह मॉडल, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के लिए काम का है. ऐसा इसलिए, क्योंकि लोग खराब उपयोगकर्ता अनुभव वाली वेबसाइटों की सदस्यता नहीं लेंगे. इसके अलावा, पैसे चुकाकर देखे जाने वाले कॉन्टेंट में सदस्यों को विज्ञापन नहीं दिखने चाहिए. हालांकि, विज्ञापन छिपाने से लेआउट में बदलाव हो सकता है. वेबसाइट को यह देखना होगा कि उपयोगकर्ताओं के पास कॉन्टेंट देखने का एनटाइटलमेंट है या नहीं. साथ ही, यह भी देखना होगा कि विज्ञापन दिखाने हैं या नहीं. इन जांचों की वजह से, लोड होने में ज़्यादा समय लग सकता है. इससे कॉन्टेंट में बदलाव हो सकता है या उपयोगकर्ता अनुभव खराब हो सकता है.
Netzwelt, ऐसे मॉडल का इस्तेमाल कर रहा है जिसमें कॉन्टेंट हमेशा मुफ़्त होता है, लेकिन सदस्यों को विज्ञापन नहीं दिखते. उन्होंने इंतज़ार के समय और लेआउट में होने वाले बदलावों को कम करने के लिए, एनटाइटलमेंट को क्वेरी करने और स्टोर करने के अलग-अलग तरीकों की जांच की.
एनटाइटलमेंट की शुरुआती क्वेरी की वजह से हमेशा देरी होती है. इसलिए, अगर एनटाइटलमेंट की क्वेरी करने में काफ़ी समय लगता है, तो साइट कैश मेमोरी में सेव की गई आखिरी स्थिति दिखाएगी. इसका मतलब है कि नए सदस्यों को एक बार विज्ञापन दिख सकते हैं. हालांकि, इसकी संभावना बहुत कम होती है. जिन उपयोगकर्ताओं ने हाल ही में सदस्यता खत्म की है उन्हें स्थानीय स्टोर किए गए एनटाइटलमेंट अपडेट होने से पहले, विज्ञापनों के बिना एक लोड दिख सकता है. एनटाइटलमेंट की जानकारी मिलने के बाद, उन्हें LocalStorage API का इस्तेमाल करके स्थानीय तौर पर सेव किया जाता है. ऐसा इसलिए किया जाता है, ताकि आने वाले समय में नेविगेशन के दौरान, ज़्यादा इंतज़ार और लेआउट में बदलाव से बचा जा सके.
ऑप्टिमाइज़ेशन के नतीजे
Netzwelt के ऑप्टिमाइज़ेशन के नतीजे साफ़ तौर पर बताते हैं कि यह सुविधा कितनी कारगर है. दुनिया भर के समाचार पब्लिशर में, इनका PageSpeed Insights स्कोर सबसे बेहतर है:
ऑप्टिमाइज़ेशन की मदद से, पेज का अनुभव बेहतर हुआ है. हालांकि, ये बदलाव कारोबार को ध्यान में रखकर किए गए हैं. इनसे विज्ञापन का अनुभव, विज्ञापन दिखने की सुविधा, और रेवेन्यू बेहतर हुआ है. ऑप्टिमाइज़ किए गए पेज को फिर से लॉन्च करने के बाद, Netzwelt को 20 से 30% तक सीपीएम में बढ़ोतरी हुई. साथ ही, विज्ञापन दिखने की दर 75% से ज़्यादा रही. हालांकि, Netzwelt का अनुमान है कि रेवेन्यू में हुई बढ़ोतरी और भी ज़्यादा हो सकती है. रीलॉन्च के बाद ट्रैफ़िक में बढ़ोतरी हुई है. ऐसा, बेहतर यूज़र एक्सपीरियंस की वजह से उपयोगकर्ता के जुड़ाव में बढ़ोतरी और बाउंस रेट में कमी की वजह से हुआ है. इन असर को मेज़र करना और इन्हें फिर से लॉन्च करने से जुड़े असर के तौर पर सेट करना मुश्किल है, क्योंकि ट्रैफ़िक में अपने-आप उतार-चढ़ाव होता रहता है. साथ ही, दुनिया भर में फैली महामारी का भी असर पड़ता है. इन अप्रत्यक्ष असर की वजह से, Netzwelt अपनी साइट की समीक्षा करते समय सिर्फ़ सीपीएम पर ध्यान नहीं देता. ऐसा इसलिए, क्योंकि सीपीएम गुमराह करने वाला हो सकता है. विज्ञापन से जुड़ी सभी मेट्रिक के साथ-साथ, वेबसाइट की परफ़ॉर्मेंस की जानकारी और यूज़र एक्सपीरियंस मेट्रिक से, असल स्थिति की जानकारी मिलती है.
आने वाले समय के लिए
Netzwelt का मानना है कि आने वाले समय में, तीसरे पक्ष की कुकी के बिना, कॉन्टेंट के ज़रिए कॉन्टेक्स्ट के हिसाब से टारगेटिंग, बेहतर यूज़र एक्सपीरियंस और पेज पर विज्ञापन दिखने की सुविधा के साथ, समाचार पब्लिशर के तौर पर सफलता पाने की कुंजी है.
इसलिए, Netzwelt सिर्फ़ Core Web Vitals के साथ ही नहीं रुकता, बल्कि Digital Goods API का इस्तेमाल करके, कई आधुनिक वेब सुविधाओं को लागू करता है. जैसे, प्रोग्रेसिव वेब ऐप्लिकेशन (PWA), ऑफ़लाइन कॉन्टेंट, डार्क मोड, वेब शेयर एपीआई, और भरोसेमंद वेब गतिविधियां (टीडब्ल्यूए).