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