תאריך פרסום: 17 בספטמבר 2024
בפוסט הקודם התמקדנו בשלוש תכונות חדשות שיעזרו לכם להתאים אישית את תהליכי העבודה שלכם בנושא ביצועים ב-DevTools. השיפורים הארגונומיים האלה היו רק ההתחלה של המאמץ הרב-שנתי שלנו להפוך את כלי הפיתוח לקל יותר ולאפשר לבצע אופטימיזציה של מדדי הליבה לבדיקת חוויית המשתמש באתר בקלות רבה יותר. היום אנחנו משיקים את הקבוצה הבאה של התכונות: דף נחיתה חדש לגמרי של חלונית הביצועים, עם תצוגה בזמן אמת של הביצועים המקומיים של המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals).
בפוסט הזה נבחן מקרוב כל אחת מהתכונות החדשות:
- ביצועים מקומיים של מדדי הליבה לבדיקת חוויית המשתמש באתר (Core Web Vitals) בזמן אמת
- נתונים על חוויית המשתמש בפועל
- המלצות להגדרת הסביבה המקומית
- מידע שיעזור לכם לשחזר בעיות
ביצועים מקומיים בזמן אמת של מדדי הליבה לבדיקת חוויית המשתמש באתר
היכולת למדוד את הביצועים של חוויית המשתמש המקומית היא חלק קריטי בכל תהליך ניפוי באגים של מדדי הליבה לבדיקת חוויית המשתמש. זה יכול להשפיע על היכולת לשחזר בעיות של משתמשים אמיתיים. עם זאת, לא תמיד היה קל למדוד את הביצועים המקומיים.
בעבר, בחלונית 'ביצועים' ב-DevTools הוצג ציר זמן מפורט של בקשות רשת ופעילות של מעבד (CPU). זהו כלי שימושי מאוד לניפוי באגים בביצועים. עם זאת, יכול להיות שיהיה קשה לשחזר בעיות בביצועים כי לא תדעו אם הביצועים נמוכים עד לסיום ההקלטה. כפי שלמדנו מהתוסף של מדדי Web Vitals, גישה לביצועים המקומיים של המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) ב-DevTools היא שינוי משמעותי. לכן, לקחנו את כל מה שלמדנו מהתוסף והחלטנו להטמיע את התכונות האלה ישירות בחלונית'ביצועים'.
בפעם הראשונה, כל מדדי הליבה לבדיקת חוויית המשתמש באתר זמינים בחלונית 'ביצועים'. פותחים את החלונית 'ביצועים' ורואים מיד את הביצועים של חוויית המשתמש המקומית – בלי צורך בהקלטה. למעשה, אתם אפילו לא צריכים לפתוח את DevTools. המדדים נאספים ברקע וזמינים בכל שלב. הכלי הזה שימושי בכל פעם שאתם לא מנסים לנפות באגים בבעיה ספציפית, אבל משהו נראה איטי ואתם רוצים להבין למה.
בקטע מדדים מקומיים בחלונית מוצגת תצוגה בזמן אמת של מדדי הליבה לבדיקת חוויית המשתמש באתר ברמת האתר: 'הצגת התוכן הכי גדול', 'הזזות Cumulative Layout Shift' ו'מאינטראקציה ועד הצגת התגובה'. המדדים האלה יעודכנו בזמן אמת כשאתם טוענים את הדף ומקיימים איתו אינטראקציה. בנוסף, הם מסומנים בצבעים שונים בהתאם לסף שלהם לביצועים טובים או גרועים, כך שקל יותר לזהות בעיות בביצועים בזמן אמת.
נתונים על חוויית המשתמש בפועל
אופטימיזציה של בעיות בביצועים שרוב המשתמשים אף פעם לא נתקלים בהן היא לא תמיד השימוש הטוב ביותר בזמן שלכם. באופן דומה, אם חוויית השימוש המקומית מהירה בצורה לא מציאותית, סביר להניח שאתם לא רואים בעיות מסוימות בעולם האמיתי. לכן, כדי לקבל החלטה מושכלת יותר לגבי האופן שבו כדאי להשקיע את הזמן שלכם, כדאי להשוות את הביצועים המקומיים לנתונים של חוויית משתמש אמיתית מהשטח.
חלונית הביצועים מאפשרת לכם עכשיו לראות את נתוני המשתמשים האמיתיים לצד חוויית השימוש המקומית. הנתונים מבוססים על CrUX API הציבורי, שהוא צבירת נתונים של 28 יום של חוויות משתמשים אמיתיים בדף אינטרנט ובמקור נתונים נתונים. כדי להפעיל אותה, לוחצים על הגדרה בקטע נתוני שדה ופועלים לפי ההוראות בתיבת הדו-שיח של ההגדרה.
חשוב לזכור שכתובות URL ומקורות נפרדים (אתרים שלמים) חייבים לעמוד בקריטריונים מסוימים לזכאות כדי להיכלל במערך הנתונים של CrUX. חוויית המשתמש גם מצטברת לפי סוגי מחשבים ומכשירים ניידים כשיש מספיק נתונים. כלי הפיתוח ינסו כמיטב יכולתם להציג באופן אוטומטי את הנתונים הרלוונטיים ביותר לחוויית השימוש המקומית שלכם, ובהתאם לכך, כתובת ה-URL וסוג המכשיר שמוגדרים כברירת מחדל יהיו אלה שזמינים. אם אין מספיק נתונים ברמת המחשב או ברמת המכשיר הנייד, המערכת תנסה להציג נתונים שנצברו מכל סוגי המכשירים.
בנוסף לערך האחוזון ה-75, אפשר להעביר את העכבר מעל כל מדד כדי לראות את הפרופורציות של חוויות המשתמשים האמיתיים בכל דירוג. בדוגמה הזו, חוויית Largest Contentful Paint המקומית איטית באופן לא אופייני, בדומה ל-12% בלבד מחוויית המשתמשים האמיתיים.
בעזרת הנתונים האלה, תוכלו לקבל תמונה ברורה יותר של מידת הייצוגיות של החוויה המקומית שלכם, ולשפר אותה כדי שתהיה דומה יותר לחוויית המשתמש הרגילה.
המלצות להגדרת הסביבה המקומית
יש הרבה הבדלים בין נתונים מהמעבדה לנתונים מהשדה, והם מורכבים מכל הדרכים שבהן אפשר לגשת לדף ולנהל איתו אינטראקציה. אתם יכולים להגדיר את הסביבה שלכם כדי להביא בחשבון חלק מההבדלים האלה ולשפר את מידת הייצוגיות של החוויה המקומית.
כשנתוני השדה מופעלים וזמינים, בקטע הגדרות הקלטה יוצג הצעה לדמות את סוג המכשיר הנפוץ ביותר שבו משתמשים אמיתיים משתמשים. הפעלת מצב מכשיר מאפשרת לדמות את גודל אזור התצוגה של מכשיר נייד. בממשקים עם תגובה דינמית, יכול להיות שיהיה שינוי ברכיב שמשוייך ל-Largest Contentful Paint, ויכול להיות שיהיו להם מאפייני ביצועים שונים מאוד. בנוסף, ייתכן שפריטים מסוימים יוצגו בפריסת המכשיר הנייד, כמו תפריט ניווט שרק משתמשים בניידים יכולים להשתמש בו, או שיהיו שינויים ייחודיים בפריסת הדף שלא מתרחשים בחלונות תצוגה גדולים יותר.
יכול להיות שבקטע הזה יופיע גם המלצה להגדרה ספציפית של הגבלת קצב נתונים ברשת, כמו 4G איטי. ההמלצות לגבי הרשת מבוססות על המדד זמן הנסיעה הלוך ושוב באחוזון ה-75, שנצבר מחוויות של משתמשים אמיתיים בדף או באתר הזה. מהירויות רשת איטיות יותר יכולות להפוך את מאפייני ביצועי הטעינה של הדף לריאליסטיים יותר – גם למשתמשים במחשבים שולחניים וגם למשתמשים בניידים – וכך קל יותר לזהות הזדמנויות לשיפור. חשוב לזכור ששינויים בפריסה נספרים במדד 'שינויים מצטברים בפריסה' רק אם הם לא מתרחשים תוך 500 אלפיות השנייה ממועד האינטראקציה. אם שינוי פריסה ביוזמת המשתמש הוא תוצאה של בקשת רשת, הגבלת רוחב הפס של הרשת עשויה להיות הדרך היחידה לחשוף אותו באופן מקומי.
צמצום קצב העבודה של המעבד היא דרך נוספת לשפר את הביצועים של המכשיר המקומי כך שיתאימו יותר למשתמשים אמיתיים. ויסות הנתונים של המעבד (CPU) מדמה בצורה טובה יותר את הביצועים האיטיים יחסית של מכשירים ניידים, כאשר במכונות מהירות יותר נדרש ויסות נתונים משמעותי יותר. לאחרונה נוספה ל-DevTools האפשרות להאט את המעבד פי 20. האפשרות הזו שימושית במיוחד במחשבים שולחניים עם ביצועים גבוהים שבהם מפתחים משתמשים לעיתים קרובות. מעבד עם ויסות נתונים יפעל לאט יותר, וכתוצאה מכך סקריפטים יהיו איטיים יותר, ויש סיכוי גבוה יותר שהם יהיו משימות ארוכות שיגרמו לבעיות במדידה 'מאינטראקציה ועד הצגת התגובה'. מאותה סיבה, גם המדדים האחרים של מדדי חוויית המשתמש הבסיסיים (Core Web Vitals) עשויים להיות מושפעים מביצוע איטי יותר של סקריפט, במיוחד אם הוא חוסם את העיבוד של קטע התוכן הגדול ביותר או של רכיבים שמשנים את הפריסה.
הגדרת הסביבה המקומית עם הגדרות ריאליסטיות יותר של שדה התצוגה, הרשת ועיבוד הנתונים (CPU) אמורה לחשוף בעיות ביצועים נוספות שלא הייתם מודעים אליהן אחרת. בנוסף, ההמלצות שמבוססות על נתונים של משתמשים אמיתיים מאפשרות לכם להתמקד יותר באיתור הבעיות האלה ובפתרון שלהן.
מידע שיעזור לכם לשחזר בעיות
הביצועים המקומיים תלויים במידה רבה בהגדרות הסביבה ובאופן האינטראקציה שלכם עם הדף. לדוגמה, בדף אינטרנט טיפוסי, סביר פחות שהאלמנט של Largest Contentful Paint יהיה תמונה בגדלים של אזור התצוגה בנייד. הקלדה של תו יחיד בשדה טקסט עשויה להיות מהירה, אבל הקלדה של הרבה תווים ברצף מהיר עלולה לגרום לזמן ארוך מהרגיל מהקלדה לאינטראקציה באתר (INP). כדי להבין את הנושא הזה ולשחזר חוויות נוספות, זמין מידע נוסף על המדדים.
ברכיב ה-LCP שמשויך למדד 'המהירות שבה נטען רכיב התוכן הכי גדול' מוצג קישור לרכיב עצמו. כשמעבירים את העכבר מעל הקישור, הרכיב בדף מודגש. לחיצה על הקישור תוביל אתכם לחלונית Elements (רכיבים), שבה תוכלו לראות את הרכיב בהקשר המלא של המסמך.
הקטע אינטראקציות הוא יומן בזמן אמת של כל האינטראקציות שעומדות בדרישות שמתרחשות בזמן שכלי הפיתוח פתוחים. כשאתם מקלידים, מקישים או לוחצים, כל אינטראקציה מתווספת ליומן עם מידע נוסף שיעזור לכם להבין טוב יותר מה קרה ואיך אפשר לשחזר את הבעיה.
בנוסף לסוג האינטראקציה, שהוא אירוע של סמן או של מקלדת, תוצג הפניה ליעד האינטראקציה. בדומה לרכיב LCP, יעד האינטראקציה עצמו הוא אינטראקטיבי, וניתן להעביר מעליו את העכבר כדי להדגיש אותו בדף או ללחוץ עליו כדי לראות אותו בחלונית 'רכיבים'. מוצגת גם זמן האחזור של האינטראקציה, באמצעות אותו קידוד צבעים לפי ערכי הסף של המדד 'מאינטראקציה ועד הצגת התגובה', כדי שיהיה קל יותר לזהות את הפריטים האיטיים ביותר.
כשאתם מצליחים לשחזר את בעיית הביצועים שאתם מנסים לנפות את הבאגים שלה, אתם מוכנים להתחיל ליצור פרופיל. בקטע השלבים הבאים, לוחצים על הלחצן תיעוד וטעינה מחדש כדי לנפות באגים בבעיות שקשורות לביצועים של טעינת הדף, כמו Largest Contentful Paint ו-Cumulative Layout Shift בזמן הטעינה. כדי לנפות באגים בבעיות שמתרחשות כתוצאה מאינטראקציות של משתמשים, אפשר להשתמש בלחצן הקלטה כדי ליצור פרופיל של הדף תוך כדי שינוי ידני של אינטראקציות איטיות או שינויי פריסה לאחר טעינת הדף.
המאמרים הבאים
שימוש בתהליכי העבודה שלכם לשיפור הביצועים על סמך נתונים מקומיים בזמן אמת ונתונים של משתמשים אמיתיים מהשטח יכול לעזור לכם להחליט אם להשקיע יותר או פחות מאמץ בניפוי באגים ובאופטימיזציה של מדד. כדאי להשתמש בנתונים האלה כדי לשנות את הסביבה המקומית כך שתתאים בצורה ריאליסטית יותר לסוגים של המכשירים של המשתמשים, למהירויות המעבד או להגדרות הרשת שלהם, כדי לשחזר בצורה טובה יותר את בעיות הביצועים שלהם.
משתמשים בתוסף Web Vitals בטח מכירים הרבה מהתכונות האלה, ולכן יכול להיות שאתם תוהים מה המשמעות של זה לתוסף. בשבועות הקרובים נשתף מידע נוסף על ההשפעה של השינויים האלה על התוסף.
אנחנו רק בתחילת התהליך של שיפורים בחלונית הביצועים, ועוד הרבה שיפורים נוספים בדרך. בקרוב נפרסם כאן עדכון נוסף, אבל עד אז מומלץ לנסות את כל התכונות החדשות האלה בחלונית 'ביצועים' ולספר לנו מה דעתכם. אם יש לך משוב, נשמח לקרוא את התגובות שלך בבעיה הציבורית.