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

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

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

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

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

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

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

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

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

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

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

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

עכשיו אתם יכולים להתחיל לשפר את מדדי ה-Core Web Vitals של האתר:

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

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

תיעוד פרופיל ביצועים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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