אופטימיזציה של חווית משתמש היא המפתח להצלחה של כל אתר אינטרנט ברשת. בין אם אתם בעלי עסק, אנשי שיווק, או מפתחים, Core Web Vitals יכולים לסייע לכם לכמת את רמת החוויה באתר שלכם ולזהות הזדמנויות לשיפור.
Core Web Vitals היא יוזמה של גוגל המספקת סט הנחיות מאוחד עבור סיגנלים המייצגים איכות וחיוניים לטובת חווית משתמש טובה ונכונה יותר ברשת. במהלך השנים, גוגל סיפקה מספר כלים למדידית ביצועים. חלקם נמצאים בשימוש על ידי מפתחים שנעשו מומחים בכלים אלו, ולעומתם, אחרים המתקשים אולי לעקוב אחר שפע הכלים והמטריקות הקיימים בהקשר.
מכיוון וגוגל מכוונת למקום בו בעלי אתרים יוכלו להבין את איכות החוויה של המשתמשים באתר שלהם בלי להיות מומחי ביצועים, יוזמה זו מפשטת את הנוף עבור אותם בעלי אתרים, ועוזרת לאלו להתמקד במדדים החשובים ביותר. מדדים אלו הינם אותם Core Web Vitals.
Core Web Vitals – LCP, FID & CLS
סיגנלים של חווית משתמש – Page Experience Signals
המיקוד במשתמש וכמה הוא מסופק מתוצאות החיפוש גרמו לגוגל להתמקד באספקט נוסף מעבר לתוכן – אספקט זה הוא חווית המשתמש שהגולש באתר שלכם חווה.
אותם סיגנלים של חווית משתמש (Page Experience Signals) מייצגים סט של מדדים שאינם קשורים לאיכות התוכן באתר, ומשמשים את גוגל בכדי להעריך את חווית המשתמש (UX) של אתר מסויים.
Page Experience Signals – Core Web Vitals
המדדים המתוארים בתמונה כוללים (בין היתר):
- טעינה – Loading
- אינטראטיביות – Interactivity
- מדד יציבות חזותית – Visual Stability
- ידידות למובייל – Mobile Friendliness
- גלישה בטוחה – Safe Browsing
- HTTPS (Connection Encryption)
השלושה הראשונים במדדים אלו נקראים Core Web Vitals ואלו הולכים להצטרף לאחרים ברשימה (הנמצאים בשימוש כבר היום) כמדדים שישפיעו על דירוג האתר בתוצאות החיפוש החל מחודש מאי 2021.
כיצד לשפר את ציוני Core Web Vitals באתר שלכם?
Core Web Vitals אינם רק הגדרה גנרית למדדי UX אליהם גוגל תתייחס כשתעריך איכות של אתר אינטרנטי. אלו גם סט מטריקות עם הסבר מפורט של כיצד אלו נמדדות, ומהם ערכים הנחשבים טובים, ערכים הדורשים שיפור או מדדים שאינם טובים.
1. טעינה – Loading: Largest Contentful Paint (LCP)
זמן הטעינה הסופי של אתר אינו מייצג ערך אוניברסלי אמין בהקשר של חווית משתמש מכיוון ומרבית העמוד בד״כ הוא מתחת לחלקו העליון הקריטי של הדף (BelowTheFold), שאינו נראה ללא ביצוע גלילה.
האינדיקטור LCP מודד את מהירות זמן הטעינה שנתפס בעין המשתמש (Preveived Loading Speed). הערך של זה הוא הזמן הנדרש בכדי לטעון את בלוק הטקסט או את האלמנט הגרפי הגדול ביותר בחלקו העליון והקריטי של הדף (AboveTheFold).
הציון של המדד LCP מוערך כך:
- ציון LCP טוב: תחת 2.5 שניות.
- ציון LCP הדורש שיפור: בין 2.5 ל 4 שניות.
- ציון LCP גרוע: מעל 4 שניות.
LCP score evaluation – Core Web Vitals
הנה עוד מידע על Largest Contentful Paint (LCP).
כיצד לשפר את ציון ה LCP?
למשימות האופטימיזציה הבאות תהיה השפעה על ציוני ה LCP שהאתר שלכם יקבל:
- אופטימיזציה לזמן תגובת השרת – Server Reponse Time.
- אופטימיזציה לתמונות – Optimizing Images.
- אופטימיזציה לפונטים – Optimizing Fonts.
- אופטימיזציה ל CSS Styles.
עוד מידע על אופטימיזציה של LCP תמצאו בקישור הבא.
2. אינטראטיביות – Interactivity: First Input Delay (FID)
טעינה והצגה של אתר היא דבר אחד, אך לגרום לאתר להיות מוכן לעבודה היא נושא אחר. FID, בדיוק כמו LCP, מתייחס למהירות של אתר. הוא מודד את הזמן שלוקח לעמוד להגיב לפעולה כלשהי המתבצעת על ידי המשתמש – כמו למשל לחיצה על כפתור.
הציון של המדד FID מוערך בצורה הבאה:
- ציון FID טוב: תחת 100ms.
- ציון FID הדורש שיפור: בין 100ms ל 300ms.
- ציון FID גרוע: מעל 300ms.
FID score evaluation – Core Web Vitals
כיצד לשפר את ציון ה FID?
למשימות האופטימיזציה הבאות תהיה השפעה על ציוני ה FID שהאתר שלכם יקבל:
- צמצום ההשפעה של קוד צד שלישי.
- צמצום זמן הריצה של קוד ה Javascript באתר.
- צמצום מספר בקשות ה HTTP לשרת ובאופן כללי צמצום משקל האתר (נפח התעבורה).
עוד מידע על אופטימיזציה של FID תמצאו בקישור הבא. מעבר לכך, שימו לב כי כלים מסויימים כמו DevToold או Lighthouse מציגים ערך של Totla Blocking Time (TBT) במקום FID.
3. יציבות חזותית – Visual Stability: Cumulative Layout Shift (CLS)
זהו מדד היציבות החזותית. לבטח נתקלתם בסיטואציה מעצבנת בה אתם באים ללחוץ על אפשרות בתפריט, מזיזים את סמן העכבר למקום הרצוי, ובדיוק לפני שאתם לוחצים התפריט יורד מטה ומופיע לפניכם באנר גדול במקומו ש״גונב״ את הקליק.
CLS הוא קונספט למדידת הערך הטוטאלי של השינויים הפתאומיים, אותם Layout Shifts של אלמנטים בעמוד בזמן שהעמוד נטען או מוצג.
הציון של המדד CLS מוערך באופן הבא:
- ציון CLS טוב: קטן מ 0.1.
- ציון CLS הדורש שיפור: בין 0.1 ל 0.25.
- ציון CLS גרוע: מעל 0.25.
CLS score evaluation – Core Web Vitals
שימו לב כי שלא כמו שני המדדים האחרים, הציון המוצג עבור CLS אינו נמדד בזמן אלא מוצג כמספר אבסולוטי. לעוד מידע על Visual stability: Cumulative Layout Shift (CLS).
כיצד לשפר את ציון ה CLS?
למשימות האופטימיזציה הבאות תהיה השפעה על ציוני ה CLS שהאתר שלכם יקבל:
- הוספת מימדים לאובייקטים של תמונות ושל וידאו.
- שמירת מקום באמצעות CSS לאלמנטים שעתידים להטען.
- המנעות מהוספת תוכן מעל לתוכן קיים לאחר שה DOM נטען.
- המנעות מאנימציות המשנות את מיקומם של אובייקטים.
עוד מידע על אופטימיזציה של CLS תמצאו בקישור זה. מעבר לכך, תנו מבט בפוסט רחב יותר שכתב שי תודר המסביר על מדד היציבות החזותית (CLS) והדרכים לשפר ציון זה.
נתוני שטח מול נתוני מעבדה – Lab vs Field Data
לכל Core Web Vitals של אתר ישנן שני מקורות מידע:
- נתוני מעבדה (Lab Data) – מדידות הנעשות באמצעות כלים מיוחדים.
- נתוני שטח (Field Data) – נאספות במהלך ביקורים של משתמשים אמיתיים עם הדפדפן כרום.
נתוני מעבדה נמדדים באמצעות הדפדפן כרום, Page Speed Insights, Web.dev וכמובן גם על ידי WebPageTest האהוב על כולנו.
ניתן למדוד ולבצע מדידות אלו גם בעצמכם על ידי קוד פתוח שגוגל מספקת.
לעומת זאת, נתוני השטח נאספים על יד גוגל ספציפית, כממוצע של עשרים ושמונה הימים האחרונים. ניתן לקבל נתונים אלו באמצעות Chrome UX Report API – על ידי התחברות בעצמכם או שימוש ב PSI, סרץ׳ קונסול, או אף על ידי הכלי CrUX API. בואו ניתן מבט על כמה מאותם כלים…
כיצד למדוד את הערכים של אותם Core Web Vitals?
כפי שציינו, גוגל מספקת דוקומנטציה וסט של כלים לבדיקת LCP, FIS ו CLS באופן עצמאי. היא מספקת בנוסף גישה חינמית לנתוני השטח הנאספים באמצעות אלפי משתמשים הניגשים לאתר שלכם עם כרום.
גוגל סרץ׳ קונסול גם כן מספק נתונים על אותם Core Web Vitals. קיים גם דו״ח חדש הנקרא Page Experience המספק מידע בהקשר.
אז הנה מספר דרכים למדוד את אותם מדדים הנקראים Core Web Vitals:
1. כלי בדיקת המהירות של גוגל – Page Speed Insights
ממש לאחרונה, הכלי Page Speed Insights החל להציג את נתוני השטח של Core Web Vitals מה Chrome UX Report API, בנוסף למידע המבוסס Lighthouse. אלו נאספים רק עבור עמודים בעלי כמות מידע משמעותית.
אם מעניין אתכם הנושא, הנה סט פוסטים בשני חלקים שכתבתי על Page Speed Insight.
2. WEB.DEV (Web)
גם web.dev, שהוא סוג של extension כלי בדיקת המהירות של גוגל, החל להציג את אותם מדדי Core Web Vitals. אך שימו לב כי כלי זה מציג אך ורק את נתוני המעבדה, כלומר אלו הנמדדים באמצעות בדיקות מהשרת של Web.dev.
3. גוגל סרץ׳ קונסול – Search Console
מהפרספקטיבה של בעל האתר, נראה כי הופעת המידע של Core Web Vitals בגוגל סרץ׳ קונסול היא השימושית ביותר. תחת החלק שיפורים > נתונים בסיסיים על החוויה באינטרנט, התוצאות של נתוני השטח LCP, FID ו CLS החלו להופיע.
בנוסף, משתמשים החלו לקבל בזמן האחרון התראות מסרץ׳ קונסול במידה וקיימת בעיה עם ערכים אלו.
4. כלי המפתחים של כרום – Chrome Developer Tools
בכלי המפתחים של כרום ניתן לבדוק את אותם Core Web Vitals ב לשונית Performnce. תקבלו שם מידע מפורט על ביצועי האתר כולל מידע על אותם מדדים מדוברים. בחלק הנקרא Expirience תמצאו אינפורמציה על שינויי מתווה, כלומר (Layout Shifts (CLS ובחלק Timing תמצאו את ערך ה LCP.
5. WebPageTest (WEB)
הכלי העצמאי הטוב ביותר לבדיקות ביצועים באתרי אינטרנט הוא WebPageTest הנרכש בשלהי 2020 על ידי Catchpoint והחל להציג כם את נתוני ה Core Web Vitals. בנוסף להצגת מדדי LCP, TBT ו CLS, הכלי מספק גם תצוגת Filmstrip המאפשרת להביט בתקציר אנימטיבי של טעינת העמוד עם האפשרות להדגיש שינויים פתאומיים במתווה.
לסיכום
בסביבות 2019 גוגל הכריזה על כוונתה לכלול את מהירות טעינת האתר בנוסחה המחשבת את דירוגו במנוע חיפוש זה (מה שהתבצע בפועל כשנה מאוחר יותר). מפתחי ובעלי האתרים נכנסו לשגעת בעקבות והתמקדו בשיפור זמן הטעינה של האתרים שברשותם בתקופה זו.
נכון להיום, אין זה ברור כמה השפעה יש למהירות טעינת האתר מבחינת הדירוג שלו בתוצאות החיפוש ומבחינת SEO. עם זאת, ההשפעה הפוסיטיבית של הכרזה זו הובילה ללא צל של ספק לחווית משתמש טובה יותר ברחבי האינטרנט עבור כולנו.
אני מקווה שמדריך זה עזר לכם להבין את אותם מדדים חדשים ואף אילו וכיצד להשתמש בכלים שברשותכם בכדי למדוד ולנטר מדדים אלו.
אם אתם מכירים כלים נוספים שמאפשרים מדידה של מדדי Core Web Vitals רשמו לנו בתגובות…
