מודעות שצורכות כמות לא פרופורציונלית של משאבים במכשיר משפיעות לרעה על חוויית המשתמש – החל מההשפעות הברורות של פגיעה בביצועים ועד לתוצאות פחות גלויות, כמו שחיקה של הסוללה או ניצול של מכסות רוחב הפס. המודעות האלה נעות בין מודעות זדוניות באופן פעיל, כמו מודעות לכריית מטבעות וירטואליים, לבין תוכן אמיתי עם באגים לא מכוונים או בעיות בביצועים.
ב-Chrome מוגדרות מגבלות על המשאבים שבהם מודעה יכולה להשתמש, והמודעה פורקת אם היא חורגת מהמגבלות. פרטים נוספים זמינים בהודעה בבלוג של Chromium. המנגנון שמשמש לפריקה של מודעות הוא התערבות במודעות כבדות.
הקריטריונים למודעות כבדות
מודעה נחשבת כבדה אם המשתמש לא קיים איתה אינטראקציה (למשל, לא הקיש עליה או לא לחץ עליה) והיא עומדת באחד מהקריטריונים הבאים:
- נעשה שימוש בשרשור הראשי למשך יותר מ-60 שניות בסך הכול
- השימוש בשרשור הראשי נמשך יותר מ-15 שניות בכל חלון של 30 שניות
- שימוש ברוחב פס של יותר מ-4 מגה-בייט ברשת
כל המשאבים שבהם משתמשים כל רכיבי ה-iframe הצאצאים של מסגרת המודעה נספרים במסגרת המגבלות על התערבות במודעה הזו. חשוב לציין שהמגבלות הזמן של הליבה הראשית לא זהות לזמן שחלף מאז טעינת המודעה. המגבלות חלות על משך הזמן שלוקח ל-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 כדי לוודא שהתוכן מתויג כמודעה. בחלונית Rendering (שנפתחת באמצעות התפריט של שלוש הנקודות ⋮ ואז More Tools > Rendering), בוחרים באפשרות Highlight Ad Frames. אם בודקים תוכן בחלון ברמה העליונה או בהקשר אחר שבו הוא לא מתויג כמודעה, ההתערבות לא תופעל, אבל עדיין תוכלו לבדוק באופן ידני אם הוא עומד בערכי הסף.
סטטוס המודעות של הפריים מוצג גם בחלונית Elements, שבה הוספה הערה מסוג ad אחרי התג הפותח <iframe>. המידע הזה מופיע גם בחלונית Application בקטע Frames, שבו מסגרות עם תגים של מודעות יכללו את המאפיין Ad Status.
שימוש ברשת
פותחים את החלונית Network (רשת) בכלי הפיתוח ל-Chrome כדי לראות את הפעילות הכוללת של המודעה ברשת. כדי לקבל תוצאות עקביות בעומס חוזר, חשוב לוודא שהאפשרות Disable cache מסומנת.
הערך שהוענק בתחתית הדף יציג את הסכום שהוענק לכל הדף. כדאי להשתמש באפשרות ההזנה סינון בחלק העליון כדי להגביל את הבקשות רק לאלה שקשורות למודעה.
אם מצאתם את הבקשה הראשונית להצגת המודעה, למשל המקור של ה-iframe, תוכלו גם להשתמש בכרטיסייה Initiator בתוך הבקשה כדי לראות את כל הבקשות שהיא מפעילה.
מיון רשימת הבקשות הכוללת לפי גודל הוא דרך טובה לזהות משאבים גדולים מדי. בין הגורמים הנפוצים לכך אפשר למצוא תמונות וסרטונים שלא בוצעה להם אופטימיזציה.
בנוסף, מיון לפי שם יכול להיות דרך טובה לזהות בקשות חוזרות. יכול להיות שגורם ההפעלה לא יהיה משאב גדול אחד, אלא מספר גדול של בקשות חוזרות שמחריגות את המגבלה באופן מצטבר.
שימוש ביחידות עיבוד מרכזיות (CPU)
החלונית ביצועים ב-DevTools תעזור לכם לאבחן בעיות בשימוש במעבד. השלב הראשון הוא לפתוח את תפריט הגדרות הצילום. משתמשים בתפריט הנפתח CPU כדי להאט את המעבד ככל האפשר. סביר יותר שהפעולות של התערבות ב-CPU יופעלו במכשירים עם עוצמה נמוכה יותר מאשר במכונות פיתוח מתקדמות.
לאחר מכן, לוחצים על הלחצן הקלטה כדי להתחיל להקליט את הפעילות. מומלץ להתנסות במועדים ובמשך הזמן של ההקלטה, כי טראקים ארוכים עשויים להימשך זמן רב לטעינתם. אחרי שההקלטה נטענת, אפשר להשתמש בציר הזמן העליון כדי לבחור קטע מההקלטה. מתמקדים באזורים בתרשים בצבע צהוב, סגול או ירוק מוצק שמייצגים סקריפט, רינדור וצבע.
בתחתית המסך מופיעות הכרטיסיות מלמטה למעלה, עץ קריאות ויומן אירועים. מיון העמודות האלה לפי Self Time ו-Total Time יכול לעזור לזהות צווארי בקבוק בקוד.
קובץ המקור המשויך מקושר גם שם, כך שאפשר ללחוץ עליו כדי לעבור לחלונית מקורות ולבדוק את העלות של כל שורה.
בעיות נפוצות שאפשר לזהות כאן הן אנימציות שלא בוצעה להן אופטימיזציה שמפעילות פריסה וצבע רציפה, או פעולות יקרות שמוסתרות בספרייה כלולה.
איך מדווחים על התערבויות שגויות
Chrome מסמן תוכן כמודעה על ידי התאמת בקשות למשאבים לרשימת מסננים. אם תוכן שאינו מודעה תויג, מומלץ לשנות את הקוד הזה כדי למנוע התאמה לכללי הסינון. אם לדעתכם התערבות מסוימת הופעלה בטעות, תוכלו לדווח על הבעיה באמצעות התבנית הזו. חשוב לוודא שצירפת דוגמה לדוח ההתערבות וגם כתובת URL לדוגמה כדי שנוכל לשחזר את הבעיה.