اندازه گیری مسیر رندر بحرانی

ایلیا گریگوریک

اساس هر استراتژی عملکرد جامد، اندازه گیری و ابزار دقیق است. شما نمی توانید چیزی را که نمی توانید اندازه گیری کنید بهینه کنید. این سند روش های مختلف برای اندازه گیری عملکرد CRP را توضیح می دهد.

  • رویکرد Lighthouse یک سری آزمایشات خودکار را بر روی یک صفحه اجرا می کند و سپس گزارشی از عملکرد CRP صفحه ایجاد می کند. این رویکرد یک نمای کلی سریع و آسان در سطح بالا از عملکرد CRP یک صفحه خاص بارگذاری شده در مرورگر شما ارائه می‌کند و به شما امکان می‌دهد به سرعت تست، تکرار و بهبود عملکرد آن را انجام دهید.
  • رویکرد Navigation Timing API معیارهای نظارت بر کاربر واقعی (RUM) را ثبت می کند. همانطور که از نام آن پیداست، این معیارها از تعاملات واقعی کاربر با سایت شما گرفته می شود و دید دقیقی از عملکرد CRP در دنیای واقعی ارائه می دهد، همانطور که کاربران شما در انواع دستگاه ها و شرایط شبکه تجربه می کنند.

به طور کلی، یک رویکرد خوب این است که از Lighthouse برای شناسایی فرصت‌های بهینه‌سازی واضح CRP استفاده کنید، و سپس کد خود را با Navigation Timing API برای نظارت بر عملکرد برنامه‌تان در حالت طبیعی کنترل کنید.

ممیزی یک صفحه با Lighthouse

Lighthouse یک ابزار حسابرسی اپلیکیشن وب است که یک سری آزمایش را بر روی یک صفحه مشخص انجام می دهد و سپس نتایج صفحه را در یک گزارش تلفیقی نمایش می دهد. می‌توانید Lighthouse را به‌عنوان یک ماژول Chrome Extension یا NPM اجرا کنید، که برای ادغام Lighthouse با سیستم‌های ادغام مداوم مفید است.

برای شروع به حسابرسی برنامه های وب با Lighthouse مراجعه کنید.

وقتی Lighthouse را به عنوان یک برنامه افزودنی کروم اجرا می کنید، نتایج CRP صفحه شما شبیه تصویر زیر است.

ممیزی های CRP Lighthouse

برای کسب اطلاعات بیشتر در مورد نتایج این ممیزی ، زنجیره‌های درخواست حیاتی را ببینید.

ترکیبی از Navigation Timing API و سایر رویدادهای مرورگر که هنگام بارگیری صفحه منتشر می شود به شما امکان می دهد عملکرد CRP در دنیای واقعی هر صفحه را ضبط و ضبط کنید.

زمان بندی ناوبری

هر یک از برچسب ها در نمودار بالا مربوط به مهر زمانی با وضوح بالا است که مرورگر برای هر صفحه ای که بارگیری می کند ردیابی می کند. در واقع، در این مورد خاص، ما فقط کسری از تمام مهرهای زمانی مختلف را نشان می‌دهیم - در حال حاضر از تمام مهرهای زمانی مربوط به شبکه صرفنظر می‌کنیم، اما در درس آینده به آنها باز خواهیم گشت.

بنابراین، این مهرهای زمانی به چه معنا هستند؟

  • domLoading : این مهر زمانی شروع کل فرآیند است، مرورگر در شرف تجزیه اولین بایت های دریافتی سند HTML است.
  • domInteractive : نقطه ای را مشخص می کند که مرورگر تجزیه تمام ساختارهای HTML و DOM را به پایان رسانده است.
  • domContentLoaded : نقطه ای را مشخص می کند که هم DOM آماده است و هم هیچ شیوه نامه ای وجود ندارد که اجرای جاوا اسکریپت را مسدود کند - به این معنی که اکنون (به طور بالقوه) می توانیم درخت رندر را بسازیم.
    • بسیاری از چارچوب‌های جاوا اسکریپت قبل از شروع اجرای منطق خود منتظر این رویداد هستند. به همین دلیل مرورگر مهرهای زمانی EventStart و EventEnd را می گیرد تا به ما اجازه دهد تا مدت زمان این اجرا را پیگیری کنیم.
  • domComplete : همانطور که از نام آن پیداست، تمام پردازش کامل شده است و تمام منابع موجود در صفحه (تصاویر و غیره) دانلود شده اند - به عبارت دیگر چرخش بارگذاری متوقف شده است.
  • loadEvent : به عنوان آخرین مرحله در هر بارگذاری صفحه، مرورگر یک رویداد onload را اجرا می کند که می تواند منطق برنامه اضافی را راه اندازی کند.

مشخصات HTML شرایط خاصی را برای هر رویداد دیکته می کند: چه زمانی باید اجرا شود، چه شرایطی باید رعایت شود و غیره. برای اهداف خود، روی چند نقطه عطف کلیدی مرتبط با مسیر رندر بحرانی تمرکز خواهیم کرد:

  • زمانی که DOM آماده است، domInteractive علامت گذاری می کند.
  • domContentLoaded معمولا زمانی را مشخص می کند که DOM و CSSOM هر دو آماده هستند .
    • اگر هیچ تجزیه کننده ای وجود نداشته باشد که جاوا اسکریپت را مسدود کند، 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>

آن را امتحان کنید

مثال بالا ممکن است در نگاه اول کمی دلهره آور به نظر برسد، اما در واقع بسیار ساده است. Navigation Timing API تمام مهرهای زمانی مربوطه را می گیرد و کد ما به سادگی منتظر می ماند تا رویداد onload فعال شود - به یاد بیاورید که رویداد onload بعد از domInteractive ، domContentLoaded و domComplete فعال می شود - و تفاوت بین مهرهای زمانی مختلف را محاسبه می کند.

نسخه ی نمایشی NavTiming

همه گفته‌ها و انجام‌ها، ما اکنون برخی نقاط عطف خاص برای ردیابی و یک تابع ساده برای خروجی این اندازه‌گیری‌ها داریم. توجه داشته باشید که به‌جای چاپ این معیارها در صفحه، می‌توانید کد را برای ارسال این معیارها به یک سرور تجزیه و تحلیل نیز تغییر دهید ( Google Analytics این کار را به‌طور خودکار انجام می‌دهد )، که یک راه عالی برای کنترل عملکرد صفحات شما و شناسایی صفحات نامزدی است که می تواند از برخی کارهای بهینه سازی بهره مند شود.

در مورد DevTools چطور؟

اگرچه این اسناد گاهی از پانل شبکه Chrome DevTools برای نشان دادن مفاهیم CRP استفاده می کنند، DevTools در حال حاضر برای اندازه گیری CRP مناسب نیست زیرا مکانیزم داخلی برای جداسازی منابع حیاتی ندارد. برای کمک به شناسایی چنین منابعی، حسابرسی فانوس دریایی را اجرا کنید.

بازخورد