Resource Waterfall menggambar setiap permintaan yang dibuat halaman pada garis waktu, setiap bilah dipecah menjadi fase sebenarnya — antri, DNS, TCP, TLS, menunggu dan mengunduh — dengan penanda untuk FCP, LCP, DOMContentLoaded, dan memuat.
Ketika sebuah halaman terasa lambat, pertanyaannya selalu sama: tunggu apa lagi? Jawaban browser ada di panel Jaringan, yang berarti membuka DevTools, memasang laci di halaman yang Anda periksa, dan memuat ulang untuk mengetahui awal pemuatan.
Resource Waterfall menempatkan timeline tersebut di panel mengambang di samping halaman. Setiap permintaan muncul sebagai bilah yang diposisikan berdasarkan waktu dimulainya dan disegmentasi berdasarkan waktu yang sebenarnya dihabiskan: antri atau terhenti, pencarian DNS, koneksi TCP, jabat tangan TLS, menunggu server, lalu mengunduh. Segmen biru panjang adalah server yang lambat; yang hijau panjang adalah file yang gemuk; yang abu-abu panjang berarti permintaan sedang menunggu gilirannya. Perbedaannya menentukan apa yang harus Anda perbaiki.
Penanda garis putus-putus di garis waktu menunjukkan First Contentful Paint, Largest Contentful Paint, DOMContentLoaded dan memuat, sehingga Anda dapat melihat permintaan mana yang selesai sebelum pengguna melihat apa pun dan mana yang masih berjalan setelahnya. Sumber daya yang memblokir perenderan dan cache yang ditemukan ditandai pada setiap baris, dan satu filter Pemblokiran memotong daftar menjadi apa yang sebenarnya menunda pengecatan pertama.
Filter berdasarkan jenis, telusuri berdasarkan URL, atau urutkan berdasarkan yang paling lambat atau terbesar untuk menemukan pelaku terburuk dengan cepat. Klik baris mana pun untuk mengetahui URL lengkap, protokol, ukuran transfer dan dekode, status, dan rincian fase lengkapnya. Permintaan yang masuk saat panel terbuka langsung masuk, dan Ekspor JSON menyalin seluruh garis waktu, termasuk pencapaian, sehingga temuan kinerja dapat diserahkan kepada orang lain tanpa tangkapan layar.
Setiap bilah dibagi menjadi antrian, DNS, TCP, TLS, tunggu dan unduh, sehingga server yang lambat, file gemuk, dan permintaan antrian dapat segera dibedakan.
Garis putus-putus untuk FCP, LCP, DOMContentLoaded dan load menunjukkan permintaan mana yang selesai sebelum pengguna melihat konten dan mana yang masih berjalan setelahnya.
Satu klik mengurangi daftar ke sumber daya yang benar-benar menahan cat pertama, dengan total jumlah pemblokiran di bilah ringkasan.
Sumber daya yang disajikan dari cache ditandai dan diberi label alih-alih muncul sebagai baris byte nol yang misterius, sehingga Anda dapat memverifikasi bahwa cache Anda benar-benar berfungsi.
Persempit berdasarkan jenis — dokumen, CSS, JS, gambar, font, XHR, media — telusuri berdasarkan URL, atau urutkan berdasarkan paling lambat atau terbesar untuk menjangkau pelaku terburuk dalam hitungan detik.
Salin seluruh air terjun sebagai JSON, termasuk pencapaian, total, dan fase per permintaan, untuk dilampirkan ke tiket atau dibandingkan dengan proses berikutnya.
Filter untuk sumber daya yang memblokir perenderan dan lihat stylesheet dan skrip yang tepat antara pengunjung Anda dan konten yang terlihat.
Urutkan berdasarkan yang paling lambat dan lihat penyedia analitik, font, atau obrolan muncul di bagian atas dengan fase tunggu yang lama yang tidak ada hubungannya dengan kode Anda.
Baca warna fase: waktu yang dihabiskan untuk menunggu adalah masalah backend atau CDN, waktu yang dihabiskan untuk mengunduh adalah masalah ukuran file. Perbaikannya berbeda untuk masing-masing.
Muat ulang dan konfirmasikan bahwa aset berasal dari cache dan ukuran transfer jauh lebih kecil daripada ukuran yang didekodekan, yang membuktikan bahwa kompresi benar-benar aktif.
Ekspor garis waktu sebagai JSON dan lampirkan ke tiket sehingga orang berikutnya melihat nomor yang sama alih-alih mencoba mereproduksi sesi Anda.
Klik ikon Resource Waterfall di dok DevSuite Pro. Segala sesuatu yang telah dimuat halaman sejauh ini segera muncul di timeline.
Muat ulang dengan panel terbuka untuk menangkap muatan dari permintaan pertama, termasuk dokumen itu sendiri dan pencapaian pengecatan.
Tekan chip pemblokiran untuk hanya melihat sumber daya yang memblokir render, atau pilih jenis seperti js atau img. Urutkan berdasarkan yang paling lambat untuk menempatkan pelaku terburuk di urutan teratas.
Klik baris mana pun untuk melihat URL lengkap, protokol, ukuran, status, dan rincian fase demi fase dalam milidetik — dan salin URL tersebut jika Anda memerlukannya.
Ekspor JSON menyalin garis waktu lengkap dengan pencapaian dan total, siap untuk ditempelkan ke dalam tiket atau disimpan sebagai catatan sebelum dan sesudah.
Instal DevSuite Pro secara gratis dan buka 71+ alat pengembang untuk browser Anda.
