מודעות שצורכות כמות לא פרופורציונלית של משאבים במכשיר משפיעות לרעה על חוויית המשתמש – החל מההשפעות הברורות של פגיעה בביצועים ועד לתוצאות פחות גלויות, כמו שחיקה של הסוללה או ניצול של מכסות רוחב הפס. המודעות האלה נעות בין מודעות זדוניות באופן פעיל, כמו מודעות לכריית מטבעות וירטואליים, לבין תוכן אמיתי עם באגים לא מכוונים או בעיות בביצועים.
ב-Chrome מוגדרות מגבלות על המשאבים שבהם מודעה יכולה להשתמש, והמודעה פורקת אם היא חורגת מהמגבלות. פרטים נוספים זמינים בהודעה בבלוג של Chromium. המנגנון שמשמש לפריקה של מודעות הוא התערבות במודעות כבדות.
קריטריונים כבדים של מודעות
מודעה נחשבת כבדה אם המשתמש לא קיים איתה אינטראקציה (למשל, לא הקיש עליה או לא לחץ עליה) והיא עומדת באחד מהקריטריונים הבאים:
- נעשה שימוש ב-thread הראשי במשך יותר מ-60 שניות בסך הכול
- השימוש בשרשור הראשי נמשך יותר מ-15 שניות בכל חלון של 30 שניות
- שימוש ברוחב פס של יותר מ-4 מגה-בייט ברשת
כל המשאבים שבהם משתמשים כל רכיבי ה-iframe הצאצאים של מסגרת המודעה נספרים במסגרת המגבלות על התערבות במודעה הזו. חשוב לציין שמגבלות הזמן של ה-thread הראשי לא זהות לזמן שחלף מאז טעינת המודעה. המגבלות חלות על משך הזמן שלוקח ל-CPU להריץ את הקוד של המודעה.
בדיקת ההתערבות
ההתערבות נשלחה ב-Chrome 85, אבל כברירת מחדל מתווסף רעש ושונות כדי להגן על פרטיות המשתמשים.
הגדרת chrome://flags/#heavy-ad-privacy-mitigations ל-Disabled מסירה את ההגנות האלה, כלומר ההגבלות חלות באופן דטרמיניסטי, בהתאם למגבלות בלבד. כך יהיה קל יותר לנפות באגים ולבצע בדיקות.
כשהפעולה תופעל, התוכן ב-iframe של מודעה גדולה יוחלף בהודעה המודעה הוסרה. אם תלחצו על הקישור פרטים, תוצג הודעה עם ההסבר הבא: המודעה הזו צורכת מהמכשיר שלך משאבים רבים מדי, ולכן היא הוסרה על ידי Chrome.
אפשר לראות את ההתערבות שמופעלת על תוכן לדוגמה בכתובת heavy-ads.glitch.me. אפשר גם להשתמש באתר הבדיקה הזה כדי לטעון כתובת URL שרירותית, כדרך מהירה לבדוק את התוכן שלכם.
חשוב לזכור בזמן הבדיקה שיש כמה סיבות שעשויות למנוע את החלת ההתערבות.
- טעינת מחדש של אותה מודעה באותו דף תבטל את ההתערבות באותה שילוב. אפשר לנקות את היסטוריית הגלישה ולפתוח את הדף בתג חדש.
- חשוב לוודא שהדף נשאר במוקד – העברת הדף לרקע (מעבר לחלון אחר) תשהה את תורי המשימות של הדף, ולכן לא תפעיל את ההתערבות של המעבד.
- חשוב להקפיד לא להקיש או ללחוץ על תוכן המודעה בזמן הבדיקה – ההתערבות לא תחול על תוכן שיש בו אינטראקציה של המשתמש.
מה צריך לעשות?
אתם מציגים באתר מודעות של ספק צד שלישי
אין צורך לבצע פעולה כלשהי, אבל חשוב לדעת שהמשתמשים עשויים לראות מודעות שמחריגות מהמגבלות שהוסרו באתר שלך.
אתם מציגים מודעות מהדומיין הנוכחי באתר שלכם או מספקים מודעות לרשת המדיה של צד שלישי
כדאי להמשיך לקרוא כדי לוודא שאתם מטמיעים את המעקב הנדרש באמצעות Reporting API כדי לבצע התערבויות בנושא מודעות כבדות.
אתם יוצרים תוכן של מודעות או מנהלים כלי ליצירת תוכן של מודעות
כדאי להמשיך לקרוא כדי לדעת איך לבדוק את התוכן שלכם ולזהות בעיות בביצועים ובשימוש במשאבים. מומלץ גם לעיין בהנחיות של פלטפורמות הפרסום שבחרתם, כי יכול להיות שהן כוללות עצות טכניות או הגבלות נוספות. לדוגמה, ההנחיות של Google לקריאייטיב לרשת המדיה. כדאי ליצור ערכי סף ניתנים להגדרה ישירות בכלים ליצירת תוכן, כדי למנוע מצב שבו מודעות שהביצועים שלהן לא טובים יעלמו מטבע.
מה קורה כשמסירים מודעה?
התערבות ב-Chrome מדווחת באמצעות Reporting API, עם סוג דוח intervention. אתם יכולים להשתמש ב-Reporting API כדי לקבל התראות על התערבויות, באמצעות בקשה מסוג POST לנקודת קצה לדיווח או בתוך ה-JavaScript.
הדוחות האלה מופעלים ב-iframe ברמה הבסיסית (root) עם תיוג מודעה יחד עם כל הצאצאים שלו, כלומר כל פריים שנטענו במסגרת ההתערבות. המשמעות היא שאם מודעה מגיעה ממקור של צד שלישי, כלומר מ-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 את השיטה 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 דומה לזה שנשלח בבקשת ה-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 בקטע Frames, שבו מסגרות עם תגים של מודעות יכללו את המאפיין Ad Status.
שימוש ברשת
פותחים את החלונית Network (רשת) בכלי הפיתוח ל-Chrome כדי לראות את הפעילות הכוללת של המודעה ברשת. כדי לקבל תוצאות עקביות בעומס חוזר, חשוב לוודא שהאפשרות Disable cache מסומנת.
הערך שהוענק בתחתית הדף יציג את הסכום שהוענק לכל הדף. מומלץ להשתמש באפשרות ההזנה סינון בחלק העליון כדי להגביל את הבקשות רק לבקשות שקשורות למודעה.
אם מצאתם את הבקשה הראשונית להצגת המודעה, למשל המקור של ה-iframe, תוכלו גם להשתמש בכרטיסייה Initiator (גורם ההתחלה) בתוך הבקשה כדי לראות את כל הבקשות שהיא מפעילה.
מיון רשימת הבקשות הכוללת לפי גודל הוא דרך טובה לזהות משאבים גדולים מדי. בין הגורמים הנפוצים לכך אפשר למצוא תמונות וסרטונים שלא בוצעה להם אופטימיזציה.
בנוסף, מיון לפי שם יכול להיות דרך טובה לזהות בקשות חוזרות. יכול להיות שגורם ההפעלה של ההתערבות הוא לא משאב גדול אחד, אלא מספר גדול של בקשות חוזרות שמחריגות את המגבלה באופן מצטבר.
שימוש ביחידות עיבוד מרכזיות (CPU)
החלונית ביצועים ב-DevTools תעזור לכם לאבחן בעיות בשימוש במעבד. השלב הראשון הוא לפתוח את תפריט ההגדרות של הצילום. משתמשים בתפריט הנפתח CPU כדי להאט את המעבד ככל האפשר. יש סבירות גבוהה יותר שההתערבות במעבד (CPU) יופעלו במכשירים עם מתח נמוך יותר, מאשר במכונות פיתוח מתקדמות.
לאחר מכן, לוחצים על הלחצן הקלטה כדי להתחיל להקליט את הפעילות. מומלץ להתנסות במועדים ובמשך הזמן של ההקלטה, כי טראקים ארוכים עשויים להימשך זמן רב לטעינתם. אחרי שההקלטה נטענת, אפשר להשתמש בציר הזמן העליון כדי לבחור קטע מההקלטה. כדאי להתמקד באזורים בתרשים שצבועים בצהוב, סגול או ירוק מוצק, שמייצגים סקריפט, רינדור וצבע.
בתחתית המסך מופיעות הכרטיסיות מלמטה למעלה, עץ קריאות ויומן אירועים. מיון העמודות האלה לפי זמן עצמי ומשך הזמן הכולל יכול לעזור בזיהוי צווארי בקבוק בקוד.
גם קובץ המקור המשויך מקושר לשם, כך שאפשר לעבור לחלונית Sources ולבדוק את העלות של כל שורה.
בעיות נפוצות שאפשר לזהות כאן הן אנימציות שלא בוצעה להן אופטימיזציה שמפעילות פריסה וצבע רציפה, או פעולות יקרות שמוסתרות בספרייה כלולה.
איך מדווחים על התערבויות שגויות
Chrome מסמן תוכן כמודעה על ידי התאמת בקשות למשאבים לרשימת מסננים. אם תוכן שאינו מודעה תויג, מומלץ לשנות את הקוד הזה כדי למנוע התאמה לכללי הסינון. אם אתם חושדים שהפעלת התערבות הייתה שגויה, תוכלו לדווח על הבעיה באמצעות התבנית הזו. חשוב לוודא שצירפת דוגמה לדוח ההתערבות וגם כתובת URL לדוגמה כדי שנוכל לשחזר את הבעיה.