איך לטפל בבעיות של מודעות כבדות

Rowan Merewood

מודעות שצורכות כמות לא פרופורציונלית של משאבים במכשיר פוגעות בחוויית המשתמש. ההשפעות הברורות הן ירידה בביצועים, אבל יש גם השפעות פחות ברורות כמו ניצול הסוללה או ניצול חבילת הגלישה. המודעות האלה כוללות מודעות זדוניות באופן פעיל, כמו כריית מטבעות קריפטוגרפיים, ועד תוכן אמיתי עם באגים לא מכוונים או בעיות בביצועים.

מערכת Chrome מגדירה מגבלות על המשאבים שמודעה יכולה להשתמש בהם, ומבטלת את הטעינה של המודעה אם המגבלות נחצות. אפשר לקרוא פרטים נוספים בההודעה בבלוג של Chromium. המנגנון שמשמש להסרת מודעות הוא התערבות במודעות כבדות.

קריטריונים של מודעות כבדות

מודעה נחשבת כבדה אם המשתמש לא ביצע איתה אינטראקציה (לדוגמה, לא הקשה עליה או לחץ עליה) והיא עומדת באחד מהקריטריונים הבאים:

• האפליקציה משתמשת בתהליכון הראשי למשך יותר מ-60 שניות בסך הכול
• השימוש בתהליכון הראשי נמשך יותר מ-15 שניות בכל חלון של 30 שניות
• השימוש ברוחב הפס של הרשת גדול מ-4 מגה-בייט

כל המשאבים שבהם נעשה שימוש בכל מסגרות ה-iframe של צאצאים של מסגרת המודעה נספרים במסגרת המגבלות של התערבות במודעה הזו. חשוב לציין שמגבלות הזמן של ה-thread הראשי לא זהות לזמן שחלף מאז טעינת המודעה. המגבלות מתייחסות למשך הזמן שלוקח ליחידת העיבוד המרכזית (CPU) להריץ את קוד המודעה.

בדיקת ההתערבות

ההתערבות הזו הושקה ב-Chrome 85, אבל כברירת מחדל מתווספים לרף רעש ושינויים מסוימים כדי להגן על פרטיות המשתמשים.

אם מגדירים את chrome://flags/#heavy-ad-privacy-mitigations לערך מושבת, ההגנות האלה מוסרות, כלומר ההגבלות חלות באופן דטרמיניסטי, אך ורק בהתאם למגבלות. כך יהיה קל יותר לבצע ניפוי באגים ובדיקות.

כשההתערבות מופעלת, התוכן ב-iframe של מודעה כבדה מוחלף בהודעה המודעה הוסרה. אם לוחצים על הקישור פרטים שמופיע בהודעה, מוצג ההסבר הבא: המודעה הזו צורכת מהמכשיר שלך משאבים רבים מדי, ולכן היא הוסרה על-ידי Chrome.

אפשר לראות את ההתערבות שבוצעה בתוכן לדוגמה בכתובת heavy-ads.glitch.me. אפשר גם להשתמש באתר הבדיקה הזה כדי לטעון כתובת URL שרירותית כדרך מהירה לבדיקת התוכן שלכם.

חשוב לדעת שבמהלך הבדיקה, יכולות להיות כמה סיבות לכך שההתערבות לא תופעל.

• טעינה מחדש של אותה מודעה באותו דף תגרום לכך שהשילוב הזה לא ייכלל בהתערבות. במקרה כזה, מומלץ למחוק את היסטוריית הגלישה ולפתוח את הדף בכרטיסייה חדשה.
• חשוב לוודא שהדף נשאר במרכז – אם מעבירים את הדף לרקע (עוברים לחלון אחר), תורי המשימות של הדף יושהו, ולכן לא יופעל הטיפול של המעבד.
• במהלך הבדיקה, אל תקישו על תוכן המודעה או תלחצו עליו – ההתערבות לא תחול על תוכן שמתקבלת לגביו אינטראקציה כלשהי של המשתמש.

מה צריך לעשות?

אתם מציגים באתר מודעות מספק צד שלישי

לא נדרשת פעולה, רק חשוב לדעת שמשתמשים באתר שלכם עשויים לראות מודעות שחורגות מהמגבלות שהוסרו.

אתם מציגים מודעות מהדומיין הנוכחי באתר שלכם או מספקים מודעות להצגה ברשת המדיה של צד שלישי

כדאי להמשיך לקרוא כדי לוודא שאתם מטמיעים את המעקב הנדרש באמצעות Reporting API לצורך התערבויות במודעות כבדות.

אתם יוצרים תוכן מודעות או מנהלים כלי ליצירת תוכן מודעות

בהמשך המאמר מוסבר איך לבדוק את הביצועים של התוכן ואת השימוש במשאבים. כדאי גם לעיין בהנחיות של פלטפורמות הפרסום שבחרתם, כי יכול להיות שהן יספקו עצות טכניות נוספות או הגבלות. לדוגמה, אפשר לעיין בהנחיות של Google לגבי קריאייטיב לרשת המדיה. מומלץ להגדיר ספים ישירות בכלי העריכה כדי למנוע ממודעות עם ביצועים נמוכים להופיע באפליקציות.

מה קורה כשמסירים מודעה?

התערבות ב-Chrome מדווחת באמצעות Reporting API (ממשק ה-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"
 }
}]

ממשק ה-API של JavaScript מספק את ReportingObserver עם method‏ observe() שאפשר להשתמש בה כדי להפעיל קריאה חוזרת שסופקה בהתערבויות. האפשרות הזו שימושית אם רוצים לצרף מידע נוסף לדוח כדי לסייע בניפוי הבאגים.

// 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 כדי לוודא שהתוכן תויג כמודעה. בחלונית Rendering (אפשר לגשת אליה דרך תפריט שלוש הנקודות ⋮ ואז More Tools > Rendering), בוחרים באפשרות Highlight Ad Frames. אם בודקים תוכן בחלון ברמה העליונה או בהקשר אחר שבו התוכן לא מתויג כמודעה, לא תופעל ההתערבות, אבל עדיין אפשר לבדוק ידנית אם התוכן עומד בסף.

סטטוס המודעה של מסגרת מוצג גם בחלונית Elements, שבה מתווספת הערה ad אחרי התג הפותח <iframe>. אפשר לראות את זה גם בחלונית Application בקטע Frames, שבו פריים עם תג מודעה יכלול את המאפיין Ad Status.

השימוש ברשת

פותחים את החלונית Network בכלי הפיתוח ל-Chrome כדי לראות את הפעילות הכוללת ברשת של המודעה. כדי לקבל תוצאות עקביות בכל טעינה, חשוב לוודא שהאפשרות השבתת מטמון מסומנת.

בתחתית הדף יופיע הערך שהועבר, שמשקף את הסכום שהועבר עבור הדף כולו. כדאי להשתמש בשדה הקלט Filter בחלק העליון כדי להגביל את הבקשות רק לאלה שקשורות למודעה.

אם מוצאים את הבקשה הראשונית למודעה, למשל המקור של ה-iframe, אפשר גם להשתמש בכרטיסייה Initiator בתוך הבקשה כדי לראות את כל הבקשות שהיא מפעילה.

מיון הרשימה הכוללת של הבקשות לפי גודל הוא דרך טובה לזהות משאבים גדולים מדי. הגורמים הנפוצים לבעיה הם תמונות וסרטונים שלא עברו אופטימיזציה.

בנוסף, מיון לפי שם יכול לעזור לזהות בקשות חוזרות. יכול להיות שלא מדובר במשאב גדול יחיד שגורם להתערבות, אלא במספר גדול של בקשות חוזרות שחורגות מהמגבלה באופן מצטבר.

שימוש ביחידות עיבוד מרכזיות (CPU)

החלונית Performance בכלי הפיתוח תעזור לכם לאבחן בעיות בשימוש במעבד. השלב הראשון הוא לפתוח את תפריט הגדרות הצילום. משתמשים בתפריט הנפתח CPU כדי להאט את המעבד ככל האפשר. ההתערבויות שקשורות ל-CPU צפויות יותר לפעול במכשירים עם הספק נמוך מאשר במכונות פיתוח מתקדמות.

לאחר מכן, לוחצים על הלחצן הקלטה כדי להתחיל בהקלטת הפעילות. כדאי להתנסות בהקלטה בזמנים שונים ולמשך פרקי זמן שונים, כי טעינה של נתוני מעקב ארוכים יכולה להימשך זמן רב. אחרי שההקלטה נטענת, אפשר להשתמש בציר הזמן העליון כדי לבחור חלק מההקלטה. מתמקדים באזורים בגרף בצבע צהוב, סגול או ירוק מלא שמייצגים סקריפטים, עיבוד וציור.

בודקים את הכרטיסיות Bottom-Up,‏ Call Tree ו-Event Log בחלק התחתון. מיון העמודות האלה לפי Self Time (זמן עצמי) ו-Total Time (זמן כולל) יכול לעזור לזהות צווארי בקבוק בקוד.

בנוסף, מקושר שם קובץ המקור הרלוונטי, כך שאפשר לעבור לחלונית Sources כדי לבדוק את העלות של כל שורה.

בעיות נפוצות שכדאי לחפש כאן הן: אנימציות שלא עברו אופטימיזציה שמפעילות פריסה וציור רציפים או פעולות יקרות שמוסתרות בספרייה כלולה.

איך מדווחים על התערבויות שגויות

‫Chrome מתייג תוכן כמודעה על ידי השוואת בקשות למשאבים לרשימת סינון. אם תוכן שאינו מודעה תויג, כדאי לשנות את הקוד כדי למנוע התאמה לכללי הסינון. אם אתם חושדים שהתערבות מסוימת הוחלה באופן שגוי, אתם יכולים לדווח על בעיה באמצעות התבנית הזו. חשוב לוודא שצילמת דוגמה לדוח ההתערבות ושיש לך כתובת URL לדוגמה כדי לשחזר את הבעיה.