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