Resource Waterfall

وقتی صفحه ای کند می شود، سوال همیشه یکسان است: منتظر چه چیزی است؟ پاسخ خود مرورگر در پنل Network قرار دارد، به این معنی که DevTools را باز کنید، کشویی را روی صفحه‌ای که در حال بررسی آن هستید متصل کنید، و دوباره بارگیری کنید تا بارگذاری شروع شود.

Resource Waterfall آن جدول زمانی را در یک پانل شناور در کنار صفحه قرار می دهد. هر درخواست به‌عنوان نواری ظاهر می‌شود که بر اساس زمانی که شروع می‌شود قرار می‌گیرد و بر اساس جایی که زمان واقعی آن سپری شده، تقسیم‌بندی می‌شود: در صف یا متوقف شده، جستجوی DNS، اتصال TCP، دست دادن TLS، انتظار برای سرور، سپس دانلود. یک بخش آبی طولانی یک سرور کند است. یک سبز بلند یک فایل چرب است. یک خاکستری بلند به این معنی است که درخواست منتظر نوبت خود بود. تمایز تصمیم می گیرد که چه چیزی را باید اصلاح کنید.

نشانگرهای نقطه چین در سرتاسر خط زمانی، First Contentful Paint، Largest Contentful Paint، DOMContentLoaded و بارگیری را نشان می‌دهند، بنابراین می‌توانید ببینید که کدام درخواست‌ها قبل از اینکه کاربر چیزی را ببیند به پایان می‌رسند و کدام درخواست‌ها همچنان ادامه دارند. منابع مسدودکننده رندر و بازدیدهای حافظه نهان در هر ردیف پرچم گذاری می شوند و یک فیلتر مسدود کردن لیست را به چیزی کاهش می دهد که در واقع اولین نقاشی را به تاخیر می اندازد.

بر اساس نوع فیلتر کنید، بر اساس URL جستجو کنید، یا بر اساس کندترین یا بزرگترین مرتب کنید تا بدترین متخلف را سریع پیدا کنید. روی هر ردیفی برای URL کامل، پروتکل، اندازه‌های انتقال و رمزگشایی شده، وضعیت و تفکیک فاز کامل آن کلیک کنید. درخواست‌هایی که در حالی که پانل باز است به دست می‌آیند، و Export JSON از کل جدول زمانی، نقاط عطف شامل آن کپی می‌کند، بنابراین می‌توان یک یافته عملکرد را بدون اسکرین شات به شخص دیگری تحویل داد.