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