החלונית תובנות לגבי הביצועים מאפשרת לכם לקבל תובנות פרקטיות על ביצועי האתר שלכם על סמך תרחישים לדוגמה.
סקירה כללית
בחלונית תובנות לגבי הביצועים אפשר לבצע את הפעולות הבאות:
- תיעוד ומדידה של ביצועי טעינת הדף
- הצגת מדדי הביצועים של Web Vitals
- הצגת הפעילות ברשת.
- סימולציה של מהירויות איטיות יותר של המעבד (CPU) והרשת.
- לייבא ולייצא הקלטות.
למה כדאי ליצור לוח חדש?
החלונית החדשה תובנות לגבי הביצועים היא ניסוי שמטפל ב-3 הבעיות האלה למפתחים במהלך העבודה עם חלונית הביצועים הקיימת:
- יותר מדי מידע. בממשק המשתמש החדש, בחלונית תובנות לגבי ביצועים הנתונים מוצגים בצורה יעילה יותר, ומוצג רק מידע רלוונטי.
- קשה להבחין בין תרחישי שימוש. בחלונית תובנות לגבי הביצועים יש תמיכה בניתוח מבוסס-תרחיש לדוגמה. בשלב הזה, הכלי תומך רק בתרחיש לדוגמה של טעינה של דף, אבל בעתיד נוסיף תרחישי לדוגמה נוספים על סמך המשוב שלכם, למשל אינטראקטיביות.
- כדי להשתמש בהם בצורה יעילה, צריך ידע מעמיק באופן שבו דפדפנים פועלים. בחלונית תובנות לגבי הביצועים מודגשות התובנות העיקריות בחלונית תובנות, עם משוב מעשי לפתרון בעיות.
מבוא
במדריך הזה מוסבר איך למדוד ולהבין את ביצועי טעינת הדפים באמצעות החלונית תובנות לגבי ביצועים. אפשר להמשיך לקרוא או לצפות בגרסת הסרטון של המדריך הזה למעלה.
פתיחת החלונית 'תובנות לגבי הביצועים'
- פותחים את כלי הפיתוח.
לוחצים על אפשרויות נוספות > כלים נוספים > תובנות לגבי ביצועים.
לחלופין, אפשר להשתמש בתפריט הפקודות כדי לפתוח את החלונית תובנות לגבי ביצועים.
הקלטת ביצועים
בחלונית תובנות לגבי הביצועים אפשר לתעד ביצועים כלליים וביצועים שמבוססים על תרחישי שימוש (לדוגמה, טעינת דף).
- פותחים את דף הדגמה הזה בכרטיסייה חדשה, ובדף פותחים את החלונית 'תובנות לגבי ביצועים'.
אפשר לווסת את הרשת ואת המעבד (CPU) בזמן ההקלטה. במדריך הזה, מסמנים את האפשרות Disable cache (השבתה של המטמון) ומגדירים את CPU (מעבד) ל-4x slowdown (האטה פי 4) בתפריט הנפתח:
לוחצים על מדידת טעינת הדף. כלי הפיתוח מתעדים מדדי ביצועים בזמן הטעינה מחדש של הדף, ולאחר מכן מפסיקים את ההקלטה באופן אוטומטי כמה שניות אחרי שטעינה של הדף מסתיימת.
הפעלה חוזרת של הקלטת ביצועים
משתמשים בפקדים שלמטה כדי לשלוט בהפעלה החוזרת של ההקלטה.
כאן ניתן לראות דוגמה לאופן שבו עושים זאת.
- לוחצים על הפעלה כדי להפעיל את ההקלטה.
- לוחצים על השהיה כדי להשהות את ההפעלה החוזרת.
- משנים את מהירות ההפעלה באמצעות התפריט הנפתח.
- לוחצים על הצגה או הסתרה של התצוגה המקדימה החזותית.
ניווט בהקלטת ביצועים
התצוגה של DevTools תתרחק באופן אוטומטי כדי להציג את ציר הזמן המלא של ההקלטה. אפשר לנווט בהקלטה באמצעות הגדלת התצוגה והזזת ציר הזמן.
כדי להגדיל או להקטין את התצוגה ולהזיז את ציר הזמן שמאלה וימינה, משתמשים בלחצני הניווט המתאימים:
- לוחצים על ציר הזמן כדי להזיז את פס ההפעלה ולראות פריים מסוים.
- כדי לשנות את מרחק התצוגה, לוחצים על הלחצנים הגדלת התצוגה ו- הקטנת התצוגה בתחתית המסך. במקרה כזה, התצוגה תתרחב או תצטמצם בהתאם לסמן הווידאו.
- גוררים את סרגל הגלילה האופקי שלמטה כדי להזיז את ציר הזמן שמאלה וימינה.
לחלופין, אפשר להשתמש במקשי קיצור. לוחצים על הלחצן כדי להציג את קיצורי הדרך.
כשמשתמשים בקיצורי דרך, משנים את מרחק התצוגה בהתאם לסמן העכבר.
הצגת תובנות לגבי הביצועים
קבלת רשימה של תובנות לגבי הביצועים בחלונית תובנות. לזהות ולתקן בעיות אפשריות בביצועים.
מעבירים את העכבר מעל כל אחת מהתובנות כדי להדגיש אותן בפסים הראשיים.
לוחצים על תובנה, למשל הבקשה לחסימת הרינדור, כדי לפתוח אותה בחלונית פרטים. כדי להבין את הבעיה לעומק, כדאי לעיין בקטעים קובץ, בעיה, איך פותרים את הבעיה ועוד.
הצגת מדדי הביצועים של Web Vitals
Web Vitals הוא יוזמה של Google שנועדה לספק הנחיות מאוחדות לגבי אותות איכות שחיוניים לשיפור חוויית המשתמש באינטרנט.
המדדים האלה מוצגים בחלונית ציר הזמן ובחלונית תובנות.
כדי לקבל מידע נוסף על המדדים, מעבירים את העכבר מעל התובנות בציר הזמן.
זיהוי עיכובים בזמן הטעינה של רכיב התוכן הכי גדול (LCP)
המהירות שבה נטען רכיב התוכן הכי גדול (LCP) הוא אחד ממדדי מדדי הליבה לבדיקת חוויית המשתמש באתר. המדד הזה מדווח על זמן העיבוד של התמונה או של בלוק הטקסט הגדול ביותר שגלוי באזור התצוגה, ביחס לזמן שבו הטעינה של הדף התחילה בפעם הראשונה.
ציון LCP טוב הוא 2.5 שניות או פחות.
אם עיבוד הרכיב הנראה הגדול ביותר בדף נמשך זמן רב יותר, תופיע תגית LCP עם ריבוע צהוב או משולש אדום בציר הזמן.
כדי לפתוח את החלונית פרטים, לוחצים על תג ה-LCP בציר הזמן או בחלונית תובנות שמשמאל. בחלונית אפשר לגלות את הסיבות האפשריות לעיכובים והצעות לתיקון הבעיה.
בדוגמה הזו, בקשה חוסמת את העיבוד, וניתן להחיל סגנונות קריטיים בקוד כדי לפתור את הבעיה. מידע נוסף זמין במאמר הסרת משאבים שחוסמים עיבוד.
כדי להציג את חלקי המשנה של זמן הטעינה המקורי של דף האינטרנט, גוללים למטה לקטע פרטים > פירוט זמני טעינה.
זמן הרינדור של LCP מורכב מהחלקים המשניים הבאים:
| חלק משנה LCP | תיאור |
|---|---|
| זמן עד בייט ראשון (TTFB) | הזמן מהרגע שבו המשתמש מתחיל את הטעינה של הדף ועד שהדפדפן מקבל את הבייט הראשון בתגובה של מסמך ה-HTML. |
| השהיה של טעינת משאבים | דלתא בין TTFB לבין המועד שבו הדפדפן מתחיל לטעון את משאב ה-LCP. |
| זמן הטעינה של משאבים | משך הזמן שנדרש לטעינה של משאב ה-LCP עצמו. |
| עיכוב בעיבוד הרכיב | ההפרש בין הזמן שבו משאב ה-LCP מסיים את הטעינה לבין הזמן שבו רכיב ה-LCP עבר רינדור מלא. |
אם אלמנט LCP לא מחייב טעינה של משאבים כדי להציג אותו, הזמן והעיכוב של טעינה המשאבים יושמטו. לדוגמה, אם האלמנט הוא צומת טקסט שעבר רינדור בגופן מערכת.
הצגת הפעילות של שינויי הפריסה
הצגת הפעילות של שינויי הפריסה במסלול שינויי פריסה.
שינויי הפריסה מקובצים בחלון סשן. בדוגמה, יש שני חלונות סשנים. יש רווחים בין החלונות של הסשנים.
Cumulative Layout Shifts (CLS) הוא אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר. בעזרת המעקב אחרי שינויי פריסה תוכלו לזהות בעיות פוטנציאליות ואת הסיבות לשינויי פריסה.
כשמשפרים את מדד ה-CLS, תמיד כדאי להתחיל בחלון הסשנים הגדול ביותר. בדוגמה שלנו, חלון הסשן 1 הוא החלון הגדול ביותר, על סמך צבע הרקע והרמה שלו.
לחיצה על צילום מסך מאפשרת לראות את הפרטים של שינוי הפריסה, לזהות את הסיבות האפשריות לכך ואת הרכיבים שהושפעו.
בדוגמה שלנו, שורש הבעיה האפשרי הוא מדיה לא בגודל. כדי ללמוד איך לפתור את הבעיה, אפשר לעיין במאמר אופטימיזציה של Cumulative Layout Shift.
הסבר על הציון של שינויי הפריסה
כדי להבין איך נקבעות הציונים, אפשר להיעזר בקטע Window בחלונית Details. חלון מראה לאיזה חלון סשן שייך שינוי הפריסה הנוכחי.
אם כל הדף השתנה, הציון המקסימלי של כל שינוי בפריסה הוא 1. בדוגמה שלנו, השינוי הראשון בפריסת הדף קיבל ציון 0.15. לשינוי הפריסה השני קיבל ציון של 0.041.
הציון הכולל של חלון הסשן הזה הוא 0.19. על סמך סף ה-CLS, נדרש שיפור. צבע הרקע של חלון הסשן משקף את אותו הדבר.
תרשים הרקע של חלון הסשן גדל עם הזמן. הציון המצטבר של שינוי הפריסה משקף את העלייה באותו זמן.
הצגת הפעילות ברשת
הצגת הפעילות ברשת במסלול רשת. אפשר להרחיב את מסלול הרשת כדי להציג את כל פעילויות הרשת וללחוץ על כל פריט כדי להציג את הפרטים.
הצגת פעילות של כלי הרינדור
אפשר לראות את פעילות העיבוד במסלול רינדור. אפשר להרחיב כל כלי לעיבוד כדי להציג את הפעילויות וללחוץ על כל פריט כדי להציג את הפרטים שלו.
הצגת פעילות GPU
הצגת הפעילות של GPU במסלול GPU. הטראק של ה-GPU מוסתר כברירת מחדל. כדי להפעיל אותה, צריך לסמן את האפשרות GPU בהגדרות.
הצגת תזמוני משתמש
כדי לקבל מדדי ביצועים מותאמים אישית, אפשר להשתמש בתזמון משתמש ולהציג את התזמונים באופן חזותי באמצעות המסלול תזמון. מידע נוסף זמין במאמר User Timing API.
כדאי לעיין בדף ההדגמה הזה, שבו מחושב הזמן שחלף מתחילת הטעינה של הטקסט.
כדי להציג את זמני הפעילות של המשתמשים:
- מסמנים מקומות באפליקציה באמצעות
performance.mark(). - מודדים את הזמן שחלף בין הסימנים באמצעות
performance.measure(). - תיעוד ביצועים.
- אפשר לראות את המדידות במסלול Timings. אם אתם לא רואים את הטראק, כדאי לבדוק את האפשרות תזמוני משתמש בהגדרות.
- כדי להציג את הפרטים, לוחצים על תזמון הטראק.
התאמה אישית של ממשק המשתמש
כדי להתאים אישית את ציר הזמן ואת הטראקים, לוחצים על סמל ההגדרות בחלונית ומסמנים את האפשרויות המועדפות.
ייצוא הקלטה
כדי לשמור את ההקלטה, לוחצים על ייצוא .
ייבוא הקלטה
כדי לטעון הקלטה, בוחרים באפשרות ייבוא .
מחיקת הקלטה
כדי למחוק הקלטה:
- לוחצים על Delete. נפתחת תיבת דו-שיח לאישור.
- בתיבת הדו-שיח, לוחצים על Delete כדי לאשר את המחיקה.