תהליכי עבודה בדוח ה-Web Vitals הבסיסיים עם הכלים של Google

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

Barry Pollard
Barry Pollard
Addy Osmani
Addy Osmani
Antoine Bisch
Antoine Bisch
Elizabeth Sweeny
Elizabeth Sweeny
Garima Mimani
Garima Mimani

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

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

מדדי הליבה לבדיקת חוויית המשתמש באתר מודדים בצורה הטובה ביותר בשטח

מדדי הליבה לבדיקת חוויית המשתמש באתר נועדו במיוחד למדידת חוויית המשתמשים באתר שלכם – הם מדדים שמתמקדים במשתמשים. כלים מבוססי מעבדה כמו Lighthouse הם כלי אבחון להדגשת בעיות ביצועים פוטנציאליות ושיטות מומלצות. כלים מבוססי-מעבדה פועלים בתנאים מסוימים ומוגדרים מראש, ויכול להיות שהם לא משקפים את המדידות האמיתיות של מדדי הליבה לבדיקת חוויית המשתמש באתר.

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

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

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

Google מודדת את Core Web Vitals באמצעות דוח חוויית המשתמש ב-Chrome (CrUX). זהו מערך נתונים ציבורי שנאסף ממשתמשי Chrome אמיתיים. זהו עמוד התווך של כלים רבים של Google ושל צדדים שלישיים שמדווחים על מדדי הליבה לבדיקת חוויית המשתמש באתר.

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

אם אפשר, כדאי לאסוף את נתוני השדות שלכם

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

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

עם זאת, ייתכן שאתם לא חלק מארגון גדול – או אפילו אם יש לכם אמצעים שמאפשרים לו ליהנות מפתרון של צד שלישי. במקרים כאלה, ספריית web-vitals של Google תעזור לכם לאסוף את כל ה-Web Vitals. עם זאת, אתם אחראים לאופן הדיווח, האחסון וניתוח הנתונים האלה.

אם אתם כבר משתמשים ב-Google Analytics אבל עדיין לא התחלתם לאסוף נתוני שדות משלכם, יכול להיות שתוצג לכם הזדמנות להשתמש בספרייה web-vitals כדי לשלוח אל Google Analytics מדדי אתר שנאספו בשטח ולהשתמש בייצוא של GA4 ל-BigQuery כדי לדווח על הנתונים.

הסבר על הכלים של Google

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

דוח חוויית המשתמש ב-Chrome (CrUX)

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

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

מתי כדאי להשתמש ב-CrUX

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

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

מתי לא להשתמש ב-CrUX

CrUX מייצג רק משתמשי Chrome, וגם במקרים כאלה רק קבוצת משנה של משתמשי Chrome. פתרון RUM מלא יכול לכלול חוויות נוספות ב-Chrome ובדפדפנים אחרים, שבהם הוא תומך במדדי ה-Web Vitals.

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

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

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

PageSpeed Insights (PSI)

PSI הוא כלי שמדווח על נתוני שדות מ-CrUX וגם מ-Lab מ-Lighthouse לגבי דף נתון. לפרטים נוספים, אפשר לעיין בקטעים הספציפיים.

מתי להשתמש ב-PSI

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

ב-PSI יש גם נתונים מ-Lighthouse, שמספקים המלצות שימושיות לשיפור מדדי הליבה לבדיקת חוויית המשתמש באתר – אם המדדים תואמים. כאשר אין התאמה בין הערכים האלה, ההמלצות של Lighthouse עשויות להיות פחות רלוונטיות.

Lighthouse מופעל מהשרת, ולכן ניתן ליצור לו ערך בסיס עקבי יותר מאשר הפעלת Lighthouse מכלי פיתוח.

מתי לא להשתמש ב-PSI

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

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

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

לסיום, במקרים שבהם נתונים ברמת הדף זמינים ב-CrUX, אבל שונים מנתוני ה-Lab של Lighthouse, ייתכן שהערך של ההמלצות מ-Lighthouse יהיה מוגבל. זה יכול לקרות במיוחד בבעיות שקשורות ל-CLS לאחר הטעינה, ובבעיות שקשורות למדדי הליבה לבדיקת חוויית המשתמש באתר (FID ו-INP) כאשר ביקורות מב��ססות-מעבדה הן פחות שימושיות.

Search Console

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

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

מתי כדאי להשתמש ב-Search Console

Search Console מתאים במיוחד למפתחים ולאנשים בתפקידים שלא קשורים למפתחים, כדי להעריך את הביצועים של דפים בחיפוש ושל דפים בדרכים אחרות שלא מתאימות לכלים אחרים של Google. ההצגה של נתוני CrUX וקיבוץ הדפים לפי דמיון מספקים תובנות חדשות לגבי האופן שבו שיפורים בביצועים משפיעים על קטגוריות שלמות של דפים.

מתי לא להשתמש ב-Search Console

יכול להיות ש-Search Console לא יתאים לפרויקטים שבהם משתמשים בכלים שונים של צד שלישי, שמקבצים דפים לפי דמיון או אם אתר לא מיוצג במערך הנתונים של CrUX.

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

Lighthouse

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

Lighthouse-CI הוא כלי קשור שמריץ את Lighthouse במהלך ה-build והפריסה של הפרויקט כדי לעזור בבדיקת רגרסיה של ביצועים. הוא מציג דוח Lighthouse יחד עם בקשות משיכה, ועוקב אחר מדדי הביצועים לאורך זמן.

מתי כדאי להשתמש ב-Lighthouse

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

מתי לא להשתמש ב-Lighthouse

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

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

תוסף Web Vitals

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

מתי כדאי להשתמש בתוסף Web Vitals

כל אדם יכול להשתמש בתוסף Web Vitals כדי להעריך את מדדי הליבה לבדיקת חוויית המשתמש באתר בכל השלבים של מחזור החיים של הדף. זה שימושי בתור תצוגת ביצועים בזמן האינטראקציה עם הדף, בניסיון לגלות בעיות בביצועים – במיוחד בעיות אחרי הטעינה שעשויות להופיע במדדי CLS ו-INP.

באילו מקרים לא להשתמש בתוסף Web Vitals

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

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

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

מתי כדאי להשתמש בחלונית הביצועים

המפתחים צריכים להשתמש בחלונית הביצועים במהלך הפיתוח כדי לקבל תובנות מעמיקות לגבי ביצועי הדפים. האפשרות הזו שימושית במיוחד לניפוי באגים של בעיות רספונסיביות שמשפיעות על FID או INP. ברגע שאנחנו מזהים אינטראקציה עם תגובה גרועה וחוזרת עליה, חלונית הביצועים יכולה לספק שפע של נתונים לגבי מה שקורה בדפדפן כדי לעזור בהבנת הבעיה – מחסימת שרשורים ראשיים ועד לערימות קריאות של JavaScript ועד לעבודות רינדור.

מתי לא כדאי להשתמש בחלונית הביצועים

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

תהליך עבודה של שלושה שלבים לשמירה על התקינות של מדדי הליבה לבדיקת חוויית המשתמש באתר

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

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

שלב 1: הערכת תקינות האתר וזיהוי הזדמנויות לשיפור

מומלץ להתחיל עם נתוני השטח כדי להעריך את תקינות האתר.

  1. להשתמש ב-PageSpeed Insights כדי לראות את המדדים הכוללים של חוויית המשתמש ב-Core Web Vitals שמתייחסים למקור מסוים, ומידע ספציפי על כתובת URL יחידה.
  2. בעזרת Search Console אפשר לזהות דפים שדורשים שיפור, שבהם תכונת קיבוץ הדפים של האתר פועלת היטב.
  3. אם יש לכם נתוני RUM, לרוב זו ��אפשרות הטובה ביותר לזהות דפים ספציפיים או פלחי תנועה מסוימים שיש בהם בעיות.

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

איך מנתחים את ביצועי האתר באמצעות PageSpeed Insights

איך הכלי PageSpeed Insights מציג נתוני CrUX במדדי הליבה לבדיקת חוויית המשתמש באתר של כתובת URL. כל אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר מוצג בנפרד, ובמקביל מקובצים כל מדד של Core Web Vitals 'טוב', 'דרוש שיפור' ו'איטי' סף החיוב של 28 הימים האחרונים.
איך מנתחים את ביצועי האתר באמצעות PageSpeed Insights

הכלי PageSpeed Insights מציג את נתוני CrUX שמתייחסים לנתוני חוויית המשתמש מ-28 הימים האחרונים באחוזון ה-75. כלומר, אם 75% מחוויות המשתמש עומדות בדרישות הסף שהוגדרו למדד מסוים, חוויית המשתמש נחשבת ל'טובה'.

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

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

ב-PSI מוצגים גם כל שלושת מדדי הליבה לבדיקת חוויית המשתמש באתר (LCP, CLS ו-FID) ואת מדד INP בהמתנה, וגם מדדי האבחון של TicketFB ו-FCP. האם אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר נכשל, ובאיזה שיעור? המידע הזה מראה איפה כדאי למקד את המאמצים.

להבין את הקשרים בין המספרים האלה — ��מיוחד לגבי LCP. אם מדד ה-LCP איטי, כמו בדוגמה הזו, אפשר לבחון את הנתונים של 'דברים שאפשר לעשות' (TTD) ו-FCP, שהם גם אבני הדרך של המדד הזה. בדוגמה הזו יש לנו הגדרה של 'דוח מכרזים' של 1.8 שניות, שיהיה קשה מאוד לעמוד בסף המומלץ של 2.5 שניות לערכי LCP טובים. זה מרמז על קצה עורפי איטי (בעיות בשרת או היעדר CDN), רשתות איטיות יותר או הפניות אוטומטיות שמעכבות את בייטים ה-HTML הראשונים. מידע נוסף זמין במדריך לאופטימיזציה של תכונות 'TTDFB'. נוסף על כך, FCP לוקח עוד שנייה אחת, מה שיכול להעיד על רשתות איטיות יותר. מדד LCP לא מופיע זמן רב אחרי שכלי ה-FCP בדוגמה הזו, אפשר להסיק שמשאב ה-LCP עובר אופטימיזציה היטב אחרי שהדף עצמו נטען.

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

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

זיהוי דפים שמניבים ביצועים נמוכים ב-Search Console

הדוח בנושא Core Web Vitals ב-Search Console הדוח מחולק לקטגוריות של מחשבים וניידים, עם תרשימי קו שמפרטים את ההתפלגות של דפים עם מדדי ליבה לבדיקת חוויית המשתמש באתר: 'טוב', 'דרוש שיפור' ו'איטי'. הקטגוריות לאורך זמן.
זיהוי דפים שמניבים ביצועים נמוכים ב-Search Console

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

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

  • מזהים קבוצות דפים בודדות שצריכות שיפור, ואילו קבוצות מספקות חוויית משתמש טובה.
  • אפשר לקבל נתונים מפורטים על ביצועים לפי כתובת URL. הנתונים מקובצים לפי סטטוס, מדד וקבוצות של דפי אינטרנט דומים (למשל, דפים של פרטי מוצרים באתר מסחר אלקטרוני).
  • קבלת דוחות מפורטים עם כתובות URL של קטגוריות בכל קטגוריית איכות של חוויית המשתמש, גם בנייד וגם במחשב.

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

שלב 2: ניפוי באגים וביצוע אופטימיזציה

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

  1. יש להריץ ביקורת Lighthouse כדי לקבל הנחיות ברמת הדף
  2. אתם יכולים להשתמש בתוסף Web Vitals כדי לנתח את מדדי הליבה לבדיקת חוויית המשתמש באתר בזמן אמת.
  3. כדי לנפות באגים בבעיות בביצועים ולבדוק שינויים בקוד, אפשר להשתמש בחלונית הביצועים בכלי הפיתוח ל-Chrome.

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

מגלים הזדמנויות בעזרת Lighthouse

הכלי PageSpeed Insights מפעיל את Lighthouse בשבילכם, אבל לצורך פיתוח מקומי אפשר גם להריץ את Lighthouse מכלי הפיתוח ל-Chrome, כדי לאמת תיקונים באופן מקומי.

דוח Lighthouse בקטע כלי הפיתוח ל-Chrome. הדוח מפרט את הציונים לפי חמש קטגוריות, כאשר הדוח מתמקד ב'ביצועים' בקטגוריה שלה. התוצאות מוצגות בתחתית של חלון הדוח.
דוח Lighthouse

חשוב לוודא שהבדיקה של Lighthouse משחזרת את הבעיות שאתם מנסים לפתור (לדוגמה, בעיות LCP או CLS איטיות). מחוץ לאריזה, מערכת Lighthouse יכולה להעריך רק את חוויית המשתמש במהלך טעינת הדף. מכיוון שזה כלי מעבדה, הוא גם מחריג FID ו-INP לטובת TBT.

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

אפשר לסנן את הביקורות רק לפי מדדי הליבה לבדיקת חוויית המשתמש באתר, שבהם רוצים להתמקד בתיקונים לבעיות שקשורות למדד מסוים:

אפשרויות סינון למדדים מרכזיים באמצעות Lighthouse
אפשרויות סינון של Lighthouse

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

ניתוח בזמן אמת באמצעות תוסף Web Vitals

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

רישום ביומן במסוף התוספים של Web Vitals, שמראה יעד INP, סוג אירוע ופירוט
רישום ביומן במסוף התוספים של Web Vitals

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

הצגת פירוט באמצעות חלונית הביצועים

בחלונית הביצועים בכלי הפיתוח ל-Chrome מוצגים כל ��תנהגות הדפים בפרק זמן מתועד.

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

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

בטראק שינויי פריסה מדגישים שינויים בפריסה ולוחצים עליהם כדי לקבל פרטים נוספים על הרכיבים שהשתנו בניפוי באגים ב-CLS.

גם משימות ארוכות (שיכולות לגרום לבעיות של FID ו-INP) מודגשות במשולשים אדומים.

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

ניפוי באגים בנושא Core Web Vitals בשטח

הכלים לשיעור ה-Lab לא תמיד יכולים לזהות את הסיבה לכל הבעיות בדוח בנושא Core Web Vitals שמשפיעות על המשתמשים. זו אחת מהסיבות לכך שחשוב כל כך לאסוף את נתוני השדות שלכם, כי היא מביאה בחשבון גורמים שלא ניתן לאסוף במסגרת שיעור ה-Lab.

מידע נוסף זמין במאמר בנושא ביצועי ניפוי באגים בשדה.

שלב 3: עוקבים אחר השינויים

אוסף של סמלים לכלים של Google. משמאל לימין, הסמלים מייצגים 'CrUX ב-BigQuery', 'CrUX API', 'PSI API', 'web-vitals.js' ו-'Lighthouse CI' בקצה הימני.
הכלים של Google למעקב אחרי שינויים

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

מעקב אחרי דרישות ביצועים בסביבות של אינטגרציה רציפה (CI)

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

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

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

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

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

סיכום

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