ऐसे विज्ञापन जो किसी डिवाइस पर ज़रूरत से ज़्यादा संसाधनों का इस्तेमाल करते हैं, वे उपयोगकर्ता के अनुभव पर बुरा असर डालते हैं. इन विज्ञापनों की वजह से, डिवाइस की परफ़ॉर्मेंस पर असर पड़ता है. साथ ही, बैटरी खर्च होने या बैंडविड्थ की अनुमतियों का इस्तेमाल होने जैसी समस्याएं भी आ सकती हैं. इन विज्ञापनों में, नुकसान पहुंचाने वाली गतिविधियां दिखाने वाले विज्ञापन शामिल होते हैं. जैसे, क्रिप्टो करंसी की माइनर करने वाली कंपनियां, असल कॉन्टेंट से लेकर अनजाने में की गई गड़बड़ियां या परफ़ॉर्मेंस की समस्याएं.
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 के ज़रिए की जाती है. रिपोर्टिंग एंडपॉइंट पर POST अनुरोध के ज़रिए या JavaScript में, इंटरवेंशन के बारे में सूचना पाने के लिए, Reporting API का इस्तेमाल किया जा सकता है.
ये रिपोर्ट, रूट विज्ञापन से टैग किए गए 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 का सोर्स, तो आप अनुरोध में ट्रिगर होने वाले सभी अनुरोध देखने के लिए, Initiator टैब का भी इस्तेमाल कर सकते हैं.
अनुरोधों की पूरी सूची को साइज़ के हिसाब से क्रम में लगाने से, बहुत बड़े रिसोर्स का पता लगाने में मदद मिलती है. जिन इमेज और वीडियो को ऑप्टिमाइज़ नहीं किया गया है उनमें इस तरह की इमेज और वीडियो शामिल हैं.
इसके अलावा, नाम के हिसाब से क्रम में लगाने से, बार-बार किए गए अनुरोधों का पता लगाने में मदद मिल सकती है. ऐसा हो सकता है कि कोई एक बड़ा संसाधन, इंटरवेंशन को ट्रिगर न कर रहा हो, बल्कि बार-बार किए गए अनुरोधों की संख्या, तय सीमा से ज़्यादा हो.
CPU उपयोग
DevTools में परफ़ॉर्मेंस पैनल की मदद से, सीपीयू के इस्तेमाल से जुड़ी समस्याओं का पता लगाया जा सकता है. पहला चरण, कैप्चर सेटिंग मेन्यू खोलना है. सीपीयू को ज़्यादा से ज़्यादा धीमा करने के लिए, सीपीयू ड्रॉपडाउन का इस्तेमाल करें. सीपीयू के लिए इंटरवेंशन, बेहतर डेवलपमेंट मशीनों की तुलना में कम क्षमता वाले डिवाइसों पर ट्रिगर होने की संभावना ज़्यादा होती है.
इसके बाद, गतिविधि रिकॉर्ड करना शुरू करने के लिए, रिकॉर्ड करें बटन पर क्लिक करें. आपके पास यह तय करने का विकल्प होता है कि रिकॉर्डिंग कब और कितनी देर तक की जाए. ऐसा इसलिए, क्योंकि लंबी ट्रैक रिकॉर्डिंग को लोड होने में काफ़ी समय लग सकता है. रिकॉर्डिंग लोड होने के बाद, सबसे ऊपर मौजूद टाइमलाइन का इस्तेमाल करके, रिकॉर्डिंग का कोई हिस्सा चुना जा सकता है. ग्राफ़ पर पीले, बैंगनी या हरे रंग के उन हिस्सों पर फ़ोकस करें जो स्क्रिप्टिंग, रेंडरिंग, और पेंटिंग को दिखाते हैं.
सबसे नीचे मौजूद बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब देखें. उन कॉलम को खुद का समय और कुल समय के हिसाब से क्रम में लगाने से, कोड में रुकावटों की पहचान करने में मदद मिल सकती है.
उससे जुड़ी सोर्स फ़ाइल भी वहां लिंक होती है, ताकि हर लाइन की लागत की जांच करने के लिए, सोर्स पैनल पर जाया जा सके.
यहां आम तौर पर, खराब तरीके से ऑप्टिमाइज़ किए गए ऐनिमेशन से जुड़ी समस्याएं देखी जा सकती हैं. ये ऐनिमेशन, लगातार लेआउट और पेंट को ट्रिगर करते हैं. इसके अलावा, इसमें शामिल लाइब्रेरी में मौजूद, महंगे ऑपरेशन भी समस्याएं पैदा कर सकते हैं.
गलत इंटरवेंशन की शिकायत करने का तरीका
Chrome, रिसॉर्स के अनुरोधों को फ़िल्टर की सूची से मैच करके, कॉन्टेंट को विज्ञापन के तौर पर टैग करता है. अगर विज्ञापन के अलावा किसी दूसरे कॉन्टेंट को टैग किया गया है, तो फ़िल्टर करने के नियमों से मैच होने से बचने के लिए, उस कोड को बदलें. अगर आपको लगता है कि कोई इंटरवेंशन गलत तरीके से लागू किया गया है, तो इस टेंप्लेट की मदद से समस्या बताएं. कृपया पक्का करें कि आपने इंटरवेंशन रिपोर्ट का उदाहरण कैप्चर किया हो. साथ ही, समस्या को फिर से दिखाने के लिए आपके पास सैंपल यूआरएल हो.