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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

סקירה כללית

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

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

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

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

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

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

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

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

צפייה בדוח בנושא Core Web Vitals

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

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

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

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

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

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

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

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

    הלחצן 'הגדרה' בקטע 'השלבים הבאים'.

  2. בתיבת הדו-שיח Configure field data fetching, קוראים את Privacy disclosure ולוחצים על Ok.

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

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

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

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

      המיפוי בין מקורות של פיתוח וייצור בקטע המתקדם.

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

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

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

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

    תקופת האיסוף של נתוני השדה אחרי האחזור.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הנה קיבוץ של נושאים מהמדריך, ומאמרי עזרה שימושיים נוספים:

איך מנווטים בדוח:

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

כדי לקבל מידע על הכרטיסיות 'למטה', 'עץ הקריאות' ו'יומן אירועים':

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

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

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