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

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

Elizabeth Sweeny
Elizabeth Sweeny

בכנס Chrome למפתחים, פול אירלנד ואני הודענו על עדכונים ל-Lighthouse – Lighthouse CI, נוסחה חדשה של ציון ביצועים ועוד. לצד חדשות חשובות מ-Lighthouse, הצגנו פיתוחים מלהיבים לכלי ביצועים, כולל מדדי ביצועים חדשים, עדכונים ל-PageSpeed Insights ודוח חוויית המשתמש ב-Chrome (CrUX) ותובנות מהניתוח של סביבת האינטרנט ב-Web Almanac.

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

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

Largest Contentful Paint (LCP)

המהירות שבה נטען רכיב התוכן הכי גדול (LCP) מדווחת על הזמן שבו רכיב התוכן הגדול ביותר מופיע באזור התצוגה.

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

המדד החדש Largest Contentful Paint (LCP) יהיה זמין בקרוב בדוחות Lighthouse, ובינתיים אפשר למדוד LCP ב-JavaScript.

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

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

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

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

המדד 'זמן החסימה הכולל של דף' מייצג את משך זמני החסימה של כל המשימות הארוכות שהתרחשו בין FCP ל-TTI.

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

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

Cumulative Layout Shift (CLS)

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

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

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

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

המדדים העיקריים שבהם אפשר למצוא את המדד 'הצגת התוכן הראשון בתוכן' בגרסה 6: 'אינדקס מהירות' ו'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP) הם המדדים העיקריים של ביצועי הטעינה. המדדים העיקריים יכולים להיות 'משך הזמן עד לפעילות אינטראקטיבית', 'עיכוב בקלט ראשון', 'זמן חסימה כולל מקסימלי' ו'זמן חסימה כולל'.

למידע נוסף, מומלץ לעיין בציון הביצועים של Lighthouse ובאוסף מדדי web.dev החדש.

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

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

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

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

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

הנתונים האלה עברו התאמה כדי שתהיה התפלגות כוללת טובה יותר בין האתרים, והפירוט החדש הוא:

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

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

הפניות אוטומטיות של כתובת URL קנונית ב-PageSpeed Insights

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

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

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

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

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

אלמנך אינטרנט

דיון אלמר מגיש את Web Almanac ב-CDS 2019.

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

מידע נוסף

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