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