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