מדידת נתיב העיבוד הקריטי

Ilya Grigorik
Ilya Grigorik
X דף הבית

תאריך פרסום: 31 במרץ 2014

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

  • גישת Lighthouse מריצה סדרה של בדיקות אוטומטיות על דף, ולאחר מכן יוצרת דוח על ביצועי ה-CRP של הדף. הגישה הזו מספקת סקירה כללית מהירה ובסיסית ברמה גבוהה של ביצועי CRP בדף מסוים שנטען בדפדפן, ומאפשרת לבדוק במהירות את הביצועים, לבצע שינויים ולשפר אותם.
  • הגישה של Navigation Timing API מתעדת מדדים של מעקב אחר משתמשים אמיתיים (RUM). כפי שמשתמע מהשם, המדדים האלה מתועדים ממשתמש אמיתי אינטראקציות עם האתר שלך ולספק תמונה מדויקת על סמך את הביצועים של CRP בעולם האמיתי, כפי שחוו המשתמשים שלך במגוון רחב של מכשירים ותנאי רשת.

באופן כללי, גישה טובה היא להשתמש ב-Lighthouse כדי לזהות CRP ברור לבצע אופטימיזציה של הקוד, ואז להטמיע את הקוד API של תזמון ניווט למעקב אחר ביצועי האפליקציה בשימוש כללי.

ביקורת על דפים באמצעות Lighthouse

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

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

כשמריצים את Lighthouse כתוסף ל-Chrome, תוצאות ה-CRP של הדף נראות כמו בצילום המסך הבא.

ביקורות CRP של Lighthouse

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

השילוב של Navigation Timing API ואירועים אחרים בדפדפן שנפלטים בזמן טעינת הדף מאפשר לכם לתעד את הביצועים של כל דף בעולם האמיתי לפי CRP.

תזמון הניווט

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

אז מה המשמעות של חותמות הזמן האלה?

  • domLoading: זוהי חותמת הזמן ההתחלתית של התהליך כולו, הדפדפן עומד להתחיל לנתח את הבייטים הראשונים של קוד ה-HTML שהתקבלו מהמסמך.
  • domInteractive: מסמנת את הנקודה שבה הדפדפן סיים לנתח את כל ה-HTML ותהליך היצירה של DOM הושלם.
  • domContentLoaded: מסמן את הנקודה שבה גם ה-DOM מוכן ואין גיליונות סגנונות שחוסמים את ההפעלה של JavaScript, כלומר אנחנו יכולים עכשיו (אולי) לבנות את עץ העיבוד.
    • מסגרות JavaScript רבות מחכות לאירוע הזה לפני שהם מתחילים להפעיל לוגיקה משלהם. לכן הדפדפן מתעד את חותמות הזמן EventStart ו-EventEnd כדי לאפשר לנו לעקוב אחרי משך הזמן של הביצוע.
  • domComplete: כפי שמשתמע מהשם, כל העיבוד הושלם כל המשאבים בדף (תמונות וכו') סיימו להוריד אותם - ב- כלומר, העיגול של הטעינה עצר להסתובב.
  • loadEvent: בשלב האחרון בכל טעינת דף, הדפדפן מפעיל האירוע onload שיכול להפעיל לוגיקה נוספת של האפליקציה.

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

  • domInteractive מסמן כשה-DOM מוכן.
  • בדרך כלל, האירוע domContentLoaded מופיע כשגם DOM וגם CSSOM מוכנים.
    • אם אין מנתח שחוסם את JavaScript, אז DOMContentLoaded יופעל מיד אחרי domInteractive.
  • domComplete מציין מתי הדף וכל המשאבים המשניים שלו מוכנים.
<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

רוצים לנסות?

הדוגמה הקודמת עשויה להיראות קצת מרתיעה ממבט ראשון, אבל בפועל היא פשוטה למדי. ה-API של תזמון הניווט מתעד את כל חותמות הזמן הרלוונטיות, והקוד שלנו מחכה להפעלה של האירוע onload (חשוב לזכור שהאירוע onload מופעל אחרי domInteractive, domContentLoaded ו-domComplete) ומחשב את ההפרש בין חותמות הזמן השונות.

הדגמה של NavTiming

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

מה לגבי כלי הפיתוח?

לפעמים במאמרים האלה נעשה שימוש בחלונית 'רשת' של הכלים למפתחים של Chrome כדי להמחיש מושגים של CRP, אבל הכלים למפתחים לא מתאימים למדידות CRP כי אין להם מנגנון מובנה לניתוק משאבים קריטיים. כדי לזהות משאבים כאלה, כדאי להריץ ביקורת של Lighthouse.

משוב