באתר שהושקה מחדש, שיעור הניראות של המודעות עלה ליותר מ-75%, שיעור העזיבה ירד ב-50% ומספר הצפיות בדפים עלה ב-27%.
כש-Google הכריזה על היוזמה של מדדי הליבה לבדיקת חוויית המשתמש באתר, בחברת ההוצאה לאור הגרמנית Netzwelt הבינו במהירות את הפוטנציאל של המדדים החדשים האלה לשיפור חוויית השימוש בדפים ולשיפור המונטיזציה מבוססת-המודעות. הם יצאו למסע להשקת האתר מחדש, תוך שימוש בשיטות מומלצות נפוצות לשיפור הביצועים, ובמקביל אופטימיזציה של תגי המודעות ומיקומי המודעות. ההתחייבות של האתר לחוויית משתמש מעולה ולדפים מהירים הוכיחה את עצמה כדרך לשיפור האינטראקציה עם המשתמשים וההכנסות מפרסום בו-זמנית. מספר הצפיות בדפים עלה ב-27%, ניראות המודעות עלתה ליותר מ-75% וההכנסות מפרסום עלו ב-18%.
27%
עלייה במספר הצפיות בדפים
18%
עלייה בהכנסות מפרסום
75%
ניראות המודעות
האתגר
כמו הרבה בעלי אתרי חדשות אחרים, ב-Netzwelt נאבקו למצוא את האיזון הנכון בין אופטימיזציה של חוויית המשתמש לבין מהירות הדף, תוך שמירה על הכנסות גבוהות מפרסום. האתגרים העיקריים שבהם נתקלו היו:
- Cumulative Layout Shift (CLS) גבוה בגלל שינויים בפריסת הדף שמתרחשים כתוצאה ממודעות, במיוחד ממיקומי מודעות בגדלים שונים ומבאנרים בחלק העליון של הדף.
- Largest Contentful Paint (LCP) מגיע באיחור כי המודעות הן רכיב התוכן הגדול ביותר, או בגלל שהן תופסות את רוחב הפס של הטעינה של תמונת ה-Hero.
- השהיה לאחר קלט ראשוני (FID) גבוהה שנגרמת על ידי JavaScript של צד שלישי שנחוץ לצורכי פרסום, בידינג ב-Header ועוד.
- תופעות לוואי על המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) שנובעות מתיבות דו-שיח בנושא הסכמה שנשלטות על ידי ספקים של צד שלישי, שגם הוסיפו לשינויים בפריסה ועשויות להתגלות כ-LCP מאוחרים.
אופטימיזציה של אתר חדשות בהתאם ל-Core Web Vitals
כשהצוות של Netzwelt התחיל לעבוד על המדדים הבסיסיים של חוויית המשתמש, הם גילו במהירות שהאופטימיזציה של המדדים האלה לא חייבת להשפיע לרעה על המודעות, אלא יכולה לשמש הזדמנות לשפר את החשיפה של המודעות. לכן, הצוות של Netzwelt ביצע אופטימיזציה של מדדי הליבה לבדיקת חוויית המשתמש באתר כדי להגדיל את רמת הניראות של המודעות ליותר מ-75%, וכך למשוך מודעות עם ערך גבוה יותר (הממוצע הגלובלי של מודעות לרשת המדיה נמוך מ-50%).
אופטימיזציה של CLS
לעיתים קרובות המודעות נטענות באיחור (לפעמים באופן מכוון באמצעות טעינת פריטים בזמן אמת), והגודל האמיתי שלהן לא ידוע מראש בגלל מיקומי מודעות בגדלים שונים וגמישים.
אפשר לחלק את הבעיה לשני חלקים – מודעות מעל החלק הנגלל ומתחתיו.
מודעות מעל למסך עלולות לגרום לקפיצות משמעותיות בפריסת הדף בגלל טעינת המודעות בשלב מאוחר יותר בגדלים לא ידועים. חסימה של השטח הגדול ביותר שהם עשויים להזדקק לו עלולה להוביל לחוויית משתמש גרועה, ואילו בקשה מהמפרסמים להשתמש בגדלים קבועים עלולה להפחית את ההכנסות מפרסום. ב-Netzwelt פתרו את הבעיה הזו על ידי הפיכת המודעה העליונה למודעה דביקה והסרה של חלק מהגדלים הגדולים יותר של מודעות באנר שמותר להציג. מודעת שכבת-העל מונעת הפעלה של קפיצות בפריסת המודעות בגדלים שונים. אמנם מספר הגדלים שעומדים בדרישות ירד, וזה משפיע על מכירות המודעות, אבל הניראות המשופרת מפצה על כך בקלות.
נתונים היסטוריים ובדיקות A/B עזרו ל-Netzwelt למצוא את המיקום והגודל הנכונים למכשירים ולמסכים בגדלים שונים, וכן כללי מדיה של CSS ששימשו להקצאת מקום.
מודעות מתחת לקו מציעות מקום לשיפור משמעותי:
- מודעת באנר שלא מוצגת אבל נטענת יוצרת ניראות נמוכה של המודעה ומפחיתה את חוויית השימוש בדף.
- באנר שנטען בזמן שהמשתמש גולל מעליו עלול לגרום לקפיצות נוספות בתוכן.
כדי לשמור על חוויית שימוש טובה בדף ועל ניראות גבוהה של המודעות, ב-Netzwelt הטמיעו טעינה איטית והקצתה מקום לגודל הנפוץ ביותר. באזור עם גדלים שונים, מודעות הבאנר שביקשת בגדלים 300x250 עד 300x600, מוקצבים לגובה 250 פיקסלים. כך המערכת מנעה שינויים בפריסה בגדלים הקטנים יותר, והפחיתה אותם באופן משמעותי בבאנר גדולים יותר. הגישה הזו לא אופטימלית, אבל היא התחלה ופשרה טובה.
כדי לבצע אופטימיזציה נוספת, ב-Netzwelt השתמשו ב-Intersection Observer וב-Network Information API כדי לשלוט במיקומי המודעות ולצמצם את השינויים בפריסת האתר. אנחנו משתמשים במיקומי מודעות שונים ובאסטרטגיות שונות של טעינת מודעות בזמן אמת, בהתאם למיקום הגלילה ולאיכות החיבור לרשת. בנוסף, יכול להיות שהמודעות ישתנו ממספר גדלים לגודל קבוע. מטרת האלגוריתם היא תמיד למקסם את הניראות של המודעות תוך צמצום השינויים בפריסה. בדפדפנים שלא תומכים ב-NetworkInfo API נעשה שימוש בערך שרת proxy שמבוסס על שילוב של סוג הרשת שמתקבל מהמכשיר ומכתובת ה-IP. אסטרטגיית הטעינה ההתאמה הזו מפחיתה את הערך של CLS במיוחד למשתמשים עם חיבורי אינטרנט איטיים.
אופטימיזציה של FID
זמן האחזור של הקלט הראשון עשוי להיראות כבעיה עבור בעלי תוכן חדשותי, כי לרוב המודעות מגיעות עם הרבה ספריות JavaScript נוספות. נראה שיש השפעה שלילית כשבודקים נתוני מעבדה כמו Lighthouse. עם זאת, לפי נתוני השדה שמופיעים בAlmanac האינטרנטי לשנת 2020, זמני התגובה של הרבה אתרים מהירים מספיק. חלק מהסיבה לכך היא שהקוד של JavaScript בפרסום נטען באיחור (אחרי הקלט הראשון), שהוא מאוחסן במטמון בצורה טובה (לדוגמה, הוא מקבל את הטיפול של אחסון קוד v8 במטמון) או שהוא עבר אופטימיזציה טובה על ידי ספקי המודעות. שירותי המעקב אחר יכולת הצפייה של ספקים נמנעים ממשימות ארוכות, כך שגם אם סכום זמן הריצה ארוך, זמן החסימה הכולל (TBT) ו-FID לא מושפעים. למרות ש-FID לא היה בעיה גדולה ב-Netzwelt, עדיין היו כמה פעולות אופטימיזציה שאפשר לבצע:
- צמצום מספר הספקים והסקריפטים של המודעות, תוך התמקדות בסטאק אחד אם אפשר.
- טעינה של כל הסקריפטים באמצעות defer או async.
- שימוש ב-Webpack או בטכנולוגיות דומות לצורך הסרת קוד מיותר (treeshaking) ופירוק חבילות (unbundling).
- שימוש בכללי CSS פשוטים בסגנון BEM.
- הימנעות ממשימות ממושכות ושימוש בתבנית idle-until-urgent.
- עבודה עם RequestAnimationFrame בכל מקום שבו הפריסה מושפעת.
אופטימיזציה של LCP
מודעות יכולות להשפיע על המדד Largest Contentful Paint בשתי דרכים: באופן מפורש, על ידי זיהוי מודעה כ-LCP, ובאופן עקיף, על ידי הצטברות עומסים ברוחב הפס של הרשת או השפעה על הנתיב הקריטי, כך שה-LCP בפועל (למשל, תמונה ראשית) לא יכול להיטען מהר מספיק.
ב-Netzwelt כבר הוסרו מודעות ריבועיות בינוניות מהמיקומים העליונים של המודעות במהלך האופטימיזציה לשיפור CLS. היתרון הנוסף של השינוי הזה הוא שהמודעות לא הופכות לרכיב הגדול ביותר.
ב-Netzwelt פועלים לפי מדיניות קפדנית שמעניקה עדיפות לתוכן מעל למודעות. ב-Netzwelt העניקו עדיפות לתמונות הכותרת ולגופנים שנעשה בהם שימוש בחלק העליון של הדף, וביצע אופטימיזציה של הנתיב הקריטי כדי לתת להם עדיפות על פני סקריפטים פרסומיים ומודעות. תעדוף המודעות הזה עזר למנוע השפעה של המודעות על LCP.
בנוסף לשיטות האופטימיזציה האלה, צוות Netzwelt פעל לפי שיטות מומלצות נוספות:
- הפרדת CSS לנתיב רינדור קריטי והוספתו לכותרת.
- טעינה מראש של הגופנים, הסקריפטים והתמונות החשובים ביותר.
- נמנעה טעינה מדורגת של תמונות מעל למסך.
- השתמשת ב-
font-display="swap".
הסכמה בהתאם ל-GDPR ו-Core Web Vitals
תיבת הדו-שיח לבקשת הסכמה משפיעה לעיתים קרובות לרעה על מדדי הליבה לבדיקת חוויית המשתמש באתר. בדומה למודעות, יש שתי דרכים שבהן תיבת הדו-שיח לבקשת הסכמה יכולה להשפיע על מדדי הליבה לבדיקת חוויית המשתמש באתר:
- באופן מפורש אם הוא מזוהה כ-paint הגדול ביותר, או אם הוא גורם לשינויי פריסה.
- באופן עקיף, על ידי גניבת רוחב פס מה-Largest Contentful Paint בפועל, חסימה של הנתיב הקריטי ל-Largest Contentful Paint או עיכוב הצגת המודעות עד לקבלת הסכמה, שעלול לגרום לתנודות בפריסת הדף.
Netzwelt עובדת עם ספק צד שלישי של הסכמה, שהטמיע גם אופטימיזציות. קודם כל, ב-Netzwelt הקפידו להימנע מהמלכודות הפשוטות:
- סקריפטים של הסכמה נטענים באופן אסינכרוני כדי לא לחסום משאבים קריטיים.
- הפורמט של ההסכמה מוגדר כך שרכיבים גדולים לא יוכלו להיחשב לאלמנט הגדול ביותר במדד LCP.
- שכבת-העל של בקשת ההסכמה משתמשת ב-
position: fixedכדי למנוע שינויים. - המודעות מוצגות רק אחרי שהמשתמשים נותנים הסכמה, אבל אנחנו משאירים מספיק מקום ללא תוכן כדי למנוע שינויים בפריסה כשהמודעות נטענות.
- מוודאים שהתצוגה והמיקום של תיבת הדו-שיח להבעת הסכמה לא גורמים לשינויים בפריסת המסך. אחת מהבעיות שזוהו ותוקנו היא אפשרות נעילת הגלילה של ספק השירות, שהשביתה את הגלילה בזמן הצגת בקשת ההסכמה על ידי העברת התוכן הראשי של המאמר בזמן הגלילה, וכתוצאה מכך גרמה לשינויים בפריסה.
אחרי העבודה הזו, עדיין היו פערים גדולים בין מדד CLS בשדה לבין מדד CLS ב-Lab. בעוד ש-CLS במדידה במעבדה היה קרוב לאפס, ערכי השדות היו גבוהים באופן משמעותי מהספים. אחרי בדיקה, הבעיה נגרמה בגלל שינויים בפריסה בתוך ה-iframe של הסכמת המשתמש, שכרגע מתועדים בצורה נכונה רק בנתוני השדה. צוות Netzwelt ממשיך לעבוד עם ספק ההסכמה של הצד השלישי כדי לשפר את הבעיה הזו.
מודלים של מינויים לחדשות ו-Core Web Vitals
בעלי תוכן חדשותי עוברים למודלים של מינויים כדי לממן את העיתונות. המודל הזה רלוונטי ל-Core Web Vitals כי אנשים לא יירשמו לאתרים עם חוויית משתמש גרועה. בנוסף, המנויים לא מצפים לראות מודעות בתוכן בתשלום, אבל הסתרת המודעות עשויה לגרום לשינויים בפריסה. האתר צריך לבדוק אם המשתמשים זכאים לצפות בתוכן ואם להציג מודעות. הבדיקות האלה עלולות לגרום לזמני אחזור נוספים, וכתוצאה מכך לתנודות בתוכן או לחוויית משתמש גרועה.
ב-Netzwelt נעשה שימוש במודל שבו התוכן תמיד זמין בחינם, אבל למנויים לא יוצגו מודעות. הם בדקו דרכים שונות לשליחת שאילתות לאישורים ולשמירתם כדי לצמצם את זמני האחזור ואת השינויים בפריסה.
שאילתות ראשוניות לגבי הרשאות תמיד גורמות לזמני אחזור ארוכים, ולכן אם השאילתה לגבי ההרשאות נמשכת יותר מדי זמן, האתר יציג את המצב האחרון ששמור במטמון. במנויים חדשים, המשמעות היא סיכון קטן שמשתמש משלם יראה מודעות פעם אחת. משתמשים שסיימו מינוי עשויים לראות עומס אחד ללא מודעות לפני שההרשאות ששמורות באופן מקומי יעודכנו. אחרי שמזהים את ההרשאות, הן מאוחסנות באופן מקומי באמצעות LocalStorage API, כדי למנוע זמני אחזור נוספים ושינויים בפריסה במהלך ניווט עתידי.
תוצאות האופטימיזציה
התוצאות של האופטימיזציות של Netzwelt מדברות בעד עצמן. הציון שלהם ב-PageSpeed Insights לא דומה לאף אחד מבין בעלי אתרי החדשות ברחבי העולם:
האופטימיזציות הובילו לשיפור חוויית השימוש בדף, אבל הן בוצעו מתוך מחשבה על העסק, והן שיפרו את חוויית הצפייה במודעות, את החשיפה שלהן ואת ההכנסות. אחרי ההשקה מחדש של הדף המותאם, העלות לאלף חשיפות ב-Netzwelt עלתה ב-20% עד 30%, וניראות המודעות עלתה ליותר מ-75%. עם זאת, ב-Netzwelt מניחים שהעלייה הכוללת בהכנסות תהיה גבוהה עוד יותר. מאז ההשקה מחדש, חלה עלייה בנפח התנועה, כנראה בגלל התעניינות רבה יותר מצד המשתמשים ושיעורי עזיבה נמוכים יותר עקב חוויית משתמש משופרת. קשה לכמת את ההשפעות האלה ולקבוע קשר סיבתי בינן לבין ההשקה מחדש, כי נפח התנועה תנודתי מטבעו, ויש גם השפעות של המגפה העולמית. ההשפעות העקיפות האלה הן אחת הסיבות לכך שב-Netzwelt תמיד בודקים את כל המספרים כשהם בודקים את האתר, ולא רק את העלות לאלף חשיפות, שעשויה להיות מטעה. מדדי הליבה לבדיקת חוויית המשתמש באתר ומדדי חוויית המשתמש, בשילוב עם כל המדדים הקשורים למודעות, מספקים את התמונה האמיתית.
מבט לעתיד
לדעת Netzwelt, בעתיד ללא קובצי cookie של צד שלישי, טירגוט לפי הקשר באמצעות התוכן, בשילוב עם חוויית משתמש וחוויית דף טובות (כולל ניראות המודעות), הוא המפתח להצלחה של בעלי תוכן דיגיטלי בתחום החדשות.
לכן, ב-Netzwelt לא מסתפקים במדדי Core Web Vitals, אלא משתמשים בDigital Goods API החדש כדי להטמיע יכולות אינטרנט מודרניות רבות, כמו אפליקציות אינטרנט מתקדמות (PWA), תוכן אופליין, מצב כהה, Web Share API ופעילויות אינטרנט מהימנות (TWA).