ऐसे विज्ञापन जो किसी डिवाइस पर ज़रूरत से ज़्यादा संसाधनों का इस्तेमाल करते हैं, वे उपयोगकर्ता के अनुभव पर बुरा असर डालते हैं. इन विज्ञापनों की वजह से, डिवाइस की परफ़ॉर्मेंस पर असर पड़ता है. साथ ही, बैटरी खर्च होने या बैंडविड्थ की अनुमतियों का इस्तेमाल होने जैसी समस्याएं भी आ सकती हैं. इन विज्ञापनों में, नुकसान पहुंचाने वाले विज्ञापनों से लेकर, गलती से बने बग या परफ़ॉर्मेंस से जुड़ी समस्याओं वाले असली विज्ञापन शामिल हैं. जैसे, क्रिप्टो करंसी माइनर.
Chrome, विज्ञापन के लिए इस्तेमाल किए जा सकने वाले संसाधनों की सीमा तय करता है. अगर सीमा से ज़्यादा संसाधनों का इस्तेमाल किया जाता है, तो Chrome उस विज्ञापन को अनलोड कर देता है. ज़्यादा जानकारी के लिए, Chromium ब्लॉग पर दी गई सूचना पढ़ें. विज्ञापनों को अनलोड करने के लिए, विज्ञापनों के लिए ज़्यादा इंटरवेंशन का इस्तेमाल किया जाता है.
ज़्यादा संसाधन इस्तेमाल करने वाले विज्ञापन की शर्तें
किसी विज्ञापन को भारी तब माना जाता है, जब उपयोगकर्ता ने उससे इंटरैक्ट न किया हो. उदाहरण के लिए, उस पर टैप या क्लिक न किया हो. साथ ही, वह इनमें से किसी भी शर्त को पूरा करता हो:
- कुल 60 सेकंड से ज़्यादा के लिए मुख्य थ्रेड का इस्तेमाल करता है
- 30 सेकंड की किसी भी विंडो में 15 सेकंड से ज़्यादा के लिए मुख्य थ्रेड का इस्तेमाल करता है
- नेटवर्क बैंडविड्थ के चार मेगाबाइट से ज़्यादा का इस्तेमाल करता है
विज्ञापन फ़्रेम के किसी भी डिसेंटेंट iframes के इस्तेमाल किए गए सभी संसाधन, उस विज्ञापन पर इंटरवेंशन करने की सीमाओं के हिसाब से गिने जाते हैं. यह ध्यान रखना ज़रूरी है कि मुख्य थ्रेड के लिए तय की गई समयसीमा, विज्ञापन लोड होने के बाद बीते समय से अलग होती है. सीपीयू को विज्ञापन के कोड को लागू करने में जितने समय लगते हैं उतने समय की सीमाएं होती हैं.
इंटरवेंशन की जांच करना
यह बदलाव, Chrome 85 में शामिल किया गया है. हालांकि, उपयोगकर्ता की निजता को सुरक्षित रखने के लिए, डिफ़ॉल्ट रूप से थ्रेशोल्ड में कुछ गड़बड़ी और बदलाव जोड़े गए हैं.
chrome://flags/#heavy-ad-privacy-mitigations को बंद है पर सेट करने से, ये सुरक्षा सेटिंग हट जाती हैं. इसका मतलब है कि पाबंदियां पूरी तरह से तय सीमा के हिसाब से लागू की जाती हैं. इससे डीबग करने और जांच करने में आसानी होगी.
इंटरवेंशन ट्रिगर होने पर, आपको iframe में मौजूद कॉन्टेंट दिखेगा. इसमें, विज्ञापन हटा दिया गया मैसेज के साथ, भारी विज्ञापन की जगह कॉन्टेंट दिखेगा. अगर आपने जानकारी लिंक पर क्लिक किया, तो आपको एक मैसेज दिखेगा. इसमें बताया गया होगा कि "यह विज्ञापन आपके डिवाइस के बहुत से संसाधन इस्तेमाल करता है, इसलिए Chrome ने इसे हटा दिया है."
heavy-ads.glitch.me पर, सैंपल कॉन्टेंट पर लागू किया गया इंटरवेंशन देखा जा सकता है. इस टेस्ट साइट का इस्तेमाल करके, अपने कॉन्टेंट की तुरंत जांच करने के लिए, कोई भी यूआरएल लोड किया जा सकता है.
जांच करते समय ध्यान रखें कि कई वजहों से, इंटरवेंशन लागू नहीं हो सकता.
- एक ही पेज पर एक ही विज्ञापन को फिर से लोड करने पर, उस कॉम्बिनेशन को इंटरवेंशन से छूट दी जाएगी. ब्राउज़िंग इतिहास मिटाने और पेज को नए टैग में खोलने से, इस समस्या को हल करने में मदद मिल सकती है.
- पक्का करें कि पेज फ़ोकस में रहे - पेज को बैकग्राउंड में ले जाने (किसी दूसरी विंडो पर स्विच करने) से, पेज के लिए टास्क की सूची रोक दी जाएगी. इसलिए, सीपीयू का इंटरवेंशन ट्रिगर नहीं होगा.
- पक्का करें कि जांच करते समय, विज्ञापन कॉन्टेंट पर टैप या क्लिक न किया जाए - ऐसा कॉन्टेंट जिस पर उपयोगकर्ता इंटरैक्शन होता है उस पर इंटरवेंशन लागू नहीं होगा.
आपको क्या करना होगा?
आपकी साइट पर तीसरे पक्ष की कंपनी के विज्ञापन दिखाए जाते हैं
आपको कोई कार्रवाई करने की ज़रूरत नहीं है. हालांकि, इस बात का ध्यान रखें कि आपकी साइट पर उपयोगकर्ताओं को ऐसे विज्ञापन दिख सकते हैं जो हटाए गए विज्ञापनों की तय सीमा से ज़्यादा हों.
आपकी साइट पर पहले पक्ष के विज्ञापन दिखाए जाते हैं या तीसरे पक्ष के डिसप्ले विज्ञापन दिखाए जाते हैं
ज़्यादा विज्ञापन इंटर्वेंशन के लिए, Reporting API की मदद से ज़रूरी मॉनिटरिंग लागू करने के लिए, पढ़ना जारी रखें.
आपने विज्ञापन कॉन्टेंट बनाया हो या आपके पास विज्ञापन कॉन्टेंट बनाने वाला टूल हो
आगे पढ़ें और जानें कि परफ़ॉर्मेंस और संसाधनों के इस्तेमाल से जुड़ी समस्याओं के लिए, अपने कॉन्टेंट की जांच कैसे की जाती है. आपको अपनी पसंद के विज्ञापन प्लैटफ़ॉर्म के दिशा-निर्देश भी देखने चाहिए, क्योंकि वे आपको तकनीकी सलाह या पाबंदियां दे सकते हैं. उदाहरण के लिए, Google के डिसप्ले क्रिएटिव के लिए दिशा-निर्देश देखें. सीधे अपने लेखन टूल में कॉन्फ़िगर किए जा सकने वाले थ्रेशोल्ड बनाएं, ताकि परफ़ॉर्मेंस खराब होने वाले विज्ञापनों को दिखाने से रोका जा सके.
किसी विज्ञापन को हटाने पर क्या होता है?
Chrome में किसी रुकावट की शिकायत, intervention रिपोर्ट टाइप के साथ, सही नाम वाले Reporting API के ज़रिए की जाती है. Reporting API का इस्तेमाल करके, इंटरवेंशन के बारे में सूचनाएं पाएं. इसके लिए, POST रिपोर्टिंग एंडपॉइंट पर अनुरोध करें या अपने JavaScript में ऐसा करें.
ये रिपोर्ट, विज्ञापन टैग किए गए रूट iframe के साथ-साथ उसके सभी डिस्सेंटेंट पर ट्रिगर होती हैं. इसका मतलब है कि इंटरवेंशन की वजह से अनलोड किए गए हर फ़्रेम पर ये रिपोर्ट ट्रिगर होती हैं. इसका मतलब है कि अगर कोई विज्ञापन तीसरे पक्ष के सोर्स से आता है, जैसे कि क्रॉस-साइट iframe, तो शिकायत को मैनेज करने का काम उस तीसरे पक्ष (उदाहरण के लिए, विज्ञापन देने वाली कंपनी) पर निर्भर करता है.
एचटीटीपी रिपोर्ट के लिए पेज को कॉन्फ़िगर करने के लिए, रिस्पॉन्स में Report-To हेडर शामिल होना चाहिए:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
ट्रिगर किए गए POST अनुरोध में, इस तरह की रिपोर्ट शामिल होगी:
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 पर, कस्टम यूआरएल के विकल्प का इस्तेमाल करके, पहले से तैयार और विज्ञापन टैग किए गए iframe की मदद से इसकी जांच की जा सकती है. Chrome DevTools का इस्तेमाल करके, यह पुष्टि की जा सकती है कि कॉन्टेंट को विज्ञापन के तौर पर टैग किया गया है या नहीं. रेंडरिंग पैनल में, "विज्ञापन फ़्रेम को हाइलाइट करें " चुनें. इस पैनल को ऐक्सेस करने के लिए, तीन बिंदु वाले ⋮ मेन्यू पर जाएं. इसके बाद, ज़्यादा टूल> रेंडरिंग पर जाएं. अगर टॉप-लेवल विंडो या किसी ऐसे दूसरे कॉन्टेक्स्ट में कॉन्टेंट की जांच की जा रही है जहां उसे विज्ञापन के तौर पर टैग नहीं किया गया है, तो इंटरवेंशन ट्रिगर नहीं होगा. हालांकि, आपके पास अब भी थ्रेशोल्ड की मैन्युअल तौर पर जांच करने का विकल्प है.
फ़्रेम के विज्ञापन का स्टेटस, एलिमेंट पैनल में भी दिखता है. यहां ओपनिंग <iframe> टैग के बाद, ad
एनोटेशन जोड़ा जाता है. यह जानकारी, फ़्रेम सेक्शन में मौजूद ऐप्लिकेशन पैनल में भी दिखती है. यहां विज्ञापन टैग वाले फ़्रेम में, "विज्ञापन का स्टेटस" एट्रिब्यूट शामिल होगा.
नेटवर्क का इस्तेमाल
विज्ञापन के लिए नेटवर्क की पूरी गतिविधि देखने के लिए, Chrome DevTools में नेटवर्क पैनल खोलें. बार-बार लोड करने पर एक जैसे नतीजे पाने के लिए, पक्का करें कि "कैश मेमोरी बंद करें" विकल्प को चुना गया हो.
पेज पर सबसे नीचे मौजूद ट्रांसफ़र की गई वैल्यू से, आपको पूरे पेज के लिए ट्रांसफ़र की गई रकम दिखेगी. सिर्फ़ विज्ञापन से जुड़े अनुरोधों को सीमित करने के लिए, सबसे ऊपर मौजूद फ़िल्टर इनपुट का इस्तेमाल करें.
अगर आपको विज्ञापन का शुरुआती अनुरोध मिलता है, जैसे कि iframe का सोर्स, तो अनुरोध में शुरू करने वाला टैब का इस्तेमाल करके, उन सभी अनुरोधों को देखा जा सकता है जिन्हें वह ट्रिगर करता है.
अनुरोधों की पूरी सूची को साइज़ के हिसाब से क्रम में लगाने से, बहुत बड़े रिसोर्स का पता लगाने में मदद मिलती है. आम तौर पर, इमेज और वीडियो को ऑप्टिमाइज़ न करने की वजह से ऐसा होता है.
इसके अलावा, नाम के हिसाब से क्रम में लगाने से, बार-बार किए गए अनुरोधों का पता लगाने में मदद मिल सकती है. ऐसा हो सकता है कि कोई एक बड़ा संसाधन, इंटरवेंशन को ट्रिगर न कर रहा हो, बल्कि बार-बार किए गए अनुरोधों की संख्या, तय सीमा से ज़्यादा हो.
CPU उपयोग
DevTools में परफ़ॉर्मेंस पैनल की मदद से, सीपीयू के इस्तेमाल से जुड़ी समस्याओं का पता लगाया जा सकता है. पहला चरण, कैप्चर सेटिंग मेन्यू खोलना है. सीपीयू को ज़्यादा से ज़्यादा धीमा करने के लिए, सीपीयू ड्रॉपडाउन का इस्तेमाल करें. सीपीयू के लिए इंटरवेंशन, बेहतर डेवलपमेंट मशीनों की तुलना में कम क्षमता वाले डिवाइसों पर ट्रिगर होने की संभावना ज़्यादा होती है.
इसके बाद, गतिविधि रिकॉर्ड करने के लिए, रिकॉर्ड करें बटन पर क्लिक करें. आपके पास यह तय करने का विकल्प होता है कि कब और कितनी देर तक रिकॉर्ड करना है. ऐसा इसलिए, क्योंकि लंबे ट्रैक को लोड होने में काफ़ी समय लग सकता है. रिकॉर्डिंग लोड होने के बाद, सबसे ऊपर मौजूद टाइमलाइन का इस्तेमाल करके, रिकॉर्डिंग का कोई हिस्सा चुना जा सकता है. ग्राफ़ पर उन हिस्सों पर फ़ोकस करें जो स्क्रिप्टिंग, रेंडरिंग, और पेंटिंग दिखाने के लिए, पीले, बैंगनी या हरे रंग में दिखाए गए हैं.
सबसे नीचे मौजूद, बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब को एक्सप्लोर करें. उन कॉलम को खुद का समय और कुल समय के हिसाब से क्रम में लगाने से, कोड में रुकावटों की पहचान करने में मदद मिल सकती है.
उससे जुड़ी सोर्स फ़ाइल भी वहां लिंक होती है, ताकि हर लाइन की लागत की जांच करने के लिए, सोर्स पैनल पर जाया जा सके.
यहां आम तौर पर, खराब तरीके से ऑप्टिमाइज़ किए गए ऐनिमेशन की समस्याएं देखी जा सकती हैं. ये ऐनिमेशन, लगातार लेआउट और पेंट को ट्रिगर करते हैं. इसके अलावा, इसमें शामिल लाइब्रेरी में मौजूद, महंगे ऑपरेशन भी समस्याएं पैदा कर सकते हैं.
गलत इंटरवेंशन की शिकायत करने का तरीका
Chrome, रिसॉर्स के अनुरोधों को फ़िल्टर की सूची से मैच करके, कॉन्टेंट को विज्ञापन के तौर पर टैग करता है. अगर विज्ञापन के अलावा किसी दूसरे कॉन्टेंट को टैग किया गया है, तो फ़िल्टर करने के नियमों से मैच होने से बचने के लिए, उस कोड को बदलें. अगर आपको लगता है कि कोई इंटरवेंशन गलत तरीके से लागू किया गया है, तो इस टेंप्लेट की मदद से समस्या बताएं. कृपया पक्का करें कि आपने इंटरवेंशन रिपोर्ट का उदाहरण कैप्चर किया हो. साथ ही, समस्या को फिर से दिखाने के लिए आपके पास सैंपल यूआरएल हो.