שינוי פריסה מתרחש כשרכיב גלוי בדף משנה את המיקום או הגודל שלו, ומשפיע על מיקום התוכן סביבו. לפעמים השינוי מכוון, למשל, כשקונטיינר מתרחב כתוצאה מפעולה של משתמש. עם זאת, האופי הדינמי של המודעות עלול לגרום לשינויים לא צפויים בפריסה, שמשפיעים לרעה על חוויית המשתמש ועלולים לגרום לבעיות חמורות בנוחות השימוש.
במדריך הזה מוסבר איך למדוד ולצמצם את שינוי הפריסה כשעובדים עם Google Publisher Tag (GPT).
איך מודעות גורמות לשינוי פריסה
בדרך כלל הבקשות להצגת מודעות מתבצעות באופן אסינכרוני ודינמי כדי להוסיף תוכן לדף במהלך טעינת הדף או אחריה. במהלך אחזור המודעות, שאר חלקי הדף ממשיכים להיטען, ותוכן שאינו מודעות עשוי להיות גלוי למשתמש. אם לא תשאירו מספיק מקום לטעינת המודעות, יכול להיות שבסופו של דבר הם יתווספו לדף אם תוכן אחר שלא מופיע במודעות יחלוף.
כשאתם עובדים עם Google Publisher Tags, יש כמה נקודות במחזור החיים של המודעות שבהן יכול להתרחש שינוי בפריסה:
- כאשר מתבצעת קריאה ל-
display(). יחידת קיבולת (Slot) יכולה להתרחב או להתכווץ בהתאם לאופן שבו היא הוגדרה. - מתי תוכן המודעה עובר עיבוד. ניתן לשנות את גודל המשבצת אם מוצגת מודעה שוטפת או אם אין מספיק מקום פנוי. יחידת קיבולת (Slot) יכולה גם להתרחב או להתכווץ בשלב הזה, בהתאם לאופן שבו היא הוגדרה.
- אחרי שהתוכן של המודעה יעובד. סוגים מסוימים של קריאייטיבים מיועדים להתרחב לאחר שהם מופיעים בדף.
חשוב לזכור שככל שמיקום מודעה גבוה יותר באזור התצוגה, כך יש לו יותר פוטנציאל למיקום מודעות. הקפידו להיזהר במיוחד עם חריצים ליד החלק העליון של אזור התצוגה הראשוני (בחלק העליון והקבוע). מיקומי המודעות האלה יכולים לגרום לכמות לא פרופורציונלית של שינויי פריסה, כי יש סיכוי גבוה יותר שהם יופיעו בזמן הטעינה של תוכן המודעה.
מודד שינוי פריסה
Cumulative Layout Shift (CLS) הוא מדד מדדי ליבה לבדיקת חוויית המשתמש באתר שאפשר להשתמש בו כדי לכמת את ההשפעה של שינויי הפריסה באתר, גם בשיעור ה-Lab וגם בשטח.
במעבדה
בכלי מעבדה נמדדים ה-CLS באופן סינתטי. הם לא מסתמכים על אינטראקציה אמיתית מצד המשתמש, ולכן הם מתאימים לשימוש בשילוב מתמשך ובתהליכי פיתוח מקומיים. עם זאת, הכלים האלה בדרך כלל מודדים ביצועים רק במהלך טעינת הדף, והם מוגבלים בתנאים שהם יכולים לדמות, כך שהערכים המדווחים עשויים להיות נמוכים יותר ממה שהמשתמש יחווה בפועל.
Publisher Ads Audits for Lighthouse הוא כלי שאפשר להשתמש בו כדי למדוד CLS שמשויך באופן ספציפי למודעות GPT. לפרטים נוספים, קראו את מסמכי הביקורת על צמצום שינוי הפריסה שקשור למודעות.
אפשר גם להגדיר את כלי הפיתוח ל-Chrome להדגיש שינויים בפריסה בזמן הניווט באתר. ניתן להשתמש במידע הזה כדי לזהות באופן ידני שינויי פריסה שמתרחשים בקרבת מיקומי מודעות בדף שלך.
בשדה
כלי שדה מודדים CLS שמשתמשים אמיתיים חווים אינטראקציה עם האתר שלכם. התהליך הזה נקרא בדרך כלל מעקב אמיתי על ידי המשתמשים (RUM). RUM מאפשר לראות איך ה-CLS מושפע מגורמים בעולם האמיתי – כמו יכולות המכשיר, תנאי הרשת, אינטראקציה של המשתמש והתאמה אישית של דפים – שלרוב קשה או בלתי אפשרי לדמות בבדיקות סינתטיות.
מזעור של שינוי פריסה
הדרך הבטוחה היחידה למנוע שינוי פריסה היא לשריין כמות מספיקה של שטח
למיקום מודעה נתון באמצעות CSS. הדרך היעילה ביותר לעשות זאת היא להגדיר גובה ורוחב קבועים ישירות במיקום המודעה div. עם זאת, השיטה הזו מתאימה למיקומי מודעות סטטיים בגודל קבוע, אבל תרחישים מורכבים יותר עשויים לחייב גישה פרטנית יותר. בקטעים הבאים מוסבר חלק מהתרחישים הנפוצים.
מיקומי מודעות בגדלים מרובים
למיקומי מודעות שמקבלים כמה גדלים, אנחנו ממליצים על אחת מהגישות הבאות:
- מומלץ לשמור מקום לגודל הגדול ביותר שהוגדר להצגת מודעות.
- שיריוּן שטחי פרסום בגודל הקטן ביותר שהוגדר להצגה.
- שיריוּן שטחי פרסום עבור הגודל בעל הסיכוי הגבוה ביותר להציג מודעות, על סמך בחינה של נתוני מילוי היסטוריים מהדיווח של Google Ad Manager.
בחירת הגישה הנכונה
הדרך היעילה ביותר למנוע שינויים בפריסה היא שמירת מקום לגודל הגדול ביותר שהוגדר לשרת. עם זאת, השיטה הזו עלולה ליצור שטח ריק נוסף סביב המודעה, במקרה שבו יוצג קריאייטיב שקטן מהגודל השמור. כיווץ של מיקום המודעה כדי להתאים לגודל של הקריאייטיב המוצג יגרום לשינוי נוסף בפריסה, ולכן מומלץ להימנע מכך. במקום זאת, אפשר להשתמש במרכוז אנכי ואופקי כדי לצמצם את ההשפעה החזותית של עודף שטח ריק.
מצד שני, שמירת מקום לגודל הקטן ביותר שהוגדר להצגה כדי למנוע שטח ריק מיותר סביב המודעה שלכם. זו אפשרות טובה אם מיקום המודעה בדף מכיל בדרך כלל קריאייטיבים קטנים יותר, או במקרים שבהם כל הגדלים שמיקום המודעה תומך בהם דומים. עם זאת, השיטה הזו גורמת לשינוי פריסה במקרה שבו מוצג קריאייטיב שגדול מהגודל השמור (אף על פי שמשמרות כאלה בדרך כלל קטנות יותר בהשוואה לחוסר שמירת מקום בכלל).
כדי לשמור על איזון בין שטח ריק לשינויי פריסה, תוכלו לשריין שטח "ממוצע" למיקומי המודעות שלכם. לדוגמה, שמירת 100px
יוצרת באופן אנכי מעט שטח ריק כשמוצג קריאייטיב מסוג 320x50, אבל
מפחיתה את ציון ה-CLS בהשוואה לשימור מקום כלל. יהיה עליך לנסות גדלים שונים כדי למצוא את האיזון הטוב ביותר עבור האתר שלך.
כשאתם קובעים כמה מקום להקצות למשבצת מסוימת, בחינת נתוני המילוי ההיסטוריים מהדיווח של Google Ad Manager תעזור לכם לקבל החלטה מושכלת יותר. ניתן להדגים זאת בצורה הטובה ביותר באמצעות כמה דוגמאות.
דוגמה ראשונה
| גודל הקריאייטיב (נמסר) | חשיפות שרת מודעות (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
במקרה כזה, שמירה אנכית של 250px יכולה לצמצם מאוד את ה-CLS, כי רוב נכסי הקריאייטיב שמוצגים הם 300x250.
דוגמה שנייה
| גודל הקריאייטיב (נמסר) | חשיפות שרת מודעות (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
במקרה הזה, רוב המודעות הן בגובה של 90px לכל היותר, כך ששמירה של 90px
באופן אנכי אמורה למנוע שינוי בפריסה ברוב הזמן.
איך לשריין מקום
מומלץ לפתור את הבעיה הזו על ידי ציון הגודל של מיקום המודעה באמצעות מאפייני CSS של min-height ו-min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
השימוש במאפיינים של גובה מינימלי ורוחב מינימלי מאפשר לשריין כמות מינימלית של שטח למיקום המודעה, ועדיין מאפשר לדפדפן להגדיל את הקונטיינר לפי הצורך. כך ניתן להבטיח שהתוכן לא ייחתך באירוע שבו מוצג קריאייטיב גדול יותר.
אפשר לשלב את השיטה הזו עם שאילתות מדיה של CSS כדי לציין ערכי מינימום שונים לגדלים שונים של מסכים:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
כדאי להימנע משמירת מקום באמצעות JavaScript, כי פעולה כזו עלולה לגרום לשינוי בפריסה בזמן שהסקריפט נטען. כדי למנוע את הסיכון, מומלץ לשריין מקום ב-CSS.
מיקומי מודעות גמישים
מיקומי מודעות גמישים אינם מציינים קבוצת גדלים קבועה שבה הם תומכים. במקום זאת, המיקומים האלה משנים את גודלם באופן אוטומטי כך שיתאימו לתוכן הקריאייטיב שמוצג להם, וכך לתמוך בקריאייטיבים בגודל לא מוגדר. כתוצאה מכך, לא ניתן לשריין מקום למיקומי המודעות האלה לפני הבקשה לתוכן מודעה, ומודעות בגודל גמיש תמיד גורמות לשינויי פריסה.
כדי לצמצם את ההשפעות של שינויי פריסה כשעובדים עם מיקומי מודעות גמישים, מומלץ לבצע את הפעולות הבאות:
- יש להשתמש בגודל
fluidרק עבור חריצים בחלק הנגלל. - כדאי להביא משבצות נוזלות מוקדם ככל האפשר, כדי למזער את הסיכוי שמשתמש יגלול אותן לתצוגה לפני שמשנים את הגודל של יחידת הקיבולת (Slot).
כיווץ והרחבה של מיקומי מודעות
השיטה collapseEmptyDivs() מאפשרת לכווץ את רכיבי div של מיקום מודעה כך שהם לא יתפסו מקום בדף כשאין תוכן מודעה להצגה. עם זאת, יש להשתמש בתכונה הזו בזהירות כי היא עלולה לגרום לשינויים לא מכוונים בפריסה. כפי שצוין בקטע הקודם, כיווץ או הרחבה של מיקומי מודעות בדף יכולים לגרום לשינויים בפריסה בשתי נקודות שונות במחזור החיים של המודעה.
אם אתם צריכים להשתמש בתכונה הזו, תוכלו לצמצם את ההשפעה של שינויי פריסה באמצעות נתוני מילוי היסטוריים מהדיווח של Ad Manager, כדי ליישם את השיטות המומלצות הבאות:
- יחידות קיבולת (Slot) שיש סיכוי גבוה שיתמלאו, צריכות תמיד להתחיל מורחבות.
- משבצות זמן שלא ימלאו תמיד צריכות להתחיל מכווץ.
דוגמה להטמעה זמינה בקטע כיווץ של מיקומי מודעות ריקים.