מודעות שצורכות כמות לא פרופורציונלית של משאבים במכשיר משפיעות לרעה על חוויית המשתמש – החל מההשפעות הברורות של ירידה בביצועים ועד השלכות פחות גלויות כמו התרוקנות הסוללה או ניצול לרעה של רוחב הפס. המודעות האלה נעות בין תוכנות זדוניות אקטיביות, כמו כורים של מטבעות וירטואליים, לבין תוכן אמיתי עם באגים שלא מכוונים או בעיות בביצועים.
ב-Chrome יש הגבלה על המשאבים שבהם ניתן להשתמש במודעה, ובמקרה של חריגה מהמגבלות, היא מוסרת מהטעינה. לפרטים נוספים, אפשר לקרוא את ההודעה בבלוג של Chromium. המנגנון המשמש להסרת המודעות שנטענו הוא התערבות חמורה במודעות.
קריטריונים כבדים של מודעות
מודעה נחשבת ככבדה אם המשתמש לא ביצע איתה אינטראקציה (לדוגמה, לא הקיש עליה או לחץ עליה) והיא עומדת באחד מהקריטריונים הבאים:
- נעשה שימוש ב-thread הראשי במשך יותר מ-60 שניות בסך הכול.
- נעשה שימוש ב-thread הראשי במשך יותר מ-15 שניות בכל חלון של 30 שניות.
- הרשת משתמשת ביותר מ-4 מגה-בייט של רוחב פס
כל המשאבים שמשמשים מסגרות iframe ברמת הצאצא של מסגרת המודעה נספרים כחלק ממגבלות ההתערבות במודעה. חשוב לציין שמגבלות הזמן של ה-thread הראשי לא זהות לזמן שחלף מאז טעינת המודעה. המגבלות הן על משך הזמן שנדרש למעבד (CPU) כדי להפעיל את קוד המודעה.
בדיקת ההתערבות
ההתערבות נשלחה ב-Chrome 85, אבל כברירת מחדל נוספו רעשי סף והבדלים מסוימים בערכי הסף כדי להגן על פרטיות המשתמשים.
אם מגדירים את chrome://flags/#heavy-ad-privacy-mitigations כ-מושבת, מסירים את ההגנות האלה. כלומר, ההגבלות חלות באופן דטרמיניסטי אך ורק בהתאם למגבלות. העדכון אמור להקל על ניפוי הבאגים והבדיקה.
כשההתערבות מופעלת, התוכן אמור להופיע ב-iframe של המודעה הכבדה שהוחלף בהודעה המודעה הוסרה. בלחיצה על הקישור שבפרטים שמופיעה תופיע ההודעה "המודעה הזו צורכת יותר מדי משאבים מהמכשיר, לכן Chrome הסיר אותה".
תוכלו לראות את ההתערבות שהוחלה על תוכן לדוגמה בכתובת heavy-ads.glitch.me. תוכלו גם להשתמש באתר הבדיקה הזה כדי לטעון כתובת URL שרירותית כדרך מהירה לבדוק את התוכן שלכם.
חשוב לזכור שכשבודקים שיש כמה סיבות שעלולות למנוע התערבות כזה.
- טעינה מחדש של אותה מודעה באותו הדף תחריג את השילוב הזה מההתערבות. ניקוי היסטוריית הגלישה ופתיחת הדף בתג חדש יכולים לעזור כאן.
- ודאו שהדף נשאר במוקד – העברת הדף ברקע (מעבר לחלון אחר) תשהה את תורי המשימות של הדף, כך שלא תגרום להתערבות של המעבד (CPU).
- הקפידו לא להקיש או ללחוץ על תוכן מודעה במהלך הבדיקה, התערבות היא לא תחול על תוכן שמקבל אינטראקציה של משתמשים.
מה צריך לעשות?
מוצגות באתר מודעות של ספק צד שלישי
לא נדרשת פעולה מצידך, אבל יכול להיות שיוצגו למשתמשים מודעות שחורגות מהמגבלות שהוסרו במהלך הביקור באתר.
אתם מציגים מודעות של צד ראשון באתר שלכם או מספקים מודעות של צד שלישי
כדאי להמשיך לקרוא כדי לוודא שהטמעתם את המעקב הנדרש דרך Reporting API להתערבויות כבדות במודעות.
אתם יוצרים תוכן מודעה או שיש לכם כלי ליצירת תוכן מודעה
המשיכו לקרוא כדי לוודא שאתם יודעים איך לבדוק את התוכן שלכם כדי לאתר בעיות בביצועים ובשימוש במשאבים. כדאי גם לעיין בהנחיות לגבי פלטפורמות הפרסום שבחרתם, כי הן עשויות לספק ייעוץ טכני נוסף או הגבלות. לדוגמה, עיינו בהנחיות של 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 דומה לקובץ ה-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',
},
},
];
אבחון הגורם להתערבות
תוכן המודעה הוא רק תוכן מהאינטרנט, לכן מומלץ להשתמש בכלים כמו Lighthouse כדי לבדוק את הביצועים הכוללים של התוכן. הביקורות שמתקבלות מספקות הנחיה ישירה לגבי שיפורים. תוכלו גם לעיין באוסף web.dev/fast.
מומלץ לבדוק את המודעה בהקשר מבודד יותר. תוכלו להשתמש באפשרות של כתובת URL מותאמת אישית בכתובת https://heavy-ads.glitch.me כדי לבדוק אותה באמצעות iframe מוכן עם תיוג מודעות. תוכלו להשתמש בכלי הפיתוח ל-Chrome כדי לאמת שהתוכן תויג כמודעה. בחלונית רינדור (שניתן לגשת אליה דרך תפריט שלוש הנקודות ⋮ ואז כלים נוספים > עיבוד), בוחרים באפשרות הדגשת מסגרות של מודעות. אם בודקים תוכן בחלון ברמה העליונה או בהקשר אחר שבו התוכן לא מתויג כמודעה, ההתערבות לא תופעל אבל עדיין תוכלו לבדוק באופן ידני את ערכי הסף.
סטטוס המודעה של מסגרת מוצג גם בחלונית Elements, שבה מוסיפים הערה ad אחרי תג <iframe> הפותח. אפשר לראות את זה גם
בחלונית Applicationשמתחת לקטע מסגרות, שבה מסגרות עם תיוג מודעה
כוללות את המאפיין 'סטטוס מודעה'.
שימוש ברשת
פותחים את החלונית Network בכלי הפיתוח ל-Chrome כדי לראות את הפעילות הכוללת ברשת של המודעה. כדי לקבל תוצאות עקביות בטעינות חוזרות, כדאי לוודא שהאפשרות DisableCache (השבתת המטמון) מסומנת.
הערך שהועבר בחלק התחתון של הדף יראה את הסכום שהועבר על הדף כולו. כדאי להשתמש בקלט המסנן בחלק העליון של הדף כדי להגביל את הבקשות רק לבקשות שקשורות למודעה.
אם תמצאו את הבקשה הראשונית להצגת המודעה, למשל מקור ה-iframe, תוכלו גם להשתמש בכרטיסייה Initiator מתוך הבקשה כדי לראות את כל הבקשות שהיא מפעילה.
כדי לאתר משאבים גדולים מדי, כדאי למיין את הרשימה הכוללת של הבקשות לפי גודל. סיבות נפוצות הן תמונות וסרטונים שלא עברו אופטימיזציה.
בנוסף, מיון לפי שם יכול להיות דרך טובה לזהות בקשות חוזרות. זה לא יכול להיות משאב גדול אחד שגורם להתערבות, אלא מספר גדול של בקשות חוזרות שחורגות מההגבלה באופן הדרגתי.
שימוש ביחידות עיבוד מרכזיות (CPU)
החלונית ביצועים בכלי הפיתוח תעזור לאבחן בעיות בשימוש במעבד (CPU). השלב הראשון הוא לפתוח את תפריט Capture Settings של ההגדרות. בעזרת התפריט הנפתח מעבדים (CPU) אפשר להאט ככל האפשר את המעבד (CPU). בדרך כלל, ההתערבות של המעבד (CPU) תופעל במכשירים בעלי הספק נמוך יותר מאשר במכונות פיתוח מתקדמות.
לאחר מכן, לחץ על הלחצן הקלט כדי להתחיל את פעילות ההקלטה. כדאי לנסות לבדוק מתי ולכמה זמן מקליטים, כי טעינת מעקב ארוך יכולה להימשך זמן מה. לאחר טעינת ההקלטה, תוכלו להשתמש בציר הזמן העליון כדי לבחור חלק מההקלטה. התמקדו באזורים שבתרשים בצבע צהוב, סגול או ירוק, שמייצגים את כתיבת הסקריפטים, את העיבוד והציור.
בודקים את הכרטיסיות Bottom-Up, Call Tree ו-Event Log בתחתית. מיון העמודות האלה לפי Self Time ו-Total Time יכול לעזור בזיהוי צווארי בקבוק בקוד.
קובץ המקור המשויך אליו מקושר גם לשם, כך שאפשר לעבור אליו דרך החלונית Sources כדי לבדוק את העלות של כל שורה.
הבעיות הנפוצות שכאן הן אנימציות שעברו אופטימיזציה לקוי, אשר מפעילות פריסה רציפה וצבע או פעולות יקרות שמוסתרות בספרייה שנכללת.
איך לדווח על התערבויות שגויות
Chrome מתייג תוכן כמודעה על ידי התאמת בקשות משאבים לרשימת סינון. אם תויגו תוכן שאינו מודעות, כדאי לשנות את הקוד כדי למנוע התאמה לכללי הסינון. אם אתם חושדים שההתערבות בוצעה בטעות, תוכלו להעלות בעיה באמצעות התבנית הזו. ודאו שתיעדתם דוגמה של דוח ההתערבות, ושיש לכם כתובת URL לדוגמה לשחזור הבעיה.