डिवाइस पर ज़रूरत से ज़्यादा रिसॉर्स का इस्तेमाल करने वाले विज्ञापन, उपयोगकर्ता के अनुभव पर बुरा असर डालते हैं. जैसे, परफ़ॉर्मेंस खराब होने से पैदा होने वाले असर से लेकर बैटरी खत्म होने या बैंडविथ की तय सीमा खोने जैसे फ़ायदे भी. इन विज्ञापनों में नुकसान पहुंचाने वाली चीज़ें शामिल होती हैं, जैसे कि क्रिप्टो करंसी की माइनर से लेकर असल कॉन्टेंट तक. इनमें अनजाने में होने वाली गड़बड़ियां या परफ़ॉर्मेंस की समस्याएं होती हैं.
Chrome उन संसाधनों पर सीमाएं तय करता है जिनका इस्तेमाल कोई विज्ञापन कर सकता है. सीमा पार होने पर उस विज्ञापन को अनलोड कर देता है. ज़्यादा जानकारी के लिए, Chromium ब्लॉग पर जाकर सूचना पढ़ें. बहुत ज़्यादा विज्ञापन इंटरवेंशन, विज्ञापनों को अनलोड करने के लिए इस्तेमाल किया जाता है.
ज़्यादा विज्ञापन दिखाने से जुड़ी शर्तें
अगर उपयोगकर्ता ने किसी विज्ञापन से इंटरैक्ट नहीं किया है (उदाहरण के लिए, उस विज्ञापन पर टैप या क्लिक नहीं किया है), तो उसे भारी माना जाता है और वह नीचे दी गई किसी भी शर्त को पूरा करता है:
- मुख्य थ्रेड का इस्तेमाल कुल 60 सेकंड से ज़्यादा के लिए होता है
- किसी भी 30 सेकंड की विंडो में 15 सेकंड से ज़्यादा के लिए, मुख्य थ्रेड का इस्तेमाल करता है
- चार मेगाबाइट से ज़्यादा नेटवर्क बैंडविड्थ का इस्तेमाल करता हो
विज्ञापन फ़्रेम के किसी भी डिसेंडेंट iframes में इस्तेमाल किए गए सभी रिसॉर्स, उस विज्ञापन में रुकावट डालने की सीमाओं में गिने जाते हैं. यह ध्यान रखना ज़रूरी है कि मुख्य थ्रेड की समयसीमा और विज्ञापन लोड होने के बाद हुए समय का अंतर एक जैसा नहीं होता. सीमाएं इस बात पर तय होती हैं कि विज्ञापन के कोड को चलाने के लिए सीपीयू को कितना समय लगता है.
इंटरवेंशन की जांच करना
इस इंटरवेंशन को Chrome 85 में शिप किया गया, लेकिन डिफ़ॉल्ट रूप से, उपयोगकर्ता की निजता को सुरक्षित रखने के लिए, थ्रेशोल्ड में कुछ नॉइज़ और वैरिएशन जोड़ा गया है.
chrome://flags/#heavy-ad-privacy-mitigations को बंद है पर सेट करने से, ऐसी सुरक्षा सुविधाएं हट जाती हैं. इसका मतलब है कि पाबंदियां तय सीमा के हिसाब से, हमेशा के लिए लागू की जाती हैं. इससे डीबग और टेस्ट करना आसान हो जाएगा.
इंटरवेंशन ट्रिगर होने पर, आपको iframe में, भारी विज्ञापन की जगह विज्ञापन हटाया गया मैसेज दिखेगा. शामिल किए गए जानकारी लिंक पर जाने पर, आपको यह मैसेज दिखेगा: "यह विज्ञापन आपके डिवाइस के लिए बहुत ज़्यादा संसाधनों का इस्तेमाल करता है. इसलिए, Chrome ने इसे हटा दिया है."
आप heavy-ads.glitch.me पर सैंपल कॉन्टेंट पर लागू किया गया इंटरवेंशन देख सकते हैं, इस टेस्ट साइट का इस्तेमाल किसी आर्बिट्ररी यूआरएल को लोड करने के लिए भी किया जा सकता है, ताकि आप अपने कॉन्टेंट की तुरंत जांच कर सकें.
टेस्टिंग करते समय ध्यान रखें कि कई वजहों से इंटरवेंशन को लागू होने से रोका जा सकता है.
- एक ही पेज पर एक ही विज्ञापन को फिर से लोड करने से उस कॉम्बिनेशन को इंटरवेंशन से छूट मिल जाएगी. अपना ब्राउज़िंग इतिहास मिटाने और पेज को नए टैग में खोलने से आपको मदद मिल सकती है.
- पक्का करें कि पेज फ़ोकस में बना रहे - पेज को बैकग्राउंड में रखने (दूसरी विंडो पर स्विच करने) से, पेज के लिए टास्क की सूचियां रुक जाएंगी और इससे सीपीयू (CPU) इंटरवेंशन को ट्रिगर नहीं होगा.
- पक्का करें कि आप जांच के दौरान विज्ञापन के कॉन्टेंट पर टैप या क्लिक न करें. यह इंटरवेंशन उस कॉन्टेंट पर लागू नहीं होगा जिसके लिए उपयोगकर्ता इंटरैक्शन हासिल करता है.
आपको क्या करना होगा?
आप अपनी साइट पर सेवा देने वाली तीसरे पक्ष की कंपनी के विज्ञापन दिखाते हैं
आपको कुछ करने की ज़रूरत नहीं है. ध्यान रखें कि उपयोगकर्ताओं को आपकी साइट पर ऐसे विज्ञापन दिख सकते हैं जो तय सीमा से ज़्यादा हों.
आप अपनी साइट पर पहले पक्ष के विज्ञापन दिखाते हैं या तीसरे पक्ष के डिसप्ले के लिए विज्ञापन देते हैं
रिपोर्टिंग एपीआई के ज़रिए, ज़रूरी निगरानी लागू करने के लिए पढ़ना जारी रखें.
आप विज्ञापन सामग्री बनाते हैं या विज्ञापन सामग्री बनाने के लिए आपके पास कोई टूल है
कॉन्टेंट की परफ़ॉर्मेंस और संसाधनों के इस्तेमाल से जुड़ी समस्याओं की जांच करने का तरीका जानने के लिए, पढ़ना जारी रखें. आपको अपनी पसंद के विज्ञापन प्लैटफ़ॉर्म पर मौजूद दिशा-निर्देशों को भी देखना चाहिए, क्योंकि वे अन्य तकनीकी सलाह या पाबंदियां दे सकते हैं. उदाहरण के लिए, क्रिएटिव दिखाने के लिए Google के दिशा-निर्देश देखें. कॉन्फ़िगर करने लायक थ्रेशोल्ड को सीधे अपने ऑथरिंग टूल में शामिल करने के बारे में सोचें, ताकि खराब परफ़ॉर्मेंस करने वाले विज्ञापनों को जंगल में जाने से रोका जा सके.
किसी विज्ञापन को हटाने पर क्या होता है?
Chrome में होने वाले किसी इंटरवेंशन की रिपोर्ट, intervention रिपोर्ट टाइप के साथ
Reporting API
से की जाती है. किसी रिपोर्टिंग एंडपॉइंट के POST अनुरोध के ज़रिए या अपने JavaScript में इंटरवेंशन की सूचना पाने के लिए, Reporting API का इस्तेमाल किया जा सकता है.
ये रिपोर्ट रूट विज्ञापन-टैग किए गए iframe पर, उसके सभी डिसेंडेंट के साथ ट्रिगर होती हैं, यानी कि वह हर फ़्रेम जिसे इंटरवेंशन की मदद से अनलोड किया जाता है. इसका मतलब है कि अगर कोई विज्ञापन किसी तीसरे पक्ष के सोर्स यानी कि क्रॉस-साइट iframe से आता है, तो रिपोर्ट को हैंडल करना तीसरे पक्ष (उदाहरण के लिए, विज्ञापन देने वाली कंपनी) पर निर्भर करता है.
पेज को एचटीटीपी रिपोर्ट के लिए कॉन्फ़िगर करने के लिए, रिस्पॉन्स में Report-To हेडर शामिल होना चाहिए:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
ट्रिगर किए गए पोस्ट अनुरोध में इस तरह की रिपोर्ट शामिल होगी:
POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report
[{
"type": "intervention",
"age": 60,
"url": "https://example.com/url/of/ad.html",
"body": {
"sourceFile": null,
"lineNumber": null,
"columnNumber": null,
"id": "HeavyAdIntervention",
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
}
}]
JavaScript API, ReportingObserver को observe() तरीके के साथ उपलब्ध कराता है. इसका इस्तेमाल इंटरवेंशन पर मिले कॉलबैक को ट्रिगर करने के लिए किया जा सकता है. डीबग करने में मदद पाने के लिए, रिपोर्ट में और जानकारी अटैच करने के लिए यह तरीका काम का हो सकता है.
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json via your own reporting process
navigator.sendBeacon('https://report.example/your-endpoint', report);
}
}
// create the observer with the callback
const observer = new ReportingObserver(
(reports, observer) => {
sendReports(reports);
},
{ buffered: true }
);
// start watching for interventions
observer.observe();
हालांकि, क्योंकि इस इंटरवेंशन से, पेज को iframe से हटा दिया जाएगा. इसलिए, आपको एक फ़ेलसेफ़ फ़ाइल जोड़नी होगी, ताकि पेज पूरी तरह से मिटने से पहले ही रिपोर्ट कैप्चर कर ली जाए. उदाहरण के लिए, किसी iframe में मौजूद विज्ञापन. इसके लिए, अपने उसी कॉलबैक को pagehide इवेंट में जोड़ा जा सकता है.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
याद रखें कि उपयोगकर्ता अनुभव को बनाए रखने के लिए, pagehide इवेंट तय सीमा में काम कर सकता है. उदाहरण के लिए, रिपोर्ट के साथ fetch() अनुरोध भेजने की कोशिश करने पर, वह अनुरोध रद्द कर दिया जाएगा.
वह रिपोर्ट भेजने के लिए आपको navigator.sendBeacon() का इस्तेमाल करना चाहिए. इसके बाद भी, यह ब्राउज़र की ओर से की जाने वाली सबसे अच्छी कोशिश है. कोई गारंटी नहीं.
JavaScript से मिलने वाला JSON, POST अनुरोध पर भेजे गए JSON से मिलता-जुलता है:
[
{
type: 'intervention',
url: 'https://example.com/url/of/ad.html',
body: {
sourceFile: null,
lineNumber: null,
columnNumber: null,
id: 'HeavyAdIntervention',
message:
'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
},
},
];
रुकावट की वजह का पता लगाना
विज्ञापन का कॉन्टेंट सिर्फ़ वेब कॉन्टेंट होता है, इसलिए अपने कॉन्टेंट की पूरी परफ़ॉर्मेंस को ऑडिट करने के लिए Lighthouse जैसे टूल का इस्तेमाल करें. नतीजे में मिलने वाले ऑडिट, सुधारों पर इनलाइन दिशा-निर्देश देते हैं. web.dev/fast कलेक्शन को भी देखा जा सकता है.
ज़्यादा अलग-अलग कॉन्टेक्स्ट में अपने विज्ञापन की जांच करना आपके लिए फ़ायदेमंद हो सकता है. इसकी जांच करने के लिए, https://heavy-ads.glitch.me पर कस्टम यूआरएल विकल्प का इस्तेमाल करें. Chrome DevTools का इस्तेमाल करके यह पुष्टि की जा सकती है कि कॉन्टेंट को विज्ञापन के तौर पर टैग किया गया है या नहीं. रेंडरिंग पैनल में (तीन बिंदु वाले ⋮ मेन्यू से ऐक्सेस किया जा सकता है, फिर ज़्यादा टूल > रेंडरिंग) "विज्ञापन फ़्रेम हाइलाइट करें" को चुनें. अगर टॉप-लेवल विंडो या ऐसे दूसरे संदर्भ में कॉन्टेंट को टेस्ट करना है जहां उसे विज्ञापन के तौर पर टैग नहीं किया गया है, तो इंटरवेंशन ट्रिगर नहीं होगा. हालांकि, मैन्युअल तरीके से अब भी थ्रेशोल्ड के हिसाब से जांच की जा सकती है.
किसी फ़्रेम के विज्ञापन का स्टेटस भी एलिमेंट पैनल में दिखता है. यहां शुरुआती <iframe> टैग के बाद, ad
एनोटेशन जोड़ा जाता है. यह फ़्रेम सेक्शन के तहत
ऐप्लिकेशन पैनल में भी दिखता है, जहां विज्ञापन से टैग किए गए फ़्रेम में
एक "विज्ञापन स्थिति" एट्रिब्यूट शामिल होगा.
नेटवर्क का इस्तेमाल
विज्ञापन की पूरी नेटवर्क गतिविधि देखने के लिए, Chrome DevTools में नेटवर्क पैनल को लाएं. बार-बार लोड होने पर लगातार नतीजे पाने के लिए, आपको यह पक्का करना होगा कि "कैश मेमोरी बंद करें" विकल्प चुना गया हो.
ट्रांसफ़र की गई वैल्यू, पेज पर सबसे नीचे मौजूद है. यह आपको पूरे पेज के लिए ट्रांसफ़र की गई रकम दिखाएगा. सिर्फ़ विज्ञापन से जुड़े अनुरोधों को सीमित करने के लिए, सबसे ऊपर दिए गए फ़िल्टर इनपुट का इस्तेमाल करें.
अगर आपको विज्ञापन के लिए शुरुआती अनुरोध, उदाहरण के लिए, iframe का सोर्स दिखता है, तो अनुरोध में Initiator टैब का इस्तेमाल करके भी ट्रिगर किए जाने वाले सभी अनुरोध देखे जा सकते हैं.
अनुरोधों की पूरी सूची को साइज़ के हिसाब से क्रम में लगाना, बहुत बड़े रिसॉर्स की पहचान करने का एक अच्छा तरीका है. आम तौर पर, इसकी वजह वे इमेज और वीडियो होते हैं जिन्हें ऑप्टिमाइज़ नहीं किया गया होता.
इसके अलावा, बार-बार किए जाने वाले अनुरोधों को देखने के लिए, नाम के हिसाब से क्रम में लगाने का तरीका एक अच्छा तरीका हो सकता है. ऐसा हो सकता है कि यह बहुत बड़ा रिसॉर्स न हो, जो इंटरवेंशन को ट्रिगर करता हो, लेकिन बार-बार किए जाने वाले ऐसे कई अनुरोध हों जो तय सीमा से ज़्यादा हो रहे हों.
CPU उपयोग
DevTools में परफ़ॉर्मेंस पैनल की मदद से, सीपीयू के इस्तेमाल से जुड़ी समस्याओं का पता लगाने में मदद मिलेगी. सबसे पहले कैप्चर सेटिंग मेन्यू खोलें. सीपीयू की रफ़्तार को जितना हो सके, उतना धीमा करने के लिए सीपीयू के ड्रॉपडाउन का इस्तेमाल करें. हाई-एंड डेवलपमेंट वाली मशीनों की तुलना में, सीपीयू में किए जाने वाले बदलावों से कम क्षमता वाले डिवाइस पर ट्रिगर होने की संभावना ज़्यादा होती है.
इसके बाद, गतिविधि रिकॉर्ड करना शुरू करने के लिए रिकॉर्ड करें बटन पर क्लिक करें. ऐसा हो सकता है कि आप इस बात पर एक्सपेरिमेंट करना चाहें कि रिकॉर्ड करते समय आपको कब और कितनी देर का वीडियो रिकॉर्ड करना है, क्योंकि लंबे ट्रेस को लोड होने में काफ़ी समय लग सकता है. रिकॉर्डिंग लोड होने के बाद, रिकॉर्डिंग के किसी हिस्से को चुनने के लिए, टॉप टाइमलाइन का इस्तेमाल किया जा सकता है. ग्राफ़ के बिलकुल पीले, बैंगनी या हरे रंग से उन जगहों पर फ़ोकस करें जो स्क्रिप्टिंग, रेंडरिंग, और पेंटिंग को दिखाती हैं.
सबसे नीचे मौजूद बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब देखें. इन कॉलम को सेल्फ़ टाइम और टोटल टाइम के हिसाब से क्रम में लगाने पर, कोड में आने वाली रुकावटों की पहचान करने में मदद मिल सकती है.
जुड़ी हुई सोर्स फ़ाइल भी वहां लिंक होती है, ताकि आप हर लाइन की लागत की जांच करने के लिए सोर्स पैनल पर उसे फ़ॉलो कर सकें.
खराब रूप से ऑप्टिमाइज़ किए गए ऐनिमेशन की सामान्य समस्याओं पर ध्यान देना ज़रूरी है. इनकी वजह से लगातार लेआउट और पेंट की सुविधा ट्रिगर हो रही है या फिर महंगा काम किसी लाइब्रेरी में छिप गया है.
गलत इंटरवेंशन की शिकायत करने का तरीका
Chrome किसी फ़िल्टर सूची से संसाधन के अनुरोधों का मिलान करके, कॉन्टेंट को विज्ञापन के तौर पर टैग करता है. अगर विज्ञापन के अलावा किसी दूसरे कॉन्टेंट को टैग किया गया है, तो फ़िल्टर करने के नियमों से मेल न खाने के लिए, उस कोड को बदलें. अगर आपको लगता है कि किसी इंटरवेंशन को गलत तरीके से लागू किया गया है, तो इस टेंप्लेट की मदद से समस्या के बारे में बताया जा सकता है. कृपया पक्का करें कि आपने इंटरवेंशन रिपोर्ट का उदाहरण कैप्चर किया है और समस्या को फिर से सामने लाने के लिए आपके पास एक सैंपल यूआरएल है.