Panel Jaringan di DevTools browser membantu mengidentifikasi sumber daya dan kapan mereka dimuat. Setiap baris di panel Jaringan sesuai dengan URL tertentu yang telah dimuat oleh aplikasi web Anda.
Ketahui apa yang Anda muat
Menghasilkan strategi {i>caching <i}yang tepat untuk aplikasi web Anda membutuhkan cara menangani apa yang Anda muat. Saat membangun web yang andal aplikasi, jaringan bisa tunduk pada segala jenis kekuatan gelap. Anda harus memahami kerentanan jaringan jika Anda ingin mengatasinya dengan .
Anda mungkin berpikir bahwa Anda sudah memiliki gambaran yang cukup bagus tentang apa yang aplikasi dimuat. Jika Anda hanya menggunakan sedikit HTML statis, File JavaScript, CSS, dan gambar, itu mungkin benar. Tapi segera setelah Anda mulai mencampurkan sumber daya pihak ketiga yang dihosting di jaringan penayangan konten (CDN), menggunakan permintaan API dinamis dan respons yang dihasilkan server, gambaran dengan cepat menjadi murkier.
Strategi {i>caching<i} yang masuk akal untuk beberapa file CSS kecil mungkin tidak masuk akal untuk ratusan gambar berukuran besar, misalnya.
Mengetahui waktu pemuatan
Bagian lain dari gambar pemuatan keseluruhan adalah saat semua konten dimuat.
Beberapa permintaan ke jaringan, seperti permintaan navigasi untuk HTML awal, dibuat tanpa syarat segera setelah pengguna mengunjungi . HTML tersebut mungkin berisi referensi hardcode ke CSS atau JavaScript penting file yang juga harus dimuat untuk menampilkan halaman interaktif Anda. Ini semua permintaan berada di jalur pemuatan kritis Anda. Anda harus agresif menyimpan cache data tersebut agar dapat berjalan cepat dan andal.
Resource lain, seperti permintaan API atau aset yang dimuat lambat, mungkin tidak mulai dimuat hingga setelah semua pemuatan awal selesai. Jika permintaan itu hanya terjadi setelah urutan interaksi pengguna tertentu, maka sekumpulan sumber daya yang benar-benar berbeda mungkin akan diminta dalam beberapa kunjungan ke halaman yang sama. Strategi {i>caching<i} yang kurang agresif adalah sering kali sesuai untuk konten yang telah Anda identifikasi berada di luar jalur pemuatan kritis.
Kolom {i>Name<i} dan {i>Type<i} membantu dalam hal apa
Kolom Nama dan Jenis membantu memberikan gambaran yang bermakna tentang apa yang sedang dimuat. Jawaban untuk "apa yang dimuat?" dalam contoh di atas adalah total empat URL, masing-masing mewakili jenis konten yang unik.
Nama mewakili URL yang diminta browser—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 bawah Nama.
Beberapa karakter terakhir jalur URL, setelah
titik (mis. "css"), dikenal sebagai ekstensi URL.
Ekstensi URL umumnya memberi tahu Anda jenis resource apa 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. Tujuan panjang setiap batang mewakili jumlah total waktu yang dihabiskan untuk memuat setiap resource. Bagaimana Anda bisa membedakan antara permintaan yang dibuat sebagai jalur pemuatan penting dan permintaan yang diaktifkan secara dinamis, lama setelah pemuatan awal halaman selesai?
Permintaan pertama dalam waterfall akan selalu berupa dokumen HTML,
misalnya v2.html. Semua permintaan berikutnya akan mengalir (seperti
waterfall!) dari permintaan navigasi awal ini, berdasarkan gambar, skrip,
dan menata gaya referensi dokumen HTML.
Waterfall menunjukkan bahwa, segera setelah v2.html selesai dimuat, permintaan
untuk aset yang dirujuknya (juga disebut sebagai subresource). Tujuan
browser dapat meminta beberapa subresource sekaligus,
direpresentasikan oleh batang yang tumpang-tindih di kolom Waterfall untuk main.css dan
logo.svg. Terakhir, Anda dapat melihat dari screenshot bahwa main.js dimulai
memuat terakhir, dan selesai memuat setelah tiga URL lainnya selesai
juga.