Panel Jaringan di DevTools browser Anda membantu mengidentifikasi resource apa yang dimuat dan kapan resource tersebut dimuat. Setiap baris di panel Jaringan sesuai dengan URL tertentu yang telah dimuat oleh aplikasi web Anda.
Mengetahui konten yang dimuat
Membuat strategi caching yang tepat untuk aplikasi web memerlukan pemahaman tentang apa yang sebenarnya Anda muat. Saat membangun aplikasi web yang andal, jaringan dapat tunduk pada semua jenis kekuatan gelap. Anda perlu memahami kerentanan jaringan jika ingin mengatasinya di aplikasi Anda.
Anda mungkin berpikir bahwa Anda sudah memiliki gambaran yang cukup bagus tentang apa yang dimuat aplikasi web Anda. Jika Anda hanya menggunakan hamburan kecil file HTML, JavaScript, CSS, dan gambar statis, itu mungkin benar. Namun, segera setelah Anda mulai mencampur resource pihak ketiga yang dihosting di jaringan penayangan konten (CDN) menggunakan permintaan API dinamis dan respons yang dihasilkan server, gambarannya akan menjadi lebih gelap.
Strategi caching yang sesuai untuk beberapa file CSS kecil mungkin tidak akan cocok untuk ratusan gambar besar, misalnya.
Mengetahui waktu pemuatan
Bagian lain dari gambar pemuatan secara keseluruhan adalah saat semuanya dimuat.
Beberapa permintaan ke jaringan, seperti permintaan navigasi untuk HTML awal, dibuat tanpa syarat segera setelah pengguna mengunjungi URL tertentu. HTML tersebut mungkin berisi referensi hardcode ke file CSS atau JavaScript penting yang juga harus dimuat untuk menampilkan halaman interaktif Anda. Semua permintaan ini berada di jalur pemuatan penting Anda. Anda harus menyimpan cache secara agresif agar berjalan dengan cepat.
Resource lain, seperti permintaan API atau aset yang dimuat lambat, mungkin tidak mulai dimuat hingga semua pemuatan awal selesai. Jika permintaan tersebut hanya terjadi setelah urutan interaksi pengguna tertentu, kumpulan resource yang benar-benar berbeda mungkin akan diminta melalui beberapa kunjungan ke halaman yang sama. Strategi caching yang kurang agresif sering kali sesuai untuk konten yang Anda identifikasi sebagai berada di luar jalur pemuatan penting.
Kolom {i>Name<i} dan {i>Type<i} membantu dengan
Kolom Nama dan Jenis membantu memberikan gambaran yang jelas tentang apa yang dimuat. Jawaban untuk "apa yang dimuat?" dalam contoh di atas adalah total empat URL, masing-masing mewakili jenis konten yang unik.
Name merepresentasikan URL yang diminta browser Anda, meskipun Anda hanya akan melihat bagian terakhir dari jalur URL yang tercantum. Misalnya, jika
https://example.com/main.css dimuat, Anda hanya akan melihat main.css
yang tercantum di bagian Nama.
Beberapa karakter terakhir jalur URL, setelah titik (misalnya "css"), dikenal sebagai ekstensi URL.
Ekstensi URL umumnya memberi tahu Anda jenis resource yang diminta, dan memetakan langsung ke informasi yang ditampilkan di kolom Jenis. Misalnya, v2.html adalah dokumen, dan main.css adalah stylesheet.
Kolom {i>Waterfall<i} membantu kapan
Periksa kolom {i>Waterfall<i}, mulai dari atas hingga ke bawah. Panjang setiap batang mewakili jumlah total waktu yang dihabiskan untuk memuat setiap resource. Bagaimana cara membedakan antara permintaan yang dibuat sebagai bagian dari jalur pemuatan penting dan permintaan yang diaktifkan secara dinamis, lama setelah pemuatan awal halaman selesai?
Permintaan pertama di waterfall selalu ditujukan untuk dokumen HTML, misalnya, v2.html. Semua permintaan berikutnya akan mengalir (seperti waterfall) dari permintaan navigasi awal ini, berdasarkan gambar, skrip, dan gaya yang dirujuk dokumen HTML.
Waterfall menunjukkan bahwa segera setelah v2.html selesai dimuat, permintaan
untuk aset yang direferensikannya (juga disebut sebagai subresource) dimulai. Browser
dapat meminta beberapa subresource secara bersamaan, dan itu
diwakili oleh batang yang tumpang tindih di kolom Waterfall untuk main.css dan
logo.svg. Terakhir, Anda dapat melihat dari screenshot bahwa main.js mulai
dimuat terakhir kali, dan selesai dimuat setelah tiga URL lainnya juga selesai.