אופטימיזציה של דוח מדדי הליבה לבדיקת חוויית המשתמש באתר של The Economic Times שיפרה משמעותית את חוויית המשתמש והפחיתה משמעותית את שיעור העזיבה באתר כולו.
מכיוון שמהירות האינטרנט משתפרת מדי יום, המשתמשים מצפים שאתרים יגיבו ויתנהגו מהר יותר מאי פעם. The Economic Times מטפל ביותר מ-45 מיליון משתמשים פעילים בחודש. בעזרת אופטימיזציה למדדי ליבה לבדיקת חוויית המשתמש באתר ברמת הדומיין, בדפים שאינם AMP ובדפים שאינם AMP, הצלחנו לצמצם משמעותית את שיעורי העזיבה ולשפר את חוויית הקריאה.
מדידת ההשפעה
התמקדנו במדדי המהירות שבה נטען רכיב התוכן הכי גדול (LCP) וב-Cumulative Layout Shift (CLS), כדי לספק חוויית קריאה מעולה למשתמשים שלנו. לאחר יישום תיקוני ביצועים שונים כמתואר בהמשך, ב-The Economic Times הצליחה לשפר את מדדי הדיווח של Chrome Users (CrUX) באופן משמעותי בתוך מספר חודשים.
בסך הכול, ערך ה-CLS השתפר ב-250% מ-0.25 ל-0.09. בסך הכול, מדד ה-LCP השתפר ב-80% מ-4.5 שניות ל-2.5 שניות.
כמו כן, ערכי ה-LCP בטווח ה'איטי' ירדו ב-33% מאוקטובר 2020 עד יולי 2021:
כמו כן, ערכי ה-CLS בטווח ה'איטי' הופחתו ב-65%, וערכי ה-CLS בטווח ה'טוב' עלו ב-20% באותה מסגרת זמן:
התוצאה הייתה ש-The Economic Times – שקודם לכן לא עמד בערכי הסף של דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals), עבר עכשיו את ערכי הסף של מדדי הליבה לבדיקת חוויית המשתמש באתר בכל המקור, ושיעורי העזיבה ירדו ב-43% בסך הכול.
מה זה LCP ואיך שיפרנו אותו?
הרכיב הגדול ביותר הוא הרכיב הרלוונטי ביותר לשיפור חוויית המשתמש ולזיהוי מהירות הטעינה. מדדי ביצועים כמו הצגת תוכן ראשוני (FCP) משקפים רק את החוויה הראשונית של טעינת הדף. לעומת זאת, מדד LCP מדווח על זמן הרינדור של קטע התמונה, הטקסט או הסרטון הגדול ביותר שגלוי למשתמש.
בנוסף למעבר לספק DNS מהיר ולאופטימיזציה של תמונות, ריכזנו כאן כמה שיטות שעדכנו כדי לשפר את ה-LCP.
קודם בקשות קריטיות
כל הדפדפנים המודרניים מגבילים את מספר הבקשות בו-זמנית, לכן המפתחים צריכים לתת עדיפות לטעינת התוכן הקריטי. כדי לטעון דף אינטרנט מורכב, אנחנו צריכים להוריד נכסים כמו רכיבי כותרת, CSS, משאבי JavaScript, תמונה ראשית (Hero), גוף המאמר, תגובות, חדשות קשורות אחרות, כותרת תחתונה ומודעות. ביצענו הערכה של הרכיבים שנדרשים ל-LCP וסיפקנו העדפה לטעון את הפריטים האלה קודם כדי לשפר את ה-LCP. בנוסף, דחינו את הקריאות שלא היו חלק מרינדור הדף הראשוני.
מראה הטקסט
ערכנו ניסויים עם הנכס font-display כי הוא משפיע גם על LCP וגם על CLS. ניסינו את font-display: auto; ואז עברנו ל-font-display: swap;. הפעולה הזו ממירה את הטקסט בגופן הזמין והמתאים ביותר, ולאחר מכן עוברת לגופן לאחר ההורדה. התוצאה היא עיבוד מהיר של הטקסט, ללא קשר למהירות הרשת.
דחיסה טובה יותר
Brotli הוא אלגוריתם דחיסה חלופי ל-Gzip ול-Deflate שפותח על ידי Google. החלפנו את הגופנים והנכסים שלנו ושינינו את דחיסת השרת מ-Gzip ל-Brotli כדי להשיג טביעת רגל קטנה יותר:
- קובצי JavaScript קטנים ב-15% מקובצי Gzip.
- קובצי HTML קטנים ב-18% בהשוואה לקובצי Gzip.
- קובצי CSS וגופנים קטנים ב-17% מאשר קובצי Gzip.
התחברות מראש לדומיינים של צד שלישי
חשוב להפעיל שיקול דעת בשימוש ב-preconnect כי הוא עדיין עלול לתפוס זמן רב (CPU) יקר ולעכב משאבים חשובים אחרים, במיוחד בחיבורים מאובטחים.
עם זאת, אם ידוע שאחזור של משאב בדומיין של צד שלישי יתבצע, preconnect הוא תקין. אם זה קורה רק מדי פעם באתר עם נפח תנועה גבוה, preconnect עשוי להפעיל פעולות TCP ו-TLS מיותרות. לכן, dns-prefetch התאים יותר למשאבים של צד שלישי – כמו רשתות חברתיות, ניתוח נתונים וכו' – כדי לבצע חיפושי DNS מראש.
פיצול הקוד למקטעים
בראש האתר, טענו רק את המשאבים שמכילים חלק חיוני מהלוגיקה העסקית או שהיו קריטיים לעיבוד הדפים בחלק העליון והקבוע. בנוסף, אנחנו מפצלים את הקוד למקטעים באמצעות פיצול קוד. זה עזר לנו לשפר עוד יותר את ה-LCP של הדף.
שמירה טובה יותר במטמון
לכל הנתיבים בממשק הקצה, הוספנו שכבת Redis שהציגה תבניות מהמטמון. עבודה בשיטה הזאת מפחיתה את זמן החישוב בשרת ויוצרת את ממשק המשתמש כולו בכל בקשה, וכתוצאה מכך מפחיתה את ה-LCP בבקשות הבאות.
סיכום יעדים והישגים של LCP
לפני שהתחילו את פרויקט האופטימיזציה, הצוות ביצע נקודת השוואה של ציון ה-LCP שלו כ-4.5 שניות (לאחוזון ה-75 של המשתמשים, על סמך נתוני השדות בדוח CrUX). אחרי פרויקט האופטימיזציה, הוא קוצר ל-2.5 שניות.
מה זה CLS ואיך שיפרנו אותו?
האם אי פעם הבחנת בתנועה לא צפויה של תוכן הדף בזמן הגלישה באתר? אחת הסיבות לכך היא טעינה אסינכרונית של מדיה (תמונות, סרטונים, מודעות וכו') בדף במידות לא ידועות. ברגע שמשאבי המדיה נטענים, הם משנים את פריסת הדף.
אנחנו מתכוונים לעדכן את האמצעים שנקטנו כדי לשפר את ה-CLS באתר של The Economic Times.
שימוש ב-placeholders
השתמשנו ב-placeholder מעוצב ליחידות מודעות ולרכיבי מדיה של מאפיינים ידועים, כדי למנוע תנודות בפריסה כשספריית המודעות טוענת ומעבדת מודעות בדף. כך תבטיחו ששינויי פריסה יבוטלו על ידי שמירת מקום למודעה.
מאפייני מאגר תגים מוגדרים
הגדרנו מידות מפורשות לכל התמונות והמאגרים, כדי שמנוע הדפדפן לא יצטרך לחשב את הרוחב והגובה של רכיבי ה-DOM ברגע שהם זמינים. כך נמנעו שינויים לא נחוצים בפריסה ועבודה מיותרת של צביעה.
סיכום של היעדים וההישגים של ה-CLS
לפני שהתחילו את פרויקט האופטימיזציה, הצוות בחן את ציון ה-CLS כ-0.25 כנקודת השוואה. הצלחנו להוריד את הערך באופן משמעותי ב-90% ל-0.09.
מהו השהיית קלט ראשון (FID) ואיך שיפרנו אותו?
עיכוב בקלט ראשון הוא המדד שעוקב אחרי התגובה של האתר לקלט של משתמשים. הסיבה העיקרית לציון FID נמוך היא עבודה רבה ב-JavaScript שמעסיקה את ה-thread הראשי של הדפדפן, דבר שעלול לעכב את האינטראקציות של המשתמשים. שיפרנו את FID בכמה דרכים.
פיצול משימות JavaScript ארוכות
משימות ארוכות הן משימות באורך של 50 אלפיות שנייה או יותר. משימות ארוכות ממלאות את ה-thread הראשי של הדפדפן ומונעות ממנו להגיב לקלט של משתמשים. חילקנו משימות ארוכות למשימות קטנות יותר, במידת האפשר, לפי בקשת משתמשים. כך צמצמנו את הריבוי ב-JavaScript.
דחייה של קובצי JavaScript שאינם בשימוש
כדי להבטיח שהדף יהיה רספונסיבי יותר, נתנו עדיפות לתוכן הדף על פני סקריפטים של צד שלישי, כמו ניתוח נתונים. עם זאת, יש מגבלות מסוימות על ספריות מסוימות, כי צריך לטעון אותן במסמך <head> כדי לעקוב במדויק אחר התהליך שעובר המשתמש.
הקטנת מספר המילויים
צמצמנו את התלות שלנו במילויים מרובים ובספריות מסוימות, מאחר שהדפדפנים מספקים תמיכה בממשקי API מודרניים ופחות משתמשים משתמשים בדפדפנים מדור קודם, כגון Internet Explorer.
מודעות עם טעינה מדורגת
טעינה מושהית של מודעות בחלק הנגלל עזרה לקצר את משך החסימה של ה-thread הראשי, וכך לשפר את ה-FID.
סיכום של יעדי FID והישגים
בעזרת ניסויים שגרתיים, הצלחנו להפחית את זמן ה-FID שלנו מ-200 אלפיות השנייה מתחת ל-50 אלפיות השנייה היום.
מניעת רגרסיות
ב-Ecoeils Times מתכננים להוסיף בדיקות אוטומטיות של ביצועים בסביבת הייצור כדי להימנע מרגרסיות של ביצועי דפים. הם מתכננים לבחון את Lighthouse-CI כדי להפוך את בדיקות המעבדה לאוטומטיות, וכך למנוע רגרסיות בהסתעפות הייצור שלהם.