חלונית הביצועים: ניתוח הביצועים של האתר

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

סקירה כללית

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

אפשר להשתמש בחלונית Performance כדי:

• הקלטת פרופיל ביצועים.
• לשנות את הגדרות הצילום.
• ניתוח של דוח ביצועים.

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

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

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

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

1. פותחים את כלי הפיתוח.
2. פותחים את תפריט הפקודות על ידי הקשה על:
3. ‫macOS: ‏ Command+Shift+P
4. ‫Windows, ‏ Linux, ‏ ChromeOS: ‏ Control+Shift+P
5. מתחילים להקליד Performance panel, בוחרים באפשרות Show Performance panel (הצגת חלונית הביצועים) ומקישים על Enter.

צפייה בנתוני ה-Web Vitals הבסיסיים בזמן אמת

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

אם אתם מבצעים אינטראקציה עם הדף, בחלונית Performance מתועדים גם מהירות התגובה לאינטראקציה באתר (INP) המקומי והציון שלו. בנוסף ל-LCP ול-CLS, המדדים האלה מספקים סקירה כללית מלאה של המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) של הדף, באמצעות החיבור לרשת והמכשיר שלכם.

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

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

השוואה בין החוויה שלכם לבין החוויה של המשתמשים

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

כדי להוסיף נתונים לשדה:

1. בקטע ביצועים > השלבים הבאים > נתוני שדה, לוחצים על הגדרה.

   

2. בתיבת הדו-שיח Configure field data fetching (הגדרת אחזור נתוני שדות), מעיינים בגילוי נאות בנושא פרטיות ולוחצים על Ok (אישור).

   מתקדם: הגדרת מיפוי בין סביבות פיתוח וייצור...

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

   1. בתיבת הדו-שיח, מרחיבים את הקטע מתקדם ולוחצים על + חדש.

   2. בטבלת המיפוי, מזינים את כתובות ה-URL של סביבת הפיתוח וסביבת הייצור ולוחצים על +.

      

      לדוגמה, מיפוי של http://localhost:8080 ל-https://example.com יציג נתוני שדה עבור example.com/page1 כשעוברים אל localhost:8080/page1.

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

      כדי לשנות את ההגדרות של אחזור נתוני השדות אחרי ההגדרה, לוחצים על נתוני שדות > הגדרה.

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

   

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

הגדרת הסביבה כך שתתאים יותר לצרכים של המשתמשים

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

כדי להגדיר את הסביבה:

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

   

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

2. כדי להתאים את הגדרת הסביבה לדוגמה הזו:

   1. מגדירים את אזור התצוגה לאחד מגודלי המסך הנפוצים (לדוגמה, 720p או 1080p). כדי לבצע אמולציה של מכשירים ספציפיים וגדלי מסך ספציפיים, אפשר להשתמש במצב מכשיר בחלונית רכיבים.
   2. ‫82% מהמשתמשים באתר בדוגמה הזו משתמשים במחשבים כדי לגלוש. כדי לוודא שאתם משווים את ציוני המדדים המקומיים לנתוני השדה הנכונים, אתם יכולים לבחור באפשרות מחשב מהרשימה הנפתחת נתוני שדה > מכשיר.
   3. בקטע הגדרות סביבה, מגדירים את הרשימה הנפתחת רשת, למשל 4G מהיר, ואת הרשימה הנפתחת מעבד, למשל האטה פי 20. בנוסף, כדאי check_box את האפשרות השבתת המטמון ברשת באותו קטע.

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

   

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

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

• אופטימיזציה של LCP
• אופטימיזציה של INP
• אופטימיזציה של CLS

איך יוצרים ומנתחים דוח ביצועים

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

הקלטת פרופיל ביצועים

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

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

שינוי הגדרות הצילום

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

בתפריט הגדרות הצילום, בוחרים באפשרויות הבאות:

• השבתה של דגימות JavaScript: השבתה של תיעוד מחסניות הקריאות של JavaScript שמוצגות בטראק הראשי שנקראות במהלך ההקלטה. יפחית את תקורה הביצועים.
• הפעלת אינסטרומנטציה מתקדמת של צביעה (איטית): תיעוד של אינסטרומנטציות צבעים מתקדמות. פוגע באופן משמעותי בביצועים.
• הפעלת נתונים סטטיסטיים של סלקטור ב-CSS (איטי): תיעוד הנתונים הסטטיסטיים של הסלקטור ב-CSS. פוגע באופן משמעותי בביצועים.
• ויסות נתונים (throttle) של מעבד (CPU): הדמיה של מהירויות מעבד איטיות יותר.
• הגבלת רוחב פס: סימולציה של מהירויות רשת איטיות יותר.

ניתוח של דוח ביצועים

במדריך המלא לניתוח תיעוד של ביצועים מוסבר איך להשתמש בחלונית Performance.

בטבלה הבאה מפורטים הנושאים מהמדריך, וגם מסמכים מועילים אחרים:

כדי להבין איך לנווט בדוח:

• ניווט בהקלטה
• פעילויות חיפוש
• מעקב אחרי מי שיזם את האירוע

שימוש בתובנות לגבי הביצועים כדי לקבל תובנות פרקטיות לגבי הביצועים של האתר:

• תובנות לגבי הביצועים

כדי ללמוד איך להתמקד במה שחשוב לתהליך העבודה:

• שינוי הסדר של הרצועות והסתרתן
• הסתרת פונקציות והצאצאים שלהן בתרשים הלהבות
• יצירת נתיב ניווט ומעבר בין רמות זום

מידע על הכרטיסיות Bottom-up,‏ Call tree ו-Event log:

• הצגת פעילויות בטבלה

כדי לנתח את הדוח:

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

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

כדאי לעיין בלוחות אחרים שיכולים לעזור לכם לשפר את הביצועים של האתר:

• Lighthouse: אופטימיזציה של מהירות האתר
• זיכרון: סקירה כללית של חלונית הזיכרון
• עיבוד: איתור בעיות בביצועי העיבוד
• בעיות: איתור ותיקון של בעיות
• ביצועים: הצגת פרטי השכבות