نمودار Waterfall و تحلیل آن
یک بخش بسیار کاربردی در ابزار GTmetrix، نمودار Waterfall است. در اینجا، تمام منابعی که روی کلاینت لود میشود تا سایت نمایش داده شود، به صورت آبشاری و سلسله مراتبی لیست میشود. مشابه این نمودار، در Network Monitor مرورگر هم قابل مشاهده است.
زمانی که یک صفحه لود میشود، یک فایل HTML از سمت سرور ساخته شده و به سمت کلاینت ارسال میشود. مرورگر این فایل را دریافت میکند. فایل شامل یک سری URL یا URI است که منابعی همچون CSS ،JS ،Fonts ،XHR، تصاویر و ... را فراخوانی میکند. این فراخوانیها Request نام دارند. تمام این Requestها به یک صف انتظار دریافت-ارسال-دریافت-درخواست میرود. هر یک از این درخواستها یک سری مراحل دارند. اولین مرحله، درخواست بارگذاری سایت است.
با نگهداشتن ماوس روی نوار رنگی میتوانید روند پیشرفت درخواست را مشاهده کنید. رنگهای این نوار بدین ترتیب هستند:
رنگ کرم: Blocking Time
رنگ فیروزهای: DNS Lookup مدت زمانی که طول میکشد تا مشخص شود، دامین به کدام IP متصل است.
رنگ سبز: Connecting Time نشانگر زمان اتصال به سرور است. اولین اتصال، مرحله دریافت درخواست توسط سرور است. این درخواست، مثلاً اتصال از طریق پروتکل HTTP روی پورت 80 است. اگر سرور این درخواست را معتبر بشناسد، Handshake انجام میشود. اتصال انجام میشود.
رنگ نارنجی: Sending نشانگر زمان ارسال است.
رنگ بنفش: Waiting نشانگر زمان انتظاری است که طول میکشد تا اجرای فرایند کامل شود.
رنگ طوسی: Receiving نشانگر زمان دریافت پاسخ درخواست است.
اگر رکوردی شامل ریدایرکت باشد، مجدداً Connecting Time خواهیم داشت.
Blocking Timeهای طولانی ممکن است در سرعت اینترنت داخلی زیاد مشخص نباشند، اما در پرفورمنس بسیار موثرند. Core Web Vitals میتواند به صورت مستقیم و غیرمستقیم روی رنکینگ شما موثر باشد.
وجود یک CDN و Parallelکردن فراخوانی منابع، میتواند در کاهش Blocking Time تاثیر زیادی داشته باشد و لود کامل صفحه را تسریع کند.
تحلیل Waterfall به بهبود امتیازبندی فاکتورهای مختلف Lighthouse کمک شایانی کند.