โฆษณาที่ใช้ทรัพยากรในอุปกรณ์มากเกินสัดส่วนจะส่งผลเสียต่อประสบการณ์ของผู้ใช้ ตั้งแต่ผลกระทบที่เห็นได้ชัดอย่างประสิทธิภาพที่ลดลง ไปจนถึงผลกระทบที่มองเห็นได้ยาก เช่น การทำให้แบตเตอรี่หมดเร็วหรือการใช้โควต้าแบนด์วิดท์จนหมด โฆษณาเหล่านี้มีตั้งแต่โฆษณาที่เป็นอันตรายอย่างชัดเจน เช่น โปรแกรมขุด คริปโตเคอเรนซี ไปจนถึงเนื้อหาที่ถูกต้องตามกฎหมายซึ่งมีข้อบกพร่องหรือปัญหาด้านประสิทธิภาพโดยไม่ตั้งใจ
Chrome จะกำหนดขีดจำกัดสำหรับทรัพยากรที่โฆษณาใช้ได้ และจะยกเลิกการโหลดโฆษณานั้นหากมีการใช้ทรัพยากรเกินขีดจำกัด อ่านรายละเอียดเพิ่มเติมได้ในประกาศในบล็อก Chromium กลไกที่ใช้ในการยกเลิกการโหลดโฆษณาคือการแทรกแซงโฆษณาที่ใช้ทรัพยากรมาก
เกณฑ์ของโฆษณาที่ใช้ทรัพยากรมาก
ระบบจะถือว่าโฆษณามีขนาดใหญ่หากผู้ใช้ไม่ได้โต้ตอบกับโฆษณา (เช่น ไม่ได้แตะหรือคลิก) และเป็นไปตามเกณฑ์ต่อไปนี้
- ใช้เทรดหลักรวมกันมากกว่า 60 วินาที
- ใช้เทรดหลักนานกว่า 15 วินาทีในกรอบเวลา 30 วินาที
- ใช้แบนด์วิดท์เครือข่ายมากกว่า 4 เมกะไบต์
ทรัพยากรทั้งหมดที่ใช้โดย iframe ลูกหลานของเฟรมโฆษณาจะนับรวมใน ขีดจํากัดสําหรับการแทรกแซงโฆษณานั้น โปรดทราบว่าขีดจำกัดเวลาของเทรดหลัก ไม่เหมือนกับเวลาที่ผ่านไปนับตั้งแต่โหลดโฆษณา ขีดจำกัด คือระยะเวลาที่ CPU ใช้ในการเรียกใช้โค้ดของโฆษณา
การทดสอบการแทรกแซง
การแทรกแซงนี้เปิดตัวใน Chrome 85 แต่โดยค่าเริ่มต้นจะมีการเพิ่มสัญญาณรบกวนและความแปรปรวนบางอย่างลงในเกณฑ์เพื่อปกป้องความเป็นส่วนตัวของผู้ใช้
การตั้งค่า chrome://flags/#heavy-ad-privacy-mitigations เป็นปิดใช้จะนำการป้องกันเหล่านั้นออก
ซึ่งหมายความว่าระบบจะใช้ข้อจำกัดตามที่กำหนด
โดยอิงตามขีดจำกัดเท่านั้น ซึ่งจะช่วยให้การแก้ไขข้อบกพร่องและการทดสอบง่ายขึ้น
เมื่อมีการทริกเกอร์การแทรกแซง คุณควรเห็นเนื้อหาใน iframe สำหรับ โฆษณาที่มีขนาดใหญ่ถูกแทนที่ด้วยข้อความนำโฆษณาออกแล้ว หากคลิกลิงก์รายละเอียดที่รวมไว้ คุณจะเห็นข้อความที่อธิบายว่า "โฆษณานี้ใช้ทรัพยากรมากเกินไปสำหรับอุปกรณ์ของคุณ Chrome จึงนำโฆษณานี้ออก"
คุณดูการแทรกแซงที่ใช้กับเนื้อหาตัวอย่างได้ที่ heavy-ads.glitch.me นอกจากนี้ คุณยังใช้เว็บไซต์ทดสอบนี้ เพื่อโหลด URL ที่กำหนดเองเป็นวิธีที่รวดเร็วในการทดสอบเนื้อหาของคุณเองได้ด้วย
โปรดทราบว่าเมื่อทำการทดสอบ มีสาเหตุหลายประการที่อาจทําให้ระบบไม่สามารถใช้ การแทรกแซงได้
- การโหลดโฆษณาเดียวกันซ้ำในหน้าเดียวกันจะยกเว้นการผสมผสานนั้นจากการแทรกแซง การล้างประวัติการท่องเว็บและเปิดหน้าเว็บในแท็กใหม่ อาจช่วยได้
- ตรวจสอบว่าหน้าเว็บยังคงอยู่ในโฟกัส การย้ายหน้าเว็บไปไว้เบื้องหลัง (สลับไป หน้าต่างอื่น) จะหยุดคิวงานสำหรับหน้าเว็บชั่วคราว และจะไม่ทริกเกอร์ การแทรกแซง CPU
- โปรดอย่าแตะหรือคลิกเนื้อหาโฆษณาขณะทดสอบ เนื่องจากระบบจะไม่ใช้การแทรกแซงกับเนื้อหาที่มีการโต้ตอบของผู้ใช้
สิ่งที่ต้องทำ
คุณแสดงโฆษณาจากผู้ให้บริการบุคคลที่สามในเว็บไซต์
คุณไม่ต้องดำเนินการใดๆ เพียงแค่ทราบว่าผู้ใช้อาจเห็นโฆษณาที่เกินขีดจำกัด ซึ่งถูกนำออกเมื่ออยู่ในเว็บไซต์ของคุณ
คุณแสดงโฆษณาของบุคคลที่หนึ่งในเว็บไซต์หรือแสดงโฆษณาสำหรับการแสดงผลของบุคคลที่สาม
โปรดอ่านต่อเพื่อให้แน่ใจว่าคุณได้ติดตั้งใช้งานการตรวจสอบที่จำเป็นผ่าน Reporting API สำหรับการแทรกแซงโฆษณาที่มีขนาดใหญ่
คุณสร้างเนื้อหาโฆษณาหรือดูแลรักษาเครื่องมือสำหรับสร้างเนื้อหาโฆษณา
โปรดอ่านต่อเพื่อให้ทราบวิธีทดสอบเนื้อหาเพื่อดูปัญหาด้านประสิทธิภาพและการใช้ทรัพยากร นอกจากนี้ คุณควรอ่านคำแนะนำเกี่ยวกับ แพลตฟอร์มโฆษณาที่คุณเลือก เนื่องจากอาจมีคำแนะนำทางเทคนิคเพิ่มเติม หรือข้อจำกัด เช่น ดูหลักเกณฑ์สำหรับครีเอทีฟโฆษณา Display ของ Google พิจารณาสร้างเกณฑ์ที่กำหนดค่าได้ลงในเครื่องมือเขียนโดยตรงเพื่อ ป้องกันไม่ให้โฆษณาที่มีประสิทธิภาพต่ำหลุดรอดออกไป
จะเกิดอะไรขึ้นเมื่อมีการนำโฆษณาออก
การแทรกแซงใน Chrome จะรายงานผ่าน Reporting API
ที่มีชื่อเหมาะสม
โดยมีinterventionประเภทรายงาน คุณใช้ Reporting API เพื่อรับการแจ้งเตือน
เกี่ยวกับการแทรกแซงได้โดยPOSTส่งคำขอไปยังปลายทางการรายงานหรือภายใน
JavaScript
รายงานเหล่านี้จะทริกเกอร์ใน iframe ที่ติดแท็กโฆษณาของรูทพร้อมกับองค์ประกอบย่อยทั้งหมด กล่าวคือ ทุกเฟรมที่การแทรกแซงยกเลิกการโหลด ซึ่งหมายความว่าหากโฆษณามาจากแหล่งที่มาของบุคคลที่สาม เช่น iframe ข้ามเว็บไซต์ ก็จะเป็นหน้าที่ของบุคคลที่สามรายนั้น (เช่น ผู้ให้บริการโฆษณา) ในการจัดการรายงาน
หากต้องการกำหนดค่าหน้าเว็บสำหรับรายงาน HTTP การตอบกลับควรมีส่วนหัว 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 ที่ระบุในการแทรกแซงได้ ซึ่งจะมีประโยชน์ในกรณีที่คุณต้องการแนบข้อมูลเพิ่มเติมไปกับรายงานเพื่อช่วยในการ
แก้ไขข้อบกพร่อง
// 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() เพื่อส่งรายงานดังกล่าว และแม้ว่าจะเป็นเช่นนั้น เบราว์เซอร์ก็ทำได้เพียงอย่างเต็มความสามารถเท่านั้น ไม่มีการรับประกัน
JSON ที่ได้จาก JavaScript จะคล้ายกับที่ส่งในPOST
คำขอ
[
{
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 ได้ด้วย
คุณอาจพบว่าการทดสอบโฆษณาในบริบทที่แยกออกมามากขึ้นนั้นมีประโยชน์ คุณสามารถใช้ตัวเลือก URL ที่กำหนดเองใน https://heavy-ads.glitch.me เพื่อทดสอบด้วย iframe ที่ติดแท็กโฆษณาสำเร็จรูป คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อตรวจสอบว่าเนื้อหา ได้รับการติดแท็กเป็นโฆษณาแล้ว ในแผงการแสดงผล (เข้าถึงได้ผ่านเมนูจุดสามจุด ⋮ จากนั้นเครื่องมือเพิ่มเติม > การแสดงผล) ให้เลือก "ไฮไลต์เฟรมโฆษณา " หากทดสอบเนื้อหาในหน้าต่างระดับบนสุดหรือบริบทอื่นๆ ที่ไม่ได้ติดแท็กเป็นโฆษณา ระบบจะไม่ทริกเกอร์การแทรกแซง แต่คุณยังคงตรวจสอบด้วยตนเองเทียบกับเกณฑ์ได้
สถานะโฆษณาของเฟรมจะแสดงในแผงองค์ประกอบด้วย โดยจะมีการเพิ่มad
คำอธิบายประกอบหลังจากแท็กเปิด <iframe> ซึ่งจะเห็นได้ในแผงแอปพลิเคชันในส่วนเฟรม โดยเฟรมที่ติดแท็กโฆษณา
จะมีแอตทริบิวต์ "สถานะโฆษณา"
การใช้งานเครือข่าย
เปิดแผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูกิจกรรมเครือข่ายโดยรวม ของโฆษณา คุณจะต้องตรวจสอบว่าได้เลือกตัวเลือก "ปิดใช้แคช" แล้ว เพื่อให้ได้ผลลัพธ์ที่สอดคล้องกันเมื่อโหลดซ้ำ
มูลค่าที่โอนที่ด้านล่างของหน้าจะแสดงจํานวนเงินที่โอนสําหรับทั้งหน้า ลองใช้ข้อมูลตัวกรองที่ด้านบน เพื่อจำกัดคำขอเฉพาะคำขอที่เกี่ยวข้องกับโฆษณา
หากพบคำขอเริ่มต้นสำหรับโฆษณา เช่น แหล่งที่มาของ iframe คุณยังใช้แท็บผู้เริ่มภายในคำขอเพื่อดูคำขอทั้งหมดที่ทริกเกอร์ได้ด้วย
การจัดเรียงรายการคำขอทั้งหมดตามขนาดเป็นวิธีที่ดีในการระบุแหล่งข้อมูลที่มีขนาดใหญ่เกินไป สาเหตุที่พบบ่อย ได้แก่ รูปภาพและวิดีโอที่ไม่ได้ เพิ่มประสิทธิภาพ
นอกจากนี้ การจัดเรียงตามชื่อยังเป็นวิธีที่ดีในการระบุคำขอที่ซ้ำกัน อาจไม่ใช่ทรัพยากรขนาดใหญ่เพียงรายการเดียวที่ทําให้เกิดการแทรกแซง แต่เป็น คําขอที่ซ้ำกันจํานวนมากที่ค่อยๆ เกินขีดจํากัด
การใช้งาน CPU
แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บจะช่วยวินิจฉัยปัญหาการใช้งาน CPU ขั้นตอนแรกคือการเปิด เมนูการตั้งค่าการจับภาพ ใช้เมนูแบบเลื่อนลง CPU เพื่อลดความเร็ว CPU ให้ได้มากที่สุด การแทรกแซงสำหรับ CPU มีแนวโน้มที่จะทริกเกอร์ในอุปกรณ์ที่มีกำลังไฟต่ำมากกว่า เครื่องพัฒนาประสิทธิภาพสูง
จากนั้นคลิกปุ่มบันทึกเพื่อเริ่มบันทึกกิจกรรม คุณอาจต้อง ทดลองเวลาและระยะเวลาในการบันทึก เนื่องจากร่องรอยที่ยาวอาจใช้เวลาโหลดนาน พอสมควร เมื่อโหลดการบันทึกแล้ว คุณจะใช้ไทม์ไลน์ด้านบนเพื่อเลือกส่วนของการบันทึกได้ มุ่งเน้นที่พื้นที่บนกราฟที่เป็นสีเหลือง ม่วง หรือเขียวทึบ ซึ่งแสดงถึง การเขียนสคริปต์ การแสดงผล และการวาด
สำรวจแท็บ จากล่างขึ้นบน แผนภูมิการเรียก และ บันทึกเหตุการณ์ ที่ด้านล่าง การจัดเรียงคอลัมน์เหล่านั้นตามเวลาของตัวเองและเวลารวม จะช่วยระบุจุดคอขวดในโค้ดได้
นอกจากนี้ ระบบยังลิงก์ไฟล์ต้นฉบับที่เกี่ยวข้องไว้ด้วย คุณจึงติดตามไฟล์ดังกล่าวไปยังแผงแหล่งที่มาเพื่อตรวจสอบค่าใช้จ่ายของแต่ละบรรทัดได้
ปัญหาที่พบบ่อยซึ่งควรตรวจสอบในที่นี้ ได้แก่ ภาพเคลื่อนไหวที่ได้รับการเพิ่มประสิทธิภาพไม่ดี ซึ่งทําให้เกิดเลย์เอาต์และการระบายสีอย่างต่อเนื่อง หรือการดําเนินการที่มีค่าใช้จ่ายสูงซึ่ง ซ่อนอยู่ภายในไลบรารีที่รวมไว้
วิธีรายงานการแทรกแซงที่ไม่ถูกต้อง
Chrome ติดแท็กเนื้อหาเป็นโฆษณาโดยการจับคู่คำขอทรัพยากรกับรายการตัวกรอง หากติดแท็กเนื้อหาที่ไม่ใช่โฆษณาไว้ ให้พิจารณาเปลี่ยนโค้ดดังกล่าวเพื่อหลีกเลี่ยงการจับคู่กับ กฎการกรอง หากสงสัยว่ามีการใช้มาตรการแทรกแซงอย่างไม่ถูกต้อง คุณแจ้งปัญหาผ่านเทมเพลตนี้ได้ โปรดตรวจสอบว่าคุณได้บันทึกตัวอย่างรายงานการแทรกแซงและมีตัวอย่าง URL เพื่อจำลองปัญหา