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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מידע נוסף על הכרטיסיות 'מלמטה למעלה', 'עץ שיחות' ו'יומן אירועים':

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

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

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