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