โฆษณาที่ใช้ทรัพยากรในอุปกรณ์ในปริมาณที่ไม่สมดุลจะส่งผลเสียต่อประสบการณ์ของผู้ใช้ ตั้งแต่ผลกระทบที่เห็นได้ชัดอย่างประสิทธิภาพที่ลดลงไปจนถึงผลกระทบที่มองไม่เห็น เช่น การทำให้แบตเตอรี่หมดหรือกินแบนด์วิดท์ โฆษณาเหล่านี้มีตั้งแต่โฆษณาที่เป็นอันตรายอย่างโจ่งแจ้ง เช่น การขุดคริปโตเคอเรนซี ไปจนถึงเนื้อหาจริงที่มีข้อบกพร่องหรือปัญหาด้านประสิทธิภาพโดยไม่ตั้งใจ
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() เพื่อส่งรายงานดังกล่าว และแม้ว่าจะใช้ 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 เพื่อตรวจสอบว่าเนื้อหาได้รับการติดแท็กเป็นโฆษณาแล้ว ในแผงการแสดงผล (เข้าถึงได้ผ่านเมนูจุด 3 จุด ⋮ จากนั้นเลือกเครื่องมือเพิ่มเติม > การแสดงผล) ให้เลือก "ไฮไลต์เฟรมโฆษณา" หากทดสอบเนื้อหาในหน้าต่างระดับบนสุดหรือบริบทอื่นๆ ที่ไม่ได้ติดแท็กเป็นโฆษณา ระบบจะไม่ทริกเกอร์การแทรกแซง แต่คุณยังคงตรวจสอบกับเกณฑ์ด้วยตนเองได้
สถานะโฆษณาของเฟรมจะแสดงในแผงองค์ประกอบด้วย ซึ่งจะมีการเพิ่มคำอธิบายประกอบ ad
ไว้หลังแท็ก <iframe> ที่เปิด นอกจากนี้ ยังดูในแผงแอปพลิเคชันในส่วนเฟรมได้ด้วย โดยเฟรมที่ติดแท็กโฆษณาจะมีแอตทริบิวต์ "สถานะโฆษณา"
การใช้งานเครือข่าย
เปิดแผงเครือข่ายในเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome เพื่อดูกิจกรรมเครือข่ายโดยรวมของโฆษณา อย่าลืมเลือกตัวเลือก "ปิดใช้แคช" เพื่อให้ได้ผลลัพธ์ที่สอดคล้องกันเมื่อโหลดซ้ำ
ค่าที่โอนที่ด้านล่างของหน้าเว็บจะแสดงจำนวนเงินที่โอนสำหรับทั้งหน้าเว็บ ลองใช้อินพุตตัวกรองที่ด้านบนเพื่อจํากัดคําขอให้เหลือเฉพาะคําขอที่เกี่ยวข้องกับโฆษณา
หากพบคําขอเริ่มต้นสําหรับโฆษณา เช่น แหล่งที่มาของ iframe คุณสามารถใช้แท็บผู้เริ่มภายในคําขอเพื่อดูคําขอทั้งหมดที่เรียกให้แสดง
การจัดเรียงรายการคำขอโดยรวมตามขนาดเป็นวิธีที่ดีในการตรวจหาทรัพยากรขนาดใหญ่มากเกินไป โดยต้นตอที่พบบ่อย ได้แก่ รูปภาพและวิดีโอที่ยังไม่ได้เพิ่มประสิทธิภาพ
นอกจากนี้ การจัดเรียงตามชื่อยังช่วยคุณค้นหาคำขอที่ซ้ำกันได้ดีอีกด้วย การที่ระบบแทรกแซงอาจไม่ได้เกิดจากทรัพยากรขนาดใหญ่รายการเดียว แต่เกิดจากคำขอที่ซ้ำกันจำนวนมากซึ่งเพิ่มขึ้นเกินขีดจำกัด
การใช้งาน CPU
แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บจะช่วยวินิจฉัยปัญหาการใช้งาน CPU ขั้นตอนแรกคือการเปิดเมนูการตั้งค่าการจับภาพ ใช้เมนูแบบเลื่อนลง CPU เพื่อลดความเร็วของ CPU ให้ได้มากที่สุด การแทรกแซงสำหรับ CPU มีแนวโน้มที่จะทริกเกอร์ในอุปกรณ์ที่มีประสิทธิภาพต่ำมากกว่าเครื่องสำหรับพัฒนาระดับสูง
จากนั้น คลิกปุ่มบันทึกเพื่อเริ่มบันทึกกิจกรรม คุณอาจลองทดลองบันทึกเวลาและระยะเวลาที่ใช้ในการบันทึก เนื่องจากการติดตามที่ใช้เวลานานอาจใช้เวลาโหลดมาก เมื่อโหลดไฟล์บันทึกเสียงแล้ว คุณจะใช้ไทม์ไลน์ด้านบนเพื่อเลือกส่วนของไฟล์บันทึกเสียงได้ มุ่งเน้นที่พื้นที่ในกราฟที่เป็นสีเหลือง สีม่วง หรือสีเขียวล้วน ซึ่งแสดงถึงสคริปต์ การแสดงผล และการวาด
สำรวจแท็บจากล่างขึ้นบน แผนภูมิการเรียก และบันทึกเหตุการณ์ที่ด้านล่าง การจัดเรียงคอลัมน์เหล่านั้นตามเวลาดำเนินการเองและเวลาทั้งหมดจะช่วยระบุจุดคอขวดในโค้ดได้
ไฟล์ต้นทางที่เกี่ยวข้องจะลิงก์อยู่ในนั้นด้วย คุณจึงสามารถไปที่แผงแหล่งที่มาเพื่อตรวจสอบต้นทุนของแต่ละบรรทัด
ปัญหาทั่วไปที่ต้องค้นหาที่นี่คือภาพเคลื่อนไหวที่มีการเพิ่มประสิทธิภาพไม่ดีซึ่งทำให้เกิดเลย์เอาต์อย่างต่อเนื่อง และการระบายสี หรือมีต้นทุนสูงที่ซ่อนอยู่ในไลบรารีที่รวมอยู่
วิธีรายงานการแทรกแซงที่ไม่ถูกต้อง
Chromeติดแท็กเนื้อหาเป็นโฆษณาโดยจับคู่คำขอทรัพยากรกับรายการตัวกรอง หากมีการติดแท็กเนื้อหาที่ไม่ใช่โฆษณา ให้พิจารณาเปลี่ยนโค้ดนั้นเพื่อหลีกเลี่ยงการจับคู่กับกฎการกรอง หากสงสัยว่ามีการแทรกแซงอย่างไม่ถูกต้อง คุณสามารถแจ้งปัญหาผ่านเทมเพลตนี้ โปรดตรวจสอบว่าคุณได้บันทึกตัวอย่างรายงานการแทรกแซงและมี URL ตัวอย่างเพื่อจำลองการเกิดปัญหา