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

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

הכרטיסייה רשת כרום

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

תוכל להוסיף מידע נוסף לטבלה זו על ידי לחיצה ימנית על אחד מכותרות הטבלה ובחירת עמודות אחרות.

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

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

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

מהו קובץ HAR?

קובץ HAR (קיצור של HTTP Archive) הוא קובץ JSON המכיל את כל המידע על האינטראקציות של הדפדפן עם דף. הוא יכיל את מסמך ה- HTML וקבצי JS ו- CSS בהתאמה.

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

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

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

יצירת קבצי HAR

גוגל כרום

  • סגור את כל חלונות הגלישה בסתר ב- Google Chrome.
  • פתח חלון גלישה בסתר חדש ב- Google Chrome.
  • עבור אל תצוגה> מפתח> כלים למפתחים.
  • בחלונית כלים למפתחים, בחר בכרטיסייה רשת.
  • סמן את תיבות הסימון שמור יומן והשבית מטמון כדי להקליט את כל האינטראקציות.
  • רענן את הדף.
  • לחץ על ייצוא HAR (סמל החץ למטה) כדי לייצא את קובץ ה- HAR.
  • שמור את קובץ ה- HAR.

פיירפוקס

  • סגור את כל החלונות הפרטיים ב- Firefox.
  • פתח חלון פרטי חדש ב- Firefox.
  • עבור אל כלים> מפתח> רשת או ctrl-shift-E.
  • רענן את הדף.
  • בסמל Cog (בצד ימין עליון של הדף) בחר Save All As Har.
  • שמור את קובץ ה- HAR.
כרטיסיית רשת פיירפוקס

ספארי

  • וודא שתיבת הסימון הצג תפריט פיתוח בשורת התפריטים מסומנת תחת Safari> העדפות> מתקדם.
  • בחר קובץ> פתח חלון פרטי חדש.
  • בקר בדף האינטרנט שבו מתרחשת הבעיה.
  • בחר פיתוח> הצג מפקח אתרים. חלון מפקח האינטרנט מופיע.
  • רענן את הדף.
  • לחץ על ייצא בצד הימני העליון של החלונית.
  • שמור את קובץ ה- HAR.
הכרטיסייה רשת ספארי

קריאת קבצי HAR

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

צופה ב- HAR

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

שימוש בקבצי HAR לניתוח ביצועי העמוד

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

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

עוד מידע

  • מדוד זמני טעינת משאבים
  • קוד המקור של HAR Viewer

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