Resource Waterfall menarik setiap permintaan halaman yang dibuat pada garis masa, setiap bar dipecahkan kepada fasa sebenar — beratur, DNS, TCP, TLS, menunggu dan memuat turun — dengan penanda untuk FCP, LCP, DOMContentLoaded dan memuatkan.
Apabila halaman terasa perlahan, soalannya sentiasa sama: apa yang ditunggu? Jawapan penyemak imbas sendiri berada dalam panel Rangkaian, yang bermaksud membuka DevTools, melabuhkan laci di atas halaman yang anda periksa dan memuat semula untuk menangkap permulaan pemuatan.
Resource Waterfall meletakkan garis masa itu dalam panel terapung di sebelah halaman. Setiap permintaan muncul sebagai bar yang diposisikan mengikut masa ia bermula dan dibahagikan mengikut masanya: beratur atau terhenti, carian DNS, sambungan TCP, jabat tangan TLS, menunggu pelayan, kemudian memuat turun. Segmen biru panjang ialah pelayan yang perlahan; hijau panjang adalah fail lemak; kelabu panjang bermakna permintaan itu menunggu giliran. Perbezaan menentukan perkara yang perlu anda betulkan.
Penanda putus-putus merentas garis masa menunjukkan First Contentful Paint, Largest Contentful Paint, DOMContentLoaded dan muatkan, jadi anda boleh melihat permintaan yang mana selesai sebelum pengguna melihat apa-apa dan yang mana yang masih diteruskan selepas itu. Sumber penyekatan pemaparan dan hits cache dibenderakan pada setiap baris, dan penapis Penyekatan tunggal mengurangkan senarai kepada perkara yang sebenarnya melambatkan cat pertama.
Tapis mengikut jenis, cari mengikut URL atau susun mengikut paling perlahan atau terbesar untuk mencari pesalah paling teruk dengan cepat. Klik mana-mana baris untuk URL penuh, protokol, saiz pemindahan dan dinyahkod, status dan pecahan fasa lengkapnya. Permintaan yang tiba semasa panel terbuka strim terus masuk, dan Eksport JSON menyalin keseluruhan garis masa, termasuk peristiwa penting, jadi penemuan prestasi boleh diserahkan kepada orang lain tanpa tangkapan skrin.
Setiap bar dibahagikan kepada baris gilir, DNS, TCP, TLS, menunggu dan memuat turun, jadi pelayan yang perlahan, fail gemuk dan permintaan beratur segera dapat dibezakan.
Garis putus-putus untuk FCP, LCP, DOMContentLoaded dan memuatkan menunjukkan permintaan mana yang lengkap sebelum pengguna melihat kandungan dan yang masih berjalan selepasnya.
Satu klik mengurangkan senarai kepada sumber yang sebenarnya memegang cat pertama, dengan jumlah kiraan sekatan dalam bar ringkasan.
Sumber yang disampaikan daripada cache ditanda dan dilabel dan bukannya muncul sebagai baris sifar bait yang misteri, jadi anda boleh mengesahkan cache anda benar-benar berfungsi.
Sempit mengikut jenis — dokumen, CSS, JS, imej, fon, XHR, media — cari mengikut URL, atau susun mengikut paling perlahan atau terbesar untuk mencapai pesalah paling teruk dalam beberapa saat.
Salin keseluruhan air terjun sebagai JSON, termasuk pencapaian, jumlah dan fasa setiap permintaan, untuk dilampirkan pada tiket atau bandingkan dengan larian kemudian.
Tapis untuk sumber menyekat pemaparan dan lihat helaian gaya serta skrip yang tepat berada di antara pelawat anda dan kandungan yang boleh dilihat.
Isih mengikut paling perlahan dan tonton penyedia analitis, fon atau sembang muncul di bahagian atas dengan fasa menunggu yang lama yang tiada kaitan dengan kod anda.
Baca warna fasa: masa yang diluangkan untuk menunggu adalah masalah hujung belakang atau CDN, masa yang dihabiskan untuk memuat turun ialah masalah saiz fail. Pembaikan adalah berbeza untuk setiap satu.
Muat semula dan sahkan bahawa aset datang daripada cache dan saiz pemindahan jauh lebih kecil daripada saiz yang dinyahkod, membuktikan mampatan sebenarnya dihidupkan.
Eksport garis masa sebagai JSON dan lampirkan pada tiket supaya orang seterusnya melihat nombor yang sama dan bukannya cuba menghasilkan semula sesi anda.
Klik ikon Resource Waterfall dalam dok DevSuite Pro. Semua yang dimuatkan halaman setakat ini muncul pada garis masa serta-merta.
Muat semula dengan panel terbuka untuk menangkap beban daripada permintaan pertama, termasuk dokumen itu sendiri dan peristiwa penting cat.
Tekan cip penyekat untuk melihat sumber penyekat pemaparan sahaja atau pilih jenis seperti js atau img. Isih mengikut paling perlahan untuk meletakkan pesalah paling teruk di atas.
Klik mana-mana baris untuk URL penuh, protokol, saiz, status dan pecahan fasa demi fasa dalam milisaat — dan salin URL jika anda memerlukannya.
Eksport JSON menyalin garis masa penuh dengan pencapaian dan jumlah, sedia untuk ditampal ke dalam tiket atau disimpan sebagai rekod sebelum dan selepas.
Pasang DevSuite Pro secara percuma dan buka 71+ alat pembangun untuk pelayar anda.
