ההתפתחות של השימוש בכלי המהירות: רגעי השיא ממפגש הפסגה של מפתחי Chrome לשנת 2019

מדדי ביצועים חדשים, עדכונים ל-PageSpeed Insights ולדוח חוויית המשתמש ב-Chrome‏ (CrUX) ועוד.

Elizabeth Sweeny
Elizabeth Sweeny

בכנס Chrome Developer Summit, Paul Irish ואני הכרזנו על עדכונים ל-Lighthouse – Lighthouse CI, נוסחה חדשה לניקוד הביצועים ועוד. בנוסף לחדשות הגדולות בנושא Lighthouse, הצגנו פיתוחים מעניינים בכלים לבדיקת ביצועים, כולל מדדי ביצועים חדשים, עדכונים ל-PageSpeed Insights ולדוח חוויית המשתמש ב-Chrome‏ (CrUX), ותובנות מהניתוח של Web Almanac על הסביבה העסקית באינטרנט.

מדדי ביצועים חדשים

מדידת הניואנסים של חוויית המשתמש היא המפתח למדידה כמותית של ההשפעה שלה על התוצאות העסקיות ולמעקב אחר שיפורים ורגרסיות. עם הזמן, התפתחו מדדים חדשים כדי לתעד את הניואנסים האלה ולמלא את הפערים במדידת חוויית המשתמש. התוספת החדשה ביותר למשפחת המדדים היא שני מדדים שמודדים בשטחזמן הטעינה של רכיב התוכן הכי גדול (LCP) ושינוי מצטבר בפריסה (CLS) – שנמצאים בשלבי פיתוח בקבוצת העבודה של W3C לבדיקת ביצועי האינטרנט, ומדד מעבדה חדש – זמן החסימה הכולל (TBT).

Largest Contentful Paint (LCP)

המדד Largest Contentful Paint‏ (LCP) מדווח על הזמן שבו רכיב התוכן הגדול ביותר הופך להיות גלוי באזור התצוגה.

לפני המדד Largest Contentful Paint, המדדים הצגת התוכן העיקרי (FMP) ו-Speed Index (SI) שימשו לתעד את חוויית הטעינה אחרי ה-paint הראשוני, אבל המדדים האלה מורכבים ובדרך כלל לא מזהים מתי התוכן העיקרי של הדף נטען. מחקרים הראו שבדיקה של מועד היצירה של האלמנט הגדול ביותר בדף מייצגת בצורה טובה יותר את מועד טעינת התוכן הראשי בדף.

המדד החדש 'המהירות שבה נטען רכיב התוכן הכי גדול (LCP)' יהיה זמין בקרוב בדוחות של Lighthouse. בינתיים, אתם יכולים למדוד את ה-LCP ב-JavaScript.

זמן החסימה הכולל (TBT)

המדד Total Blocking Time (TBT) (משך החסימה הכולל) מודד את משך הזמן הכולל בין הצגת התוכן הראשוני (FCP) לבין הזמן עד לפעילות מלאה (TTI), שבו ה-thread הראשי נחסם למשך מספיק זמן כדי למנוע תגובות לקלט.

משימה נחשבת ארוכה אם היא פועלת בשרשור הראשי במשך יותר מ-50 אלפיות השנייה. כל אלפית שנייה מעבר לכך נספרת כחלק מזמן החסימה של המשימה.

תרשים שמייצג משימה של 150 אלפיות השנייה עם 100 אלפיות השנייה של זמן חסימה.

זמן החסימה הכולל של דף הוא הסכום של זמני החסימה של כל המשימות הארוכות שהתרחשו בין הצגת התוכן הראשוני (FCP) לבין הזמן עד לפעילות מלאה (TTI).

תרשים שמייצג חמש משימות עם 60 אלפיות שנייה של זמן חסימה כולל מתוך 270 אלפיות שנייה של זמן של שרשור ראשי.

המדד 'זמן לפעולה אינטראקטיבית' עוזר לזהות מתי התהליך הראשי מתחיל לפעול בצורה חלקה יותר בשלב מאוחר יותר של העומס, אבל המדד 'משך החסימה הכולל' מאפשר למדוד את מידת העומס על התהליך הראשי במהלך העומס. כך, TTI ו-TBT משלימים זה את זה ומספקים איזון.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift‏ (CLS) מודד את היציבות החזותית של הדף ומציין את התדירות שבה משתמשים נתקלים בתזוזות לא צפויות בפריסת הדף. תנועה בלתי צפויה של תוכן יכולה להיות מתסכלת מאוד, והמדד החדש הזה עוזר לכם לטפל בבעיה הזו על ידי מדידת התדירות שבה היא מתרחשת אצל המשתמשים.

הקלטת מסך שממחישה איך חוסר יציבות של הפריסה יכול להשפיע לרעה על המשתמשים.

במדריך המפורט בנושא Cumulative Layout Shift מוסבר איך מחשבים את המדד ואיך מודדים אותו.

בנוסחה החדשה של ניקוד הביצועים ב-Lighthouse, בקרוב יהיה שינוי בדגש על המדדים FMP ו-FCI, והיא תכלול את שלושת המדדים החדשים – LCP,‏ TBT ו-CLS – כי הם מתעדים בצורה טובה יותר מתי דף נראה שמיש.

ב-Lighthouse גרסה 6, מדדי הביצועים העיקריים של טעינת הדף הם הצגת התוכן הראשוני (FCP), מדד Speed Index והמהירות שבה נטען רכיב התוכן הכי גדול (LCP). מדדי האינטראקטיביות העיקריים הם הזמן עד לפעילות מלאה (TTI), ההשהיה לאחר קלט ראשוני (FID), ההשהיה הפוטנציאלית המקסימלית לאחר קלט ראשוני (MPFID) ומשך הזמן הכולל של החסימה. מדד היציבות החזותית (CLS) הוא המדד העיקרי של היכולת לחיזוי.

מידע נוסף זמין במאמרים הצגת ניקוד ביצועים ב-Lighthouse ואוסף המדדים החדש של web.dev.

ערכי הסף של נתוני שטח (CrUX) שהותאמו ב-PageSpeed Insights

במהלך השנה האחרונה ניתחנו ביצועים באינטרנט מהשטח באמצעות נתוני חוויית המשתמש ב-Chrome (CrUX). על סמך התובנות מהנתונים האלה, בדקנו מחדש את ערכי הסף שבהם אנחנו משתמשים כדי לסווג אתר כ'איטי', 'בינוני' או 'מהיר' בביצועים בשטח.

שני תרשימי עמודות שמציגים את ההתפלגות של מהירות איטית, מהירה ורגילה לגבי FCP ו-FID.

כדי לקבל הערכה כללית של אתר, PageSpeed Insights‏ (PSI) משתמש בפרמטר מסוים של האחוזון הכולל של חלוקת נתוני השדה בתור המספר המושלם לאתר הזה. ערכי הסף הקודמים שהיו בשימוש היו 90% לאינדיקטור 'זמן הצגת המטא-נתונים הראשונים' ו-95% לאינדיקטור 'זמן האחזור של הקלט הראשון' (FID).

לדוגמה, אם באתר יש חלוקה של 50% מהטעינות המהירות, 30% מהטעינות בזמן סביר ו-20% מהטעינות האיטיות, זמן הטעינה הממוצע ב-90% מהטעינות נמצא בקטגוריה 'איטי', ולכן דירוג השדה הכולל של האתר הוא 'איטי'.

שינינו את הנתונים האלה כדי לקבל פיזור טוב יותר של המודעות באתרים השונים. הנתונים החדשים הם:

מדד אחוזון כולל מהיר (אלפיות השנייה) בינוני (אלפיות השנייה) איטי (אלפיות השנייה)
FCP אחוזון 75 1000 1000-3000 3000+
FID אחוזון 95 100 100-300 300+

לדוגמה, אם באתר יש חלוקה של 50% מהדפים עם מהירות FCP מהירה, 30% מהדפים עם מהירות FCP בינונית ו-20% מהדפים עם מהירות FCP איטית, מהירות ה-FCP ב-75% העליונים נמצאת בקטגוריה 'בינונית', ולכן הציון הכולל של האתר בתחום הזה הוא 'בינוני'.

הפניות לכתובת URL קנונית ב-PageSpeed Insights

כדי שתוכלו למדוד את חוויית המשתמש בצורה מדויקת ככל האפשר, צוות PageSpeed Insights הוסיף ל-PSI בקשה לניתוח חוזר. לגבי אתרים שמפנים לכתובת URL חדשה, תתבקשו להריץ מחדש את הדוח בכתובת דף הנחיתה כדי לקבל תמונה מלאה יותר של הביצועים בפועל.

ממשק המשתמש של PSI שבו מוצגת ההפניה האוטומטית לכתובת ה-URL והלחצן 'ניתוח מחדש'

מדד CrUX בדוח המהירות החדש של Search Console

הדוח החדש בנושא מהירות ב-Search Console הושק שבוע לפני כנס Chrome Dev Summit. הדוח משתמש בנתונים מהדוח לגבי חוויית המשתמש ב-Chrome כדי לעזור לבעלי אתרים לזהות בעיות פוטנציאליות בחוויית המשתמש. בדוח המהירות, קבוצות של כתובות URL דומות מוקצות באופן אוטומטי לקטגוריות 'מהיר', 'בינוני' ו'איטי', ועוזרות לקבוע את סדר העדיפויות של שיפורי הביצועים לבעיות ספציפיות.

דוח המהירות ב-Search Console.

Web Almanac

דיאן אלמר (Dion Almaer) מציג את Web Almanac בכנס CDS 2019.

בנאום הפתיחה הודענו על השקת Web Almanak, פרויקט שנתי שמציג את הנתונים הסטטיסטיים והמגמות לגבי מצב האינטרנט בשילוב עם המומחיות של קהילת האינטרנט. 85 שותפים, שמרכיבים אותם מפתחי Chrome וקהילת האינטרנט, התנדבו לעבוד על הפרויקט, שמנתח 20 היבטים מרכזיים של האינטרנט, ומתייחס לאופן שבו אתרים נוצרים, מוצגים ומשתמשים חווים אותם. מומלץ להתחיל לקרוא את 'אלמנך האינטרנט' כדי לקבל מידע נוסף על הביצועים, על JavaScript ועל קוד של צד שלישי באינטרנט.

מידע נוסף

לפרטים נוספים על עדכונים בכלים לבדיקת ביצועים מ-Chrome Developer Summit, אפשר לצפות בהרצאה על התפתחות הכלים לבדיקת מהירות: