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

Dale St. Marthe
Dale St. Marthe
LinkedIn
Sofia Emelianova
Sofia Emelianova
GitHub

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

סקירה כללית

החלונית ביצועים מאפשרת לכם לתעד פרופילים של ביצועי המעבד (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.

צפייה בנתוני Core Web Vitals בזמן אמת

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

עכשיו אפשר להתחיל לשפר את Core Web Vitals של האתר שלך:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מקורות מידע נוספים