אופטימיזציה של חוויית המשתמש היא אחד הגורמים הכי חשובים להצלחה ארוכת טווח של כל אתר באינטרנט. בין אם אתם בעלי עסקים, משווקים או מפתחים, תוכלו להיעזר ב-WebVitals כדי לכמת את חוויית השימוש באתר ולזהות הזדמנויות לשיפור.
סקירה כללית
Web Vitals הוא יוזמה של Google שמטרתה לספק הנחיות אחידות לאותות איכות שחיוניים לשיפור חוויית המשתמש באינטרנט.
לאורך השנים Google סיפקה מספר כלים למדידת ביצועים ולדיווח עליהם. יש מפתחים מומחים בשימוש בכלים האלה, ויש מפתחים אחרים שמתקשים לעמוד בקצב של שלל הכלים והמדדים.
בעלי אתרים לא צריכים להיות מומחים בביצועים כדי להבין את איכות החוויה שהם מספקים למשתמשים שלהם. המטרה של יוזמת Web Vitals היא לפשט את הסביבה, ולעזור לאתרים להתמקד במדדים החשובים ביותר, דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals).
דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals)
מדדי ליבה לבדיקת חוויית המשתמש באתר הם קבוצת משנה של מדדי Web Vitals שרלוונטיים לכל דפי האינטרנט. הם אמורים להימדד על ידי כל בעלי האתרים, והם יופיעו בכל הכלים של Google. כל אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר מייצג היבט ייחודי של חוויית המשתמש, ניתן למדידה בשטח ומשקף את החוויה בעולם האמיתי של תוצאה קריטית שממוקדת במשתמשים.
המדדים שמרכיבים את מדדי הליבה לבדיקת חוויית המשתמש באתר יתפתחו עם הזמן. המערך הנוכחי של שנת 2020 מתמקד בשלושה היבטים של חוויית המשתמש – טעינה, אינטראקטיביות ויציבות חזותית, וכולל את המדדים הבאים (ואת ערכי הסף התואמים שלהם):
- Largest Contentful Paint (LCP): מודד את ביצועי הטעינה. כדי לספק חוויית משתמש טובה, ה-LCP צריך להתרחש תוך 2.5 שניות מהמועד שבו הדף נטען בפעם הראשונה.
- השהיה לאחר קלט ראשוני (FID): מדידת האינטראקטיביות. כדי לספק חוויית משתמש טובה, ה-FID של הדפים צריך להיות עד 100 אלפיות השנייה.
- Cumulative Layout Shift (CLS): מדידת היציבות החזותית. כדי לספק חוויית משתמש טובה, ה-CLS של דפים צריך להיות 0.1 או פחות.
בכל אחד מהמדדים שלמעלה, כדי לוודא שאתם עומדים ביעד המומלץ לרוב המשתמשים, סף טוב למדידה הוא האחוזון ה-75 של טעינות דפים, המפולח בין מכשירים ניידים ומחשבים.
בכלים לבדיקת התאימות של מדדי הליבה לבדיקת חוויית המשתמש באתר, צריך להביא בחשבון מעבר של דף, אם הוא עומד ביעדים המומלצים באחוזון ה-75 לכל שלושת המדדים האלה.
מחזור חיים
מדדים במסלול של מדדי ליבה לבדיקת חוויית המשתמש באתר עוברים מחזור חיים שכולל שלושה שלבים: ניסיוני, בהמתנה ויציב.
בטבלה הבאה אפשר לראות איפה נמצאים כל המדדים הבסיסיים של חוויית המשתמש במחזור החיים שלהם:
כל שלב נועד להבהיר למפתחים איך עליהם לחשוב על כל מדד:
- מדדים ניסיוניים הם מדדי ליבה לבדיקת חוויית המשתמש באתר שעשויים להשתנות באופן משמעותי, בהתאם לבדיקה ולמשוב מהקהילה.
- מדדים בהמתנה הם מדדי ליבה לבדיקת חוויית המשתמש באתר, שעברו את שלב הבדיקה והמשוב ולוח זמנים מוגדר היטב ליציבות.
- מדדים יציבים הם הקבוצה הנוכחית של מדדי ליבה לבדיקת חוויית המשתמש באתר, ש-Chrome מחשיב כחשובים לחוויית משתמש מעולה.
תכונה ניסיונית
כשמפתח נוצר לראשונה ונכנס לסביבה העסקית, הוא נחשב למדד ניסיוני.
מטרת השלב הניסיוני היא להעריך את הכשירות של מדד מסוים, תחילה על ידי חקירת הבעיה שיש לפתור, ואולי אף לחזור ולבחון את המדדים הקודמים שלא הושגו. לדוגמה, המדד Interaction to Next Paint (INP) פותח בתחילה כמדד ניסיוני כדי לתת מענה מקיף יותר לבעיות בביצועים בזמן הריצה באינטרנט, בהשוואה לשיטה השהיה לאחר קלט ראשוני (FID).
השלב הניסיוני של מחזור החיים של דוח המדדים הבסיסיים של חוויית המשתמש גם נועד להעניק גמישות בפיתוח המדד, באמצעות זיהוי באגים ואפילו בדיקת שינויים בהגדרה הראשונית. זה גם השלב שבו המשוב מהקהילה הוא החשוב ביותר.
בהמתנה
כאשר צוות Chrome קובע שמדד ניסיוני קיבל מספיק משוב והוכיח את יעילותו, הוא הופך למדד בהמתנה. מדדים בהמתנה נשמרים בשלב הזה למשך שישה חודשים לפחות, כדי לתת לסביבה העסקית זמן להסתגל. המכשול היחיד שנותר לגבי מדד כדי להתקדם אל מעבר לשלב הממתין הוא להמתין לתקופת המעבר. משוב מהקהילה ממשיך להיות היבט חשוב בשלב הזה, ככל שיותר מפתחים מתחילים להשתמש בו.
אורווה
כשהמדד 'מועמד למדד ליבה לבדיקת חוויית המשתמש באתר' מסתיים, הוא הופך למדד יציב – אם המדדים נמצאים במעקב של מדדי ליבה לבדיקת חוויית המשתמש באתר, המדד הופך למדד ליבה לבדיקת חוויית המשתמש באתר.
יש תמיכה פעילה במדדים יציבים, ויכול להיות שהם יהיו כפופים לתיקוני באגים ולשינויים בהגדרות. המדדים של מדדי הליבה לבדיקת חוויית המשתמש באתר היציבים לא ישתנו יותר מפעם בשנה. כל שינוי במדד ליבה לבדיקת חוויית המשתמש באתר ידווחו באופן ברור בתיעוד הרשמי של המדד, וגם ב-CHANGELOG של המדד. המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) נכללים גם הם בבדיקות.
כלים למדידה ולדיווח של מדדי ליבה לבדיקת חוויית המשתמש באתר
Google מאמינה שמדדי הליבה לבדיקת חוויית המשתמש באתר הם קריטיים לכל חוויות השימוש באינטרנט. כתוצאה מכך, היא מחויבת להציג את המדדים האלה בכל הכלים הפופולריים שלה. בקטעים הבאים מפורט אילו כלים תומכים במדדי הליבה לבדיקת חוויית המשתמש באתר.
כלי שדה למדידת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals)
הדוח לגבי חוויית המשתמש ב-Chrome אוסף נתונים אמיתיים ואנונימיים של מדידות המשתמשים, לגבי כל מדד ליבה לבדיקת חוויית המשתמש באתר. הנתונים האלה מאפשרים לבעלי אתרים להעריך במהירות את הביצועים שלהם בלי שהם יצטרכו לערוך באופן ידני ניתוח נתונים בדפים שלהם, והם מפעילים כלים כמו PageSpeed Insights ודוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) של Search Console.
| LCP | FID | CLS | |
| דוח לגבי חוויית המשתמש ב-Chrome | ✔ | ✔ | ✔ |
| PageSpeed Insights | ✔ | ✔ | ✔ |
| Search Console (דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) | ✔ | ✔ | ✔ |
הנתונים של הדוח לגבי חוויית המשתמש ב-Chrome מספקים דרך מהירה להעריך את הביצועים של אתרים, אבל הם לא מספקים את הטלמטריה המפורטת לכל צפייה בדף, שלרוב נדרשת כדי לאבחן רגרסיה, לעקוב אחריה ולהגיב עליה במהירות. לכן, מומלץ מאוד שאתרים יגדירו מעקב משלהם אחר משתמשים אמיתיים.
מדידת מדדי ליבה לבדיקת חוויית המשתמש באתר ב-JavaScript
אפשר למדוד כל אחד מהמדדים הבסיסיים של חוויית המשתמש ב-JavaScript באמצעות ממשקי API רגילים באינטרנט.
הדרך הקלה ביותר למדוד את כל מדדי הליבה לבדיקת חוויית המשתמש באתר היא באמצעות ספריית JavaScript של נכסי אינטרנט – wrapper קטן ומוכוון לייצור מסביב לממשקי ה-API הבסיסיים לאינטרנט. הוא מודד כל מדד באופן שתואם במדויק לאופן הדיווח שלו בכל הכלים של Google שמפורטים למעלה.
בעזרת ספריית Web-vitals תוכל למדוד כל מדד בקלות, ממש כמו קריאה לפונקציה אחת (עיינו במסמכי התיעוד לקבלת מידע על שימוש מלא ופרטי API):
import {onCLS, onFID, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
אחרי שמגדירים באתר את השימוש בספריית Web-vital כדי למדוד ולשלוח את הנתונים של דוח המדדים הבסיסיים של חוויית המשתמש לנקודת קצה לניתוח נתונים, השלב הבא הוא לצבור נתונים על הנתונים האלה ולדווח עליהם כדי לבדוק אם הדפים עומדים בערכי הסף המומלצים לפחות ל-75% מהביקורים בדף.
לחלק מהספקים של ניתוח נתונים יש תמיכה מובנית במדדים של מדדי ליבה לבדיקת חוויית המשתמש באתר, אבל גם בספקים שלא תומכים במדדים האלה, מומלץ לכלול תכונות בסיסיות של מדדים מותאמים אישית, שמאפשרות למדוד בכלי שלהם את מדדי הליבה לבדיקת חוויית המשתמש באתר.
דוגמה לכך היא דוח מדדי חוויית המשתמש באתר, שמאפשר לבעלי אתרים למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר באמצעות Google Analytics. לקבלת הנחיות למדידת מדדי ליבה לבדיקת חוויית המשתמש באתר באמצעות כלים אחרים, קראו את השיטות המומלצות למדידת מדדי Web Vitals בשטח.
אפשר גם לקבל דוחות על כל אחד מהמדדים הבסיסיים של חוויית המשתמש בלי לכתוב קוד באמצעות תוסף Web Vitals ל-Chrome. התוסף הזה משתמש בספריית web-vitals כדי למדוד כל אחד מהמדדים האלה ולהציג אותם למשתמשים בזמן שהם גולשים באינטרנט.
התוסף הזה יכול לעזור לכם להבין את הביצועים של האתרים שלכם, של האתרים של המתחרים ושל האינטרנט באופן כללי.
| LCP | FID | CLS | |
|---|---|---|---|
| Web-vitals | ✔ | ✔ | ✔ |
| תוסף Web Vitals | ✔ | ✔ | ✔ |
לחלופין, מפתחים שמעדיפים למדוד את המדדים האלה ישירות דרך ממשקי ה-API הבסיסיים באינטרנט יכולים לעיין במדריכי המדדים הבאים כדי לקבל פרטים על ההטמעה:
כלי מעבדה למדידת מדדי ליבה לבדיקת חוויית המשתמש באתר
בראש ובראשונה, כל מדדי הליבה לבדיקת חוויית המשתמש באתר הם מדדי שדות, אבל רבים מהם גם ניתנים למדידה בשיעור ה-Lab.
מדידת ה-Lab היא הדרך הטובה ביותר לבדוק את הביצועים של תכונות במהלך הפיתוח – לפני שהן הופצו למשתמשים. זוהי גם הדרך הטובה ביותר לתעד רגרסיות של ביצועים לפני שהן מתרחשות.
תוכלו להשתמש בכלים הבאים כדי למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר בסביבת שיעור Lab:
| LCP | FID | CLS | |
|---|---|---|---|
| כלי פיתוח ל-Chrome | ✔ | ✘ (יש להשתמש במקום זאת ב-TBT) | ✔ |
| Lighthouse | ✔ | ✘ (יש להשתמש במקום זאת ב-TBT) | ✔ |
אמנם מדידה במעבדה היא חלק חיוני ביצירת חוויות נהדרות, אבל היא לא תחליף למדידה בשטח.
ביצועי האתר עשויים להשתנות באופן דרמטי בהתאם ליכולות המכשיר של המשתמש, לתנאי הרשת שלו, לתהליכים אחרים שפועלים במכשיר ולאופן האינטראקציה שלהם עם הדף. למעשה, הציון של כל אחד מהמדדים של מדדי ליבה לבדיקת חוויית המשתמש באתר יכול להיות מושפע מאינטראקציה של משתמשים. רק מדידת שדות יכולה לספק במדויק את התמונה המלאה.
המלצות לשיפור הציונים
אחרי שמודדים את מדדי הליבה לבדיקת חוויית המשתמש באתר וזיהיתם תחומים שצריך לשפר, השלב הבא הוא ביצוע אופטימיזציה. במדריכים הבאים תוכלו למצוא המלצות ספציפיות לאופטימיזציה של הדפים לפי כל אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר:
Web Vitals אחרים
מדדי הליבה לבדיקת חוויית המשתמש באתר הם מדדים קריטיים להבנה ולמתן חוויית משתמש מעולה, אבל יש גם מדדים חיוניים נוספים.
מדדי Web Vitals האחרים האלה משמשים לעיתים קרובות כ-Proxy או כמדדים משלימים למדדי הליבה לבדיקת חוויית המשתמש באתר, שעוזרים להבין חלק גדול יותר מהחוויה או לסייע באבחון של בעיה ספציפית.
לדוגמה, המדדים Time to First Byte (TTFB) ו-First Contentful Paint (FCP) הם שני היבטים חיוניים של חוויית הטעינה, ושניהם שימושיים לאבחון בעיות ב-LCP (זמני תגובה איטיים של השרת או משאבים לחסימת עיבוד, בהתאמה).
בדומה לכך, מדדים כמו Total Disable Time (TBT) ו-Time to Interactive (TTI) הם מדדים לשיעור ה-Lab שחיוניים לזיהוי ולאבחון של בעיות אינטראקטיביות אפשריות שישפיעו על FID. עם זאת, הם לא נכללים בהגדרה של מדדי הליבה לבדיקת חוויית המשתמש באתר, כי הם לא ניתנים למדידה בשדה, והם גם לא משקפים תוצאה ממוקדת במשתמש.
פיתוח של Web Vitals
מדדי Web Vitals ומדדי ליבה לבדיקת חוויית המשתמש באתר הם האותות הטובים ביותר שזמינים למפתחים לצורך מדידה של איכות החוויה באינטרנט, אבל האותות האלה לא מושלמים וצפויים שיפורים או תוספות בעתיד.
מדדי הליבה לבדיקת חוויית המשתמש באתר רלוונטיים לכל דפי האינטרנט ומוצגים בכלים הרלוונטיים של Google. לשינויים במדדים האלה תהיה השפעה רחבה, ולכן המפתחים צריכים לצפות שההגדרות וערכי הסף של ערכי הליבה באינטרנט יישארו יציבים, ושהעדכונים יקבלו הודעה מראש וקצב שנתי צפוי.
מדדי Web Vitals אחרים הם בדרך כלל ספציפיים להקשר או לכלי, והם עשויים להיות יותר ניסיוניים מאשר המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals). לכן ההגדרות והסכומים של הערכים האלה עשויים להשתנות בתדירות גבוהה יותר.
עבור כל מדדי ה-Web Vitals, השינויים יתועדו בבירור ב-CHANGELOG הציבורי הזה.