משתמשים בחלונית ביצועים כדי לנתח את ביצועי האתר.
סקירה כללית
בחלונית ביצועים אפשר לתעד פרופילים של ביצועי המעבד (CPU) של אפליקציות האינטרנט. ניתוח פרופילים כדי לזהות צווארי בקבוק פוטנציאליים בביצועים ודרכים לבצע אופטימיזציה של השימוש במשאבים.
בחלונית ביצועים ניתן לבצע את הפעולות הבאות:
- מתעדים פרופיל ביצועים.
- שינוי הגדרות הצילום.
- לנתח דוח ביצועים.
מדריך מקיף לשיפור ביצועי האתר זמין במאמר ניתוח ביצועים של סביבת זמן ריצה.
פתיחת חלונית הביצועים
כדי לפתוח את החלונית ביצועים, פותחים את כלי הפיתוח ובוחרים באפשרות ביצועים מקבוצת כרטיסיות בחלק העליון.
לחלופין, פועלים לפי השלבים הבאים כדי לפתוח את החלונית ביצועים באמצעות תפריט הפקודה:
- פותחים את כלי הפיתוח.
- לוחצים על תפריט הפקודה על ידי לחיצה על:
- macOS: Command+Shift+P
- ב-Windows, ב-Linux וב-ChromeOS: Control+Shift+P
- מתחילים להקליד
Performance panel
, בוחרים באפשרות Show Performance panel (הצגת חלונית הביצועים) ומקישים על Enter.
צפייה בדוח בנושא Core Web Vitals
כשפותחים את החלונית ביצועים, היא מתעדת ומוצגת מיד המדדים המקומיים שלכם מסוג המהירות שבה נטען רכיב התוכן הכי גדול (LCP) והתאמה מצטברת לפריסה (CLS) נותנת לכם את הציון שלהם (טוב, טעו שיפור או רע).
בכל אינטראקציה עם הדף, החלונית ביצועים מתעדת גם את האינטראקציה המקומית עד הסרטון הבא (INP) ואת הציון שלו. בנוסף ל-LCP ול-CLS, מוצגת סקירה כללית מלאה של מדדי הליבה לבדיקת חוויית המשתמש באתר של הדף באמצעות החיבור לרשת והמכשיר.
בחלונית ביצועים מוצגת רשימה של אינטראקציות שתועדו בשלושת כרטיסי המדדים. כדי לנקות את הרשימה, לוחצים על
ניקוי.כדי לקבל פירוט של ציון המדד, מעבירים את העכבר מעל ערך המדד כדי להציג תיאור קצר.
השוואה בין החוויה שלכם לבין החוויה של המשתמשים
אפשר גם לאחזר נתוני שדות מדוח חוויית המשתמש ב-Chrome ולהשוות את חוויית המשתמשים באתר למדדים המקומיים.
כדי להוסיף נתוני שדה:
בקטע ביצועים > השלבים הבאים > נתוני שדה, לוחצים על הגדרה.
בתיבת הדו-שיח Configure field data fetching, קוראים את Privacy disclosure ולוחצים על Ok.
מתקדם: הגדרת מיפוי בין סביבות הפיתוח והייצור...
אופציונלי: כדי לקבל באופן אוטומטי את נתוני השדות הרלוונטיים ביותר, אפשר להגדיר (כמה) מיפויים בין מקורות הפיתוח לבין מקורות הייצור:
- בחלון של תיבת הדו-שיח, מרחיבים את הקטע מתקדם ולוחצים על + חדש.
בטבלת המיפוי, מזינים את כתובות ה-URL של הפיתוח והייצור ולוחצים על +.
לדוגמה, מיפוי של
http://localhost:8080
אלhttps://example.com
יוביל להצגת נתוני השדה שלexample.com/page1
כשעוברים אלlocalhost:8080/page1
.כמו כן, אם מסיבה כלשהי לא ניתן לקבל את נתוני השדות באופן אוטומטי, אפשר להפעיל את האפשרות
(הצגת נתוני השדות תמיד) בכתובת ה-URL שלמטה וציון כתובת URL. החלונית ביצועים תנסה קודם לאחזר נתונים מהשטח של כתובת ה-URL הזו, ואז תציג את נתוני השדה האלה ללא קשר לדף שאליו עוברים.כדי לשנות את הגדרות אחזור הנתונים בשדות אחרי ההגדרה, לוחצים על נתוני שדה > הגדרה
כשאחזור הנתונים מהשדות מוגדר, בחלונית ביצועים מוצגת עכשיו השוואה בין ציוני המדדים המקומיים לבין אלה שהמשתמשים חווים. אפשר לראות את תקופת האיסוף בקטע נתוני שדה בצד שמאל.
כדי לקבל פירוט של ציון המדד, מעבירים את העכבר מעל ערך המדד כדי להציג תיאור קצר.
מגדירים את הסביבה כך שתתאים יותר לזו של המשתמשים
כשאחזור הנתונים בשדות מוגדר כמו שמתואר בקטע הקודם, בחלונית ביצועים מופיעות המלצות להגדרת הסביבה כך שתתאים יותר לחוויית המשתמשים.
כדי להגדיר את הסביבה:
בכל כרטיס מדד, מרחיבים את הקטע יש להביא בחשבון את תנאי הבדיקה המקומיים, אם יש כאלה, וקוראים את ההמלצות.
נראה שבדוגמה הזו, כדי להתאים טוב יותר לחוויית המשתמשים, כדאי להשתמש בגודל מסך נפוץ במחשב ולהאט את המעבד והרשת.
כדי להתאים להגדרת הסביבה בדוגמה הזו:
- צריך להגדיר את אזור התצוגה לאחד מהגדלים הנפוצים של המסכים (לדוגמה, 720p או 1080p). כדי לדמות מכשירים ספציפיים וגדלי מסך ספציפיים, אפשר להשתמש במצב מכשיר בחלונית רכיבים.
- 82% מהמשתמשים באתר בדוגמה הזו משתמשים במחשבים כדי לגלוש. כדי לוודא שאתם משווים בין הציונים של המדדים המקומיים לבין נתוני השדה הנכונים, אתם יכולים לבחור באפשרות מחשב מה��פריט הנפתח נתוני שדה > מכשיר.
- בקטע Environment settings (הגדרות הסביבה), בוחרים באפשרות הרצויה ברשימה הנפתחת Network (רשת), למשל Fast 4G (4G מהיר), וברשימה הנפתחת CPU (מעבד), למשל 20x slowdown (האטה פי 20). כדאי גם להקפיד להשבית את מטמון הרשת באותו קטע.
כשהסביבה מוגדרת, צריך לטעון מחדש את הדף, לבצע אינטראקציה איתו כדי לתעד את ה-INP המקומי ולהשוות שוב את דירוגי המדדים.
נראה שציוני המדדים דומים עכשיו יותר לאלה שהמשתמשים חווים. כתוצאה מכך, הקטעים כדאי לבדוק את תנאי הבדיקה המקומיים נעלמו מכרטיסי המדדים.
עכשיו אפשר להתחיל לשפר את מדדי הליבה לבדיקת חוויית המשתמש באתר של האתר:
תיעוד וניתוח של דוח ביצועים
בקטעים הבאים מוסבר איך לתעד פרופיל, לשנות את הגדרות הצילום ולנתח את הדוח.
הקלטה של פרופיל ביצועים
כשתהיו מוכנים להתחיל את ההקלטה, יוצגו לכם בחלונית ביצועים האפשרויות הבאות:
- תיעוד הביצועים בסביבת זמן הריצה
- תיעוד ביצועי הטעינה
- צילום מסך תוך כדי הצילום
- אילוץ האיסוף של 'זבל' במהלך הצילום
- שמירת הקלטה
- טעינת הקלטה
- מחיקת הקלטה
שינוי הגדרות הצילום
הגדרות הצילום מאפשרות לכם לשנות את האופן שבו כלי הפיתוח מתעדים את הקלטות הביצועים, ויכולים לספק לכם מידע נוסף בדוח. לוחצים על הגדרות הצילום
כדי לגשת לתפריט הגדרות הצילום.בוחרים את האפשרויות הבאות מהתפריט הגדרות צילום:
- השבתה של דגימות JavaScript: ההגדרה משביתה את ההקלטה של מחסניות הקריאות של JavaScript שמוצגות במסלול הראשי, שמופעלות במהלך ההקלטה. תקטין את התקורה של הביצועים.
- הפעלת אינסטרומנטציה מתקדמת של צביעה (איטית): תיעוד של אינסטרומנטציה מתקדמת של צביעה. פוגע באופן משמעותי בביצועים.
- הפעלת ��תונים סטטיסטיים של סלקטור ב-CSS (איטי): תיעוד הנתונים הסטטיסטיים של הסלקטור ב-CSS. פוגע באופן משמעותי בביצועים.
- ויסות נתונים (throttle) במעבד (CPU): הדמיה של מהירויות נמוכות יותר של מעבד (CPU).
- ויסות רשת (throttle): הדמיה של מהירויות רשת איטיות יותר.
- הפעלות בו-זמניות בחומרה: הגדרת הערך שמדווח על ידי
navigator.hardwareConcurrency
.
ניתוח של דוח ביצועים
מדריך מלא לשימוש בחלונית ביצועים זמין במאמר ניתוח של הקלטת ביצועים.
הנה קיבוץ של נושאים מהמדריך, ומאמרי עזרה שימושיים נוספים:
איך מנווטים בדוח:
כדי ללמוד איך להתמקד בדברים שחשובים לתהליך העבודה שלכם:
- שינוי סדר הטראקים והסתרה שלהם
- הסתרת פונקציות וצאצאים שלהן בתרשים הלהבה
- יצירת נתיבי ניווט ומעבר בין רמות הזום
כדי לקבל מידע על הכרטיסיות 'למטה', 'עץ הקריאות' ו'יומן אירועים':
כדי ללמוד איך לנתח את הדוח:
- צפייה בפעילות הראשית בשרשור
- לקריאת תרשים הלהבות
- הצגת צילום מסך
- הצגת מדדי הזיכרון
- הצגת משך הזמן של קטע בהקלטה
- ניתוח הביצועים של סלקטורים ב-CSS במהלך אירועים של Recalculate Style
- ביצועי הפרופיל של Node.js בחלונית הביצועים
- ניתוח פריימים לשנייה (FPS)
- הסבר על אירועים בציר הזמן
שיפור הביצועים בעזרת החלוניות האלה
לוחות נוספים שיעזרו לכם לשפר את ביצועי האתר: