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

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, בוחרים באפשרות הצגת חלונית הביצועים ומקישים על Enter.

מעקב אחר מדדי הליבה לבדיקת חוויית המשתמש באתר בזמן אמת

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

איך מקליטים פרופיל ביצועים

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

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

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

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

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

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

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

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

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

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

כך בודקים את הדוח:

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

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