เผยแพร่: 22 กันยายน 2025, อัปเดตล่าสุด: 7 มกราคม 2026
สำหรับผู้ใช้แล้ว คงไม่มีอะไรน่าหงุดหงิดไปกว่าหน้าเว็บที่จู่ๆ ก็ช้าลงจนแทบจะหยุดนิ่ง แบตเตอรี่หมดเร็ว หรือใช้โควต้าอินเทอร์เน็ตรายเดือนจนหมด บางครั้งสาเหตุไม่ได้มาจากเนื้อหาที่ผู้ชมเข้ามาดู แต่อาจมาจากโฆษณาที่ทำงานอยู่เบื้องหลัง
Chrome บังคับใช้ขีดจำกัดของทรัพยากรที่โฆษณาสามารถใช้เพื่อปกป้องประสบการณ์ของผู้ใช้ เมื่อโฆษณาเกินขีดจำกัดเหล่านี้จนกลายเป็นโฆษณาที่มีขนาดใหญ่ Chrome จะยกเลิกการโหลดโฆษณาดังกล่าวเพื่อเพิ่มพื้นที่ว่างในทรัพยากรของอุปกรณ์
เอกสารนี้อธิบายวิธีการทำงานของการแทรกแซงนี้ เกณฑ์ที่เกี่ยวข้อง และแนวทางปฏิบัติแนะนำบางอย่างที่คุณสามารถใช้เพื่อให้โฆษณาทำงานได้อย่างราบรื่น
การแทรกแซงโฆษณาที่ใช้ทรัพยากรมากคืออะไร
การแทรกแซงโฆษณาที่มีการใช้ทรัพยากรมากเป็นกลไกใน Chrome ที่ตรวจสอบการใช้ทรัพยากรของเฟรมโฆษณา หากโฆษณาใช้แบนด์วิดท์หรือกำลังประมวลผล CPU มากเกินไป Chrome จะเลิกโหลดเฟรมโฆษณานั้น
ผู้ใช้จะเห็นกล่องสีเทาพร้อมข้อความที่ระบุว่านำโฆษณาออกแล้วแทนที่จะเห็นโฆษณา โดยมักจะมีลิงก์รายละเอียดที่อธิบายว่าโฆษณาใช้ทรัพยากรมากเกินไป
เมื่อใดที่ระบบจะถือว่าโฆษณามีขนาดใหญ่
Chrome จะพิจารณาว่าโฆษณามีขนาดใหญ่ตามเกณฑ์ที่เฉพาะเจาะจง 3 ข้อ หากผู้ใช้ไม่ได้โต้ตอบกับโฆษณาและโฆษณามีลักษณะใดลักษณะหนึ่งตามเกณฑ์ต่อไปนี้ ระบบจะยกเลิกการโหลดโฆษณา
- การใช้งานเครือข่าย: โฆษณาใช้แบนด์วิดท์เครือข่ายมากกว่า 4 เมกะไบต์
- การใช้งาน CPU สูงสุด: โฆษณาใช้เทรดหลักนานกว่า 15 วินาทีในหน้าต่าง 30 วินาที
- การใช้งาน CPU ทั้งหมด: โฆษณาใช้เทรดหลักนานกว่า 60 วินาทีโดยรวม ทรัพยากรทั้งหมดที่ใช้โดย iframe ลูกหลานของเฟรมโฆษณาจะนับรวมในขีดจํากัดสําหรับการแทรกแซงโฆษณานั้น
ทริกเกอร์ที่พบบ่อยสำหรับการแทรกแซงนี้มีอะไรบ้าง
พฤติกรรมของโฆษณาบางประเภทมีแนวโน้มที่จะทําให้เกิดการแทรกแซงเหล่านี้มากกว่าประเภทอื่นๆ สาเหตุที่พบบ่อย ได้แก่
- สื่อที่ไม่ได้บีบอัด: โหลดรูปภาพที่มีขนาดใหญ่มากและบีบอัดไม่ดี
- JavaScript ที่มีการใช้งานหนัก: การดำเนินการที่ซับซ้อน เช่น การถอดรหัสไฟล์วิดีโอโดยใช้ JavaScript
- การคำนวณที่ซับซ้อน: ทำการคำนวณที่ซับซ้อนในเบื้องหลัง
- เนื้อหาวิดีโอที่ไม่มีท่าทางสัมผัส: โหลดไฟล์วิดีโอขนาดใหญ่ก่อนที่ผู้ใช้จะโต้ตอบกับโฆษณา
จะเกิดอะไรขึ้นเมื่อมีการนำโฆษณาออก
เมื่อ Chrome ตรวจพบว่าโฆษณาเกินเกณฑ์โฆษณาที่มีการใช้ทรัพยากรมาก ระบบจะดำเนินการทันทีเพื่อปกป้องทรัพยากรของอุปกรณ์ผู้ใช้
ประสบการณ์ของผู้ใช้
จากมุมมองของผู้ใช้ ระบบจะเลิกโหลดโฆษณาทันที Chrome จะแสดงกล่องสีเทาพร้อมข้อความว่านำโฆษณาออกแล้วแทน หากผู้ใช้คลิกรายละเอียดภายในคอนเทนเนอร์ ผู้ใช้จะเห็นคำอธิบายที่เฉพาะเจาะจง
ประสบการณ์การใช้งานของนักพัฒนาแอป
นอกจากนี้ Chrome ยังสร้างรายงานการแทรกแซงด้วย Reporting API เพื่อให้คุณทราบสิ่งที่เกิดขึ้นอย่างชัดเจน ก่อนหน้านี้ ระบบจะส่งรายงานเหล่านี้ไปยังเฟรมโฆษณาและเฟรมลูกหลานของเฟรมโฆษณาเท่านั้น อย่างไรก็ตาม ผู้เผยแพร่โฆษณามักไม่มีทางทราบว่าโฆษณาในหน้าเว็บของตนถูกนำออก Chrome จึงได้ขยายกลไกการรายงานเพื่อแก้ไขปัญหานี้ ตอนนี้ระบบจะส่งรายงานการแทรกแซงไปยังเฟรมฝัง (เฟรมระดับบนของเฟรมโฆษณารูท) นอกเหนือจากเฟรมโฆษณาเอง รายงานที่ส่งไปยังเฟรมฝังประกอบด้วยรหัสของเฟรมย่อยและ URL ของเฟรมโฆษณา
หากต้องการกำหนดค่าหน้าเว็บสำหรับรายงาน HTTP การตอบกลับควรมีส่วนหัว Report-To ดังนี้
Reporting-Endpoints: default="https://example.com/reports"
คำขอ 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?utm_source=devtools"
}
}]
เฟรมฝังจะได้รับรายงานที่คล้ายกันซึ่งส่งไปยัง URL ของเฟรมฝัง แต่ข้อความจะมีรหัสของเฟรมย่อยและ URL ที่เฉพาะเจาะจงของเฟรมย่อยเพิ่มเติมด้วย
...
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384?utm_source=devtools (id=123;url=http://example2.com/pre-redirect-ad-url.html)"
...
Javascript API มี ReportingObserver พร้อมเมธอด observe() ที่ใช้ทริกเกอร์ Callback ที่ระบุในการแทรกแซงได้ ซึ่งอาจมีประโยชน์หากคุณต้องการแนบข้อมูลเพิ่มเติมในรายงานเพื่อช่วยในการแก้ไขข้อบกพร่อง
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json using 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 (เช่น โฆษณา) ให้ใช้เหตุการณ์ pagehide เพื่อให้แน่ใจว่าการเรียกกลับการรายงานจะบันทึกรายงานการแทรกแซงก่อนที่หน้าจะหายไป
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
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',
},
},
];
แนวทางปฏิบัติแนะนำสำหรับนักพัฒนาแอป
โปรดพิจารณาแนวทางปฏิบัติแนะนำต่อไปนี้เพื่อป้องกันไม่ให้โฆษณาแสดงเป็นแบนเนอร์โฆษณาที่มีขนาดใหญ่
- กำหนดให้ผู้ใช้โต้ตอบกับเนื้อหาที่มีขนาดใหญ่: เกณฑ์การแทรกแซงใช้กับโฆษณาที่ผู้ใช้ไม่ได้โต้ตอบด้วย หากผู้ใช้คลิกหรือแตะโฆษณาของคุณ ระบบจะไม่ใช้ขีดจำกัดของทรัพยากรอีกต่อไป สำหรับประสบการณ์การใช้งานวิดีโอหรือริชมีเดีย ให้รอท่าทางของผู้ใช้ (เช่น "คลิกเพื่อเล่น") ก่อนที่จะโหลดชิ้นงานขนาดใหญ่
- เพิ่มประสิทธิภาพรูปภาพและวิดีโอ: ตรวจสอบว่ารูปภาพได้รับการบีบอัดและวิดีโอได้รับการเพิ่มประสิทธิภาพสำหรับเว็บ หลีกเลี่ยงการโหลดไฟล์วิดีโอขนาดใหญ่โดยอัตโนมัติ แต่ให้ใช้ตัวยึดตำแหน่งที่มีขนาดเล็กจนกว่าผู้ใช้จะมีส่วนร่วม
- ตรวจสอบการใช้ CPU: ภาพเคลื่อนไหวที่ซับซ้อนหรือการดำเนินการ JavaScript ที่ทริกเกอร์เลย์เอาต์และการวาดอย่างต่อเนื่องอาจทำให้การใช้ CPU เพิ่มขึ้นอย่างรวดเร็ว ใช้เครื่องมือเพื่อระบุจุดคอขวดในโค้ดที่อาจทำให้เทรดหลักทำงานหนักเป็นเวลานาน
- ตรวจสอบเฟรมลูกหลาน: โปรดทราบว่าจำนวนทรัพยากรรวมทุกอย่างภายใน iframe ของโฆษณา หากโฆษณาโหลดพิกเซลการติดตามหรือเฟรมย่อยของบุคคลที่สาม การใช้ทรัพยากรของพิกเซลหรือเฟรมย่อยเหล่านั้นจะนับรวมในโควต้าของคุณ
- แยกเนื้อหาที่ไม่ใช่โฆษณา: แยกเฟรมเนื้อหาที่ไม่ใช่โฆษณาออกเป็นโดเมนต่างๆ หรือรูปแบบที่จดจำได้ซึ่งนโยบายของผู้ให้บริการรายการตัวกรองไม่น่าจะถือว่าเป็นโดเมนโฆษณา
วิธีแก้ไขข้อบกพร่องและวินิจฉัยสาเหตุของการแทรกแซง
หากต้องการแก้ปัญหาและแก้ไขการแทรกแซงโฆษณาที่มากเกินไปอย่างมีประสิทธิภาพ คุณต้องทำความเข้าใจก่อนว่าตรรกะการตรวจหาของ Chrome ระบุเนื้อหาเป็นโฆษณาได้อย่างไร จากนั้นใช้เครื่องมือสำหรับนักพัฒนาแอปในตัวเพื่อตรวจสอบทริกเกอร์ทรัพยากรที่เฉพาะเจาะจงซึ่งนำไปสู่การนำออก
Chrome ตรวจหาโฆษณาได้อย่างไร
Chrome ติดแท็กเนื้อหาเป็นโฆษณาโดยการจับคู่คำขอทรัพยากรกับรายการตัวกรอง ตรรกะการตรวจหาจะมีผลกับเนื้อหาภายใน iframe เราจะไม่ถือว่าเฟรมหน้าหลักเกี่ยวข้องกับโฆษณา แม้ว่าจะมีสคริปต์โฆษณาก็ตาม โปรดทราบว่า iframe ที่โหลดจากทรัพยากรที่ตรงกับรายการตัวกรองจะถือเป็นโฆษณา แม้ว่าจะมีการโหลดเนื้อหาอื่นๆ ที่ไม่ใช่โฆษณาจากเฟรมนั้นด้วยก็ตาม ตัวอย่างเช่น วิดีโอเพลเยอร์ที่โหลดใน iframe ที่ติดแท็กเป็นโฆษณาอาจโหลดเนื้อหาที่ไม่ใช่โฆษณาด้วย
วิธียืนยันการตรวจหาโฆษณา
ในฐานะนักพัฒนาซอฟต์แวร์ คุณสามารถยืนยันด้วยภาพได้ว่า Chrome ตรวจพบเนื้อหาของคุณเป็นโฆษณาสำเร็จหรือไม่โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- การไฮไลต์เฟรมโฆษณา: ในแผงการแสดงผล ให้เลือกไฮไลต์เฟรมโฆษณา ซึ่งจะกำหนดรหัสสีให้เฟรมโฆษณาที่ตรวจพบเป็นสีแดงบนหน้าจอ
- คำอธิบายประกอบขององค์ประกอบ: ในแผงองค์ประกอบ iframe โฆษณาที่ตรวจพบจะแสดงคำอธิบายประกอบของโฆษณาข้างแท็ก
<iframe>ที่เปิด - กิจกรรมเครือข่าย: ในแผงเครือข่าย ให้กรองคำขอตาม
Is ad-relatedบูลีน - สถานะโฆษณา: ในแผงแอปพลิเคชันในส่วนเฟรม เฟรมที่ติดแท็กโฆษณาจะมีแอตทริบิวต์
Ad Status
จะวินิจฉัยสาเหตุของการแทรกแซงได้อย่างไร
Chrome มีเครื่องมือสำหรับตรวจสอบและปรับปรุงคุณภาพและประสิทธิภาพของหน้าเว็บ เรียกใช้ Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูรายงานเกี่ยวกับประสิทธิภาพของหน้าเว็บ นอกจากนี้ คุณยังดูคอลเล็กชัน web.dev/fast และสำรวจข้อมูลเพิ่มเติมเกี่ยวกับ Web Vitals ได้ด้วย
การใช้งานเครือข่าย
เปิดแผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูกิจกรรมเครือข่ายโดยรวมของโฆษณา เลือกตัวเลือกปิดใช้แคชเพื่อให้ได้ผลลัพธ์ที่สอดคล้องกันเมื่อโหลดซ้ำ
มูลค่าที่โอนที่ด้านล่างของหน้าจะแสดงจํานวนเงินที่โอนสําหรับทั้งหน้า หากต้องการจำกัดคำขอเฉพาะคำขอที่เกี่ยวข้องกับโฆษณา ให้ใช้ข้อมูลที่ป้อนตัวกรองที่ด้านบน
หากพบคำขอเริ่มต้นสำหรับโฆษณา เช่น แหล่งที่มาของ iframe ให้ใช้แท็บผู้เริ่มภายในคำขอเพื่อดูคำขอทั้งหมดที่ทริกเกอร์
การจัดเรียงรายการคำขอทั้งหมดตามขนาดเป็นวิธีที่ดีในการระบุทรัพยากรที่มีขนาดใหญ่เกินไป สาเหตุที่พบบ่อย ได้แก่ รูปภาพและวิดีโอที่ยังไม่ได้เพิ่มประสิทธิภาพ
นอกจากนี้ การจัดเรียงตามชื่อยังเป็นวิธีที่ดีในการตรวจหาคำขอที่ซ้ำกัน การแทรกแซงอาจไม่ได้เกิดจากทรัพยากรขนาดใหญ่เพียงรายการเดียว แต่เกิดจากคำขอที่ซ้ำกันจำนวนมากซึ่งค่อยๆ เกินขีดจำกัด
การใช้งาน CPU
แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บจะช่วยวินิจฉัยปัญหาการใช้งาน CPU เปิดเมนูการตั้งค่าการจับภาพ ใช้เมนูแบบเลื่อนลงของ CPU เพื่อลดความเร็วของ CPU ให้ได้มากที่สุด การแทรกแซงสำหรับ CPU มีแนวโน้มที่จะทริกเกอร์ในอุปกรณ์ที่มีกำลังไฟต่ำมากกว่าเครื่องมือพัฒนาประสิทธิภาพสูง
จากนั้นคลิกปุ่มบันทึกเพื่อเริ่มบันทึกกิจกรรม คุณอาจต้องทดลองเวลาและระยะเวลาในการบันทึก เนื่องจากร่องรอยที่ยาวอาจใช้เวลาในการโหลดนานพอสมควร เมื่อโหลดการบันทึกแล้ว คุณจะใช้ไทม์ไลน์ด้านบนเพื่อเลือกส่วนของการบันทึกได้ มุ่งเน้นที่พื้นที่บนกราฟที่เป็นสีเหลือง ม่วง หรือเขียวทึบ ซึ่งแสดงถึงการเขียนสคริปต์ การแสดงผล และการวาด
สำรวจแท็บจากล่างขึ้นบน Call Tree และบันทึกเหตุการณ์ที่ด้านล่าง การจัดเรียงคอลัมน์เหล่านั้นตามเวลาของตัวเองและเวลารวมจะช่วยระบุจุดคอขวดในโค้ดได้
นอกจากนี้ ระบบยังลิงก์ไฟล์ต้นฉบับที่เกี่ยวข้องไว้ด้วย คุณจึงสามารถติดตามไฟล์ดังกล่าวไปยังแผงแหล่งที่มาเพื่อตรวจสอบต้นทุนของแต่ละบรรทัดได้
ปัญหาที่พบบ่อยซึ่งควรตรวจสอบในที่นี้คือภาพเคลื่อนไหวที่เพิ่มประสิทธิภาพไม่ดีซึ่งทําให้เกิดเลย์เอาต์และการระบายสีอย่างต่อเนื่อง หรือการดําเนินการที่มีค่าใช้จ่ายสูงซึ่งซ่อนอยู่ภายในไลบรารีที่รวมไว้
วิธีรายงานการแทรกแซงที่ไม่ถูกต้อง
หากเนื้อหาที่ไม่ใช่โฆษณาได้รับการติดแท็กดังกล่าว ให้พิจารณาเปลี่ยนโค้ดเพื่อหลีกเลี่ยงการจับคู่กฎการกรอง หรือติดต่อผู้ดูแลEasyList โดยตรงเพื่อเปลี่ยนกฎการกรอง โปรดทราบว่าการแทรกแซงโฆษณาที่มีขนาดใหญ่จะไม่ส่งผลต่อเฟรมที่มีท่าทางของผู้ใช้ ดังนั้นจึงสามารถยกเว้นวิดีโอได้โดยกำหนดให้คลิกปุ่มเล่นก่อนโหลดเนื้อหา หาก EasyList ไม่ตรงกับเนื้อหาของคุณ และ Chrome จัดประเภทเนื้อหาเป็นโฆษณาที่เกี่ยวข้องอย่างไม่ถูกต้อง คุณสามารถแจ้งปัญหาเกี่ยวกับ Chrome โดยใช้เทมเพลตนี้ เมื่อแจ้งปัญหา ให้แนบตัวอย่างที่บันทึกไว้ของรายงานการแทรกแซงและ URL ตัวอย่างเพื่อจำลองปัญหา