Panel Jaringan di DevTools browser Anda membantu mengidentifikasi resource yang dimuat dan kapan resource tersebut dimuat. Setiap baris di panel Jaringan sesuai dengan URL tertentu yang telah dimuat aplikasi web Anda.
Mengetahui apa yang Anda muat
Untuk membuat strategi penyimpanan dalam cache yang tepat bagi aplikasi web Anda, Anda harus memahami apa yang Anda muat. Saat membuat aplikasi web yang andal, jaringan dapat mengalami berbagai jenis serangan. Anda perlu memahami kerentanan jaringan jika ingin mengatasinya di aplikasi.
Anda mungkin berpikir bahwa Anda sudah memiliki gambaran yang cukup baik tentang apa yang dimuat oleh aplikasi web Anda. Jika Anda hanya menggunakan sedikit file HTML statis, JavaScript, CSS, dan gambar, hal itu mungkin benar. Namun, begitu Anda mulai menggabungkan resource pihak ketiga yang dihosting di jaringan pengiriman konten, menggunakan permintaan API dinamis dan respons yang dihasilkan server, gambarannya akan segera menjadi lebih buram.
Strategi penyimpanan dalam cache yang sesuai untuk beberapa file CSS kecil mungkin tidak akan sesuai untuk ratusan gambar besar, misalnya.
Mengetahui kapan Anda memuat
Bagian lain dari keseluruhan gambar pemuatan adalah saat semuanya dimuat.
Beberapa permintaan ke jaringan, seperti permintaan navigasi untuk HTML awal Anda, dibuat tanpa syarat segera setelah pengguna mengunjungi URL tertentu. HTML tersebut mungkin berisi referensi hardcode ke file CSS atau JavaScript kritis yang juga harus dimuat untuk menampilkan halaman interaktif Anda. Permintaan ini semuanya berada di jalur pemuatan penting Anda. Anda harus menyimpannya dalam cache secara agresif agar cepat dan andal.
Resource lain, seperti permintaan API atau aset yang dimuat lambat, mungkin tidak mulai dimuat hingga jauh setelah semua pemuatan awal selesai. Jika permintaan tersebut hanya terjadi setelah urutan interaksi pengguna tertentu, kumpulan resource yang sama sekali berbeda mungkin akan diminta di beberapa kunjungan ke halaman yang sama. Strategi penyimpanan dalam cache yang kurang agresif sering kali cocok untuk konten yang telah Anda identifikasi berada di luar jalur pemuatan penting.
Kolom Nama dan Jenis membantu menentukan apa
Kolom Nama dan Jenis membantu memberikan gambaran yang bermakna tentang apa yang dimuat. Jawaban untuk "apa yang sedang dimuat?" dalam contoh di atas adalah total empat URL, masing-masing mewakili jenis konten yang unik.
Nama mewakili URL yang diminta browser Anda—meskipun Anda hanya akan melihat
bagian terakhir 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 dari jalur URL, setelah titik (misalnya, "css"), dikenal sebagai ekstensi URL.
Ekstensi URL umumnya memberi tahu Anda jenis resource yang diminta,
dan dipetakan langsung ke informasi yang ditampilkan di kolom Jenis. Misalnya,
v2.html adalah dokumen, dan main.css adalah stylesheet.
Kolom Waterfall membantu menentukan kapan
Periksa kolom Waterfall, mulai dari atas dan lanjutkan ke bawah. Panjang setiap batang mewakili jumlah total waktu yang dihabiskan untuk memuat setiap resource. Bagaimana Anda dapat membedakan antara permintaan yang dibuat sebagai bagian dari jalur pemuatan penting dan permintaan yang diaktifkan secara dinamis, jauh setelah pemuatan awal halaman selesai?
Permintaan pertama dalam waterfall selalu akan 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 dirujuknya (juga disebut sebagai sub-resource) akan dimulai. Browser
dapat meminta beberapa subresource secara bersamaan, dan hal tersebut
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, dan selesai dimuat setelah tiga URL lainnya juga selesai
dimuat.