تاریخ انتشار: 31 مارس 2014
اساس هر استراتژی عملکرد جامد، اندازه گیری و ابزار دقیق است. شما نمی توانید چیزی را که نمی توانید اندازه گیری کنید بهینه کنید. این راهنما روش های مختلف برای اندازه گیری عملکرد CRP را توضیح می دهد.
- رویکرد Lighthouse یک سری آزمایشات خودکار را بر روی یک صفحه اجرا می کند و سپس گزارشی از عملکرد CRP صفحه ایجاد می کند. این رویکرد یک نمای کلی سریع و اولیه در سطح بالا از عملکرد CRP یک صفحه خاص که در مرورگر شما بارگذاری شده است را ارائه می دهد و به شما این امکان را می دهد که به سرعت تست، تکرار و بهبود عملکرد آن را انجام دهید.
- رویکرد Navigation Timing API معیارهای نظارت بر کاربر واقعی (RUM) را ثبت می کند. همانطور که از نام آن پیداست، این معیارها از تعاملات واقعی کاربر با سایت شما گرفته می شود و دید دقیقی از عملکرد CRP در دنیای واقعی ارائه می دهد، همانطور که کاربران شما در انواع دستگاه ها و شرایط شبکه تجربه می کنند.
به طور کلی، یک رویکرد خوب این است که از Lighthouse برای شناسایی فرصتهای بهینهسازی واضح CRP استفاده کنید، و سپس کد خود را با Navigation Timing API برای نظارت بر عملکرد برنامهتان در حالت طبیعی کنترل کنید.
ممیزی یک صفحه با Lighthouse
Lighthouse یک ابزار حسابرسی اپلیکیشن وب است که یک سری آزمایش را بر روی یک صفحه مشخص انجام می دهد و سپس نتایج صفحه را در یک گزارش تلفیقی نمایش می دهد. میتوانید Lighthouse را بهعنوان یک ماژول Chrome Extension یا NPM اجرا کنید، که برای ادغام Lighthouse با سیستمهای ادغام مداوم مفید است.
برای شروع، حسابرسی برنامه های وب با Lighthouse را بخوانید.
وقتی Lighthouse را به عنوان افزونه کروم اجرا می کنید، نتایج CRP صفحه شما شبیه تصویر زیر است.
برای کسب اطلاعات بیشتر در مورد نتایج این ممیزی، زنجیرههای درخواست حیاتی را ببینید.
ابزار دقیق کد خود را با Navigation Timing API
ترکیبی از 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
فعال می شود - و تفاوت بین مهرهای زمانی مختلف را محاسبه می کند.
همه گفتهها و انجامها، ما اکنون برخی نقاط عطف خاص برای ردیابی و یک تابع اساسی برای خروجی این اندازهگیریها داریم. توجه داشته باشید که بهجای چاپ این معیارها در صفحه، میتوانید کد را برای ارسال این معیارها به یک سرور تجزیه و تحلیل نیز تغییر دهید ( Google Analytics این کار را بهطور خودکار انجام میدهد )، که یک راه عالی برای کنترل عملکرد صفحات شما و شناسایی صفحات نامزدی است که می تواند از برخی کارهای بهینه سازی بهره مند شود.
در مورد DevTools چطور؟
اگرچه این اسناد گاهی از پانل شبکه Chrome DevTools برای نشان دادن مفاهیم CRP استفاده می کنند، DevTools برای اندازه گیری CRP مناسب نیست زیرا مکانیزم داخلی برای جداسازی منابع حیاتی ندارد. برای کمک به شناسایی چنین منابعی، حسابرسی فانوس دریایی را اجرا کنید.