כלים למדידה של דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals)

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

יוזמת Web Vitals שהכרזנו עליה לאחרונה מספקת הנחיות מאוחדות לגבי אותות איכות שחיוניים לכל האתרים כדי לספק חוויית משתמש מעולה באינטרנט. אנחנו שמחים להודיע שכל הכלים הפופולריים של Google למפתחי אתרים תומכים עכשיו במדידה של מדדי ליבה לבדיקת חוויית המשתמש באתר, ועוזרים לכם לאבחן ולפתור בקלות בעיות בחוויית המשתמש. התכונות האלה כוללות את Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, כלי המדידה של web.dev, התוסף Web Vitals ל-Chrome ודוח חוויית המשתמש של Chrome (!) חדש (!).

חיפוש Google כולל עכשיו את מדדי הליבה לבדיקת חוויית המשתמש באתר, כבסיס להערכת חוויית המשתמש בדף. לכן, חשוב שהמדדים האלה יהיו זמינים ויאפשרו לבצע פעולות רבות ככל האפשר.

כדי להתחיל את תהליך האופטימיזציה של חוויית המשתמש בעזרת מדדי ליבה לבדיקת חוויית המשתמש באתר, כדאי לנסות את תהליך העבודה הבא:

• הדוח החדש של Search Console בנושא מדדי ליבה לבדיקת חוויית המשתמש באתר מאפשר לזהות קבוצות של דפים שדורשים טיפול (על סמך נתוני השדות).
• אחרי שאתם מזהים דפים שצריך לעבוד בהם, אפשר להשתמש ב-PageSpeed Insights (מופעל על ידי Lighthouse ודוח חוויית המשתמש של Chrome) כדי לאבחן בעיות בשיעור ה-Lab ובשדות בדף. אפשר להשתמש ב-PageSpeed Insights (PSI) דרך Search Console, או להזין כתובת URL ישירות ב-PSI.
• מוכנים לבצע אופטימיזציה של האתר שלכם באופן מקומי בשיעור ה-Lab? אתם יכולים להשתמש ב-Lighthouse ובכלי הפיתוח ל-Chrome כדי למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר ולקבל הנחיות פרקטיות שמסבירות מה צריך לתקן. תוסף Web Vitals ל-Chrome מספק לכם תצוגה של מדדים בזמן אמת במחשב.
• צריכים מרכז בקרה מותאם אישית של מדדי הליבה לבדיקת חוויית המשתמש באתר? צריך להשתמש בגרסה המעודכנת של CrUX Dashboard או ב-Chrome UX Report API עבור נתוני שדות, או ב-PageSpeed Insights API עבור נתוני שיעור Lab.
• רוצה לקבל הדרכה? web.dev/measure יכול למדוד את הדף שלך ולהציג לך קבוצה של מדריכים ו-codelabs לאופטימיזציה, שניתנת לפי עדיפות, על סמך נתוני PSI.
• לבסוף, משתמשים ב-Lighthouse CI בבקשות משיכה כדי לוודא שאין רגרסיות בדוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals), לפני פריסת השינוי לייצור.

עכשיו נפרט את העדכונים הספציפיים לכל כלי.

מגדלור

Lighthouse הוא כלי אוטומטי לבדיקת אתרים, שעוזר למפתחים לאבחן בעיות ולזהות הזדמנויות לשיפור חוויית המשתמש באתרים שלהם. הוא מודד מספר מימדים של איכות חוויית המשתמש בסביבת שיעור ה-Lab, כולל ביצועים ונגישות. הגרסה האחרונה של Lighthouse (6.0, הושקה באמצע מאי 2020) כוללת ביקורות נוספות, מדדים חדשים וציון ביצועים חדש.

ב-Lighthouse 6.0 נוספו שלושה מדדים חדשים לדוח. שניים מהמדדים החדשים האלה — המהירות שבה נטען רכיב התוכן הכי גדול (LCP) ו-Cumulative Layout Shift (CLS), הם הטמעות במעבדה של מדדי ליבה לבדיקת חוויית המשתמש באתר ומספקים מידע אבחון חשוב לצורך אופטימיזציה של חוויית המשתמש. בגלל חשיבות המדדים של חוויית המשתמש להערכת חוויית המשתמש, המדדים החדשים לא רק נמדדים ונכללים בדוח, אלא גם בחישוב של ציון הביצועים.

המדד החדש השלישי שנכלל ב-Lighthouse – זמן חסימה כולל (TBT) תואם היטב למדד השדה עיכוב בקלט ראשון (FID), מדד נוסף של מדדי ליבה לבדיקת חוויית המשתמש באתר. כדי לספק למשתמשים את החוויה הטובה ביותר, כדאי לפעול לפי ההמלצות שבדוח Lighthouse ולבצע אופטימיזציה בהתאם לציונים.

כל המוצרים שמופעלים על ידי Lighthouse מתעדכנים כדי לשקף את הגרסה האחרונה, כולל Lighthouse CI, שמאפשר למדוד בקלות את מדדי הליבה לבדיקת חוויית המשתמש באתר לפי בקשות משיכה לפני המיזוג והפריסה.

מידע נוסף על העדכונים האחרונים ב-Lighthouse זמין בפוסט בבלוג What's New in Lighthouse 6.0.

PageSpeed Insights

PageSpeed Insights (PSI) מדווח על ביצועי שיעור ה-Lab והשדה של דף גם במכשירים ניידים וגם במחשבים. הכלי מספק סקירה כללית של האופן שבו משתמשים בעולם האמיתי חווים את הדף (מופעל על ידי דוח חוויית המשתמש של Chrome) ומקבץ המלצות פרקטיות לאופן שבו בעלי אתר יכולים לשפר את חוויית השימוש בדף (מסופק על ידי Lighthouse).

גם PageSpeed Insights ו-PageSpeed Insights API שודרגו לשימוש ב-Lighthouse 6.0, ועכשיו הם תומכים במדידה של מדדי ליבה לבדיקת חוויית המשתמש באתר גם בחלקים של שיעור ה-Lab וגם בקטעים של השדות בדוח. בדוח בנושא מדדי ליבה לבדיקת חוויית המשתמש באתר מפורטות הערות עם סרט כחול, כפי שמוצג בהמשך.

Search Console מספק לבעלי אתרים סקירה כללית מצוינת של קבוצות דפים שדורשות התייחסות, אבל PSI עוזר לזהות הזדמנויות בכל דף לשיפור חוויית השימוש בדף. בעזרת PSI, אפשר לראות בבירור אם הדף עומד בדרישות הסף לקבלת חוויית משתמש טובה בכל מדדי הליבה לבדיקת חוויית המשתמש באתר בחלק העליון של הדוח. הסטטוס הזה מציין אם עבר את הבדיקה של מדדי הליבה לבדיקת חוויית המשתמש באתר או לא עבר את הבדיקה בנושא מדדי ליבה לבדיקת חוויית המשתמש באתר.

CrUX

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

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

חדש: CrUX API

היום אנחנו שמחים להכריז על CrUX API, דרך מהירה וחינמית לשלב בקלות תהליכי עבודה של פיתוח עם מדידת איכות ברמת המקור וברמת כתובת ה-URL, במדדי השדות הבאים:

• Largest Contentful Paint ‏(LCP)
• Cumulative Layout Shift ‏(CLS)
• השהיה לאחר קלט ראשון
• הצגת תוכן ראשוני (FCP)

מפתחים יכולים לשלוח שאילתות לגבי מקור או כתובת URL ולפלח את התוצאות לפי גורמי צורה שונים. ה-API מתעדכן מדי יום ומסכם את הנתונים מ-28 הימים האחרונים (בניגוד למערך הנתונים ב-BigQuery, שנצבר מדי חודש). ל-API יש גם מכסות API ציבוריות רגועות שאנחנו מגדירים בממשק ה-API האחר שלנו, PageSpeed Insights API (25,000 בקשות ביום).

בהמשך מופיעה הדגמה שמשתמשת ב-CrUX API כדי להמחיש את מדדי הליבה לבדיקת חוויית המשתמש באתר, עם התפלגות של הערכים טוב, דרוש שיפור וחלש:

בגרסאות עתידיות, אנחנו מתכננים להרחיב את ה-API כדי לאפשר גישה למאפיינים ולמדדים נוספים של מערכי הנתונים של CrUX.

מרכז הבקרה של CrUX משופר

לוח הבקרה של CrUX בעיצוב החדש מאפשר לעקוב בקלות אחר הביצועים של מקור לאורך זמן. מעכשיו אפשר להשתמש בו כדי לעקוב אחרי ההתפלגויות של כל המדדים של מדדי הליבה לבדיקת חוויית המשתמש באתר. כדי להתחיל לעבוד עם מרכז השליטה, כדאי לעיין במדריך שלנו באתר web.dev.

השקנו דף נחיתה חדש של מדדי ליבה לבדיקת חוויית המשתמש באתר, כדי שבעזרתו יהיה לך קל יותר לראות את ביצועי האתר במבט חטוף. נשמח לקבל ממך משוב על כל הכלים של CrUX. כדי לשתף אותנו בדעתך ובשאלות, אפשר לפנות אלינו בחשבון Twitter @ChromeUXReport או בקבוצת Google.

חלונית הביצועים של כלי הפיתוח ל-Chrome

ניפוי באגים באירועים של Layout Shift בקטע Experience

בחלונית ביצועים של כלי הפיתוח ל-Chrome יש קטע חוויית משתמש חדש שיכול לעזור לכם לזהות שינויים לא צפויים בפריסה. התכונה הזו עוזרת לאתר ולתקן בעיות של חוסר יציבות חזותית בדף שתורמות לשינוי הפריסה המצטבר.

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

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

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

כשמודדים את ביצועי הדף, ה-TBT מוצג עכשיו בכותרת התחתונה של החלונית ביצועים בכלי הפיתוח ל-Chrome:

1. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
2. לוחצים על הכרטיסייה ביצועים.
3. לוחצים על הקלטה.
4. לטעון מחדש את הדף באופן ידני.
5. ממתינים עד שהדף ייטען ואז מפסיקים את ההקלטה.

מידע נוסף זמין במאמר מה חדש בכלי הפיתוח (Chrome 84).

Search Console

דוח מדדי הליבה לבדיקת חוויית המשתמש באתר (Core Web Vitals) החדש ב-Search Console עוזר לכם לזהות קבוצות של דפים באתר שדורשים התייחסות, על סמך נתונים מהעולם האמיתי מ-CrUX. הביצועים של כתובות URL מקובצים לפי סטטוס, סוג מדד וקבוצה של כתובות URL (קבוצות של דפי אינטרנט דומים).

הדוח מבוסס על שלושת המדדים של מדדי ליבה לבדיקת חוויית המשתמש באתר: LCP, FID ו-CLS. אם לכתובת URL אין כמות מינימלית של נתוני דיווח לגבי המדדים האלה, היא לא תיכלל בדוח. כדאי לנסות את הדוח החדש כדי לקבל תמונה מלאה של הביצועים לפי המקור.

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

web.dev

האתר https://pagespeed.web.dev/ מאפשר לכם למדוד את הביצועים של הדף לאורך זמן ומספק רשימה מסודרת של מדריכים ו-codelabs כדי ללמוד איך לשפר אותם. המדידה מופעלת על ידי PageSpeed Insights. כלי המדידה תומך עכשיו גם במדדי הליבה לבדיקת חוויית המשתמש באתר, כמפורט כאן:

תוסף Web Vitals

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

התוסף זמין עכשיו להתקנה מחנות האינטרנט של Chrome. אנחנו מקווים שהוא יועיל לך. נשמח לקבל כל תרומה כדי לשפר את הפרויקט, וכן משוב לגבי המאגר של הפרויקט ב-GitHub.

רגעי שיא

סיימנו! מה אפשר לעשות:

• אתם יכולים להשתמש ב-Lighthouse בכלי הפיתוח כדי לבצע אופטימיזציה של חוויית המשתמש ולוודא שאתם מוכנים להצלחה בעזרת מדדי הליבה לבדיקת חוויית המשתמש בתחום.
• משתמשים ב-PageSpeed Insights כדי להשוות בין הביצועים במדדי הליבה לבדיקת חוויית המשתמש באתר.
• מומלץ לנסות את Chrome User Experience Report API כדי לקבל גישה נוחה לביצועים של המקור וכתובת ה-URL לעומת מדדי הליבה לבדיקת חוויית המשתמש באתר ב-28 הימים האחרונים.
• השתמשו בקטע Experience ובכותרת התחתונה בחלונית Performance (ביצועים) של כלי הפיתוח כדי להתעמק בנתונים ולנפות באגים בהשוואה למדדי ליבה לבדיקת חוויית המשתמש באתר.
• ניתן להשתמש בדוח מדדי הליבה לבדיקת חוויית המשתמש באתר' ב-Search Console כדי לקבל סיכום של ביצועי המקורות בשדה.
• אפשר להשתמש בתוסף Web Vitals כדי לעקוב בזמן אמת אחר ביצועי הדף בהשוואה למדדי הליבה לבדיקת חוויית המשתמש באתר.

בחודש יוני נדון בהרחבה על הכלים של דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) באירוע web.dev Live. כדאי להירשם כדי לקבל עדכונים לגבי האירוע!

~ מאת אליזבת ואדי, WebPerf Janitors