Tarayıcınızın Geliştirici Araçları'ndaki Ağ paneli, hangi kaynakların ne zaman yüklendiğini belirlemenize yardımcı olur. Ağ panelindeki her satır, web uygulamanızın yüklediği belirli bir URL'ye karşılık gelir.
Yüklediğiniz içerikleri bilin
Web uygulamanız için doğru önbelleğe alma stratejilerini belirlemek, tam olarak neleri yüklediğinizi anlamanızı gerektirir. Güvenilir bir web uygulaması oluştururken ağ her türlü karanlık güçlere maruz kalabilir. Uygulamanızda bu güvenlik açıklarıyla başa çıkmak istiyorsanız ağın güvenlik açıklarını anlamanız gerekir.
Web uygulamanızın neleri yüklediği hakkında oldukça iyi bir fikriniz olduğunu düşünebilirsiniz. Yalnızca birkaç statik HTML, JavaScript, CSS ve resim dosyası kullanıyorsanız bu doğru olabilir. Ancak dinamik API istekleri ve sunucu tarafından oluşturulan yanıtlar kullanarak içerik yayınlama ağlarında barındırılan üçüncü taraf kaynaklarını kullanmaya başladığınızda durum hızla karmaşık bir hal alır.
Örneğin, birkaç küçük CSS dosyası için mantıklı olan bir önbelleğe alma stratejisi, yüzlerce büyük resim için mantıklı olmayabilir.
Ne zaman yüklediğinizi bilme
Yükleme resminin bir diğer bölümü de her şeyin ne zaman yüklendiğidir.
İlk HTML'niz için gezinme isteği gibi ağ isteklerinden bazıları, kullanıcı belirli bir URL'yi ziyaret ettiği anda koşulsuz olarak gönderilir. Bu HTML, etkileşimli sayfanızı görüntülemek için yüklenmesi gereken önemli CSS veya JavaScript dosyalarına sabit kodla referanslar içerebilir. Bu isteklerin tümü kritik yükleme yolunuzda yer alır. Güvenilir bir şekilde hızlı olması için bunları agresif bir şekilde önbelleğe almanız gerekir.
API istekleri veya yavaş yüklenen öğeler gibi diğer kaynaklar, ilk yüklemenin tamamı tamamlandıktan çok sonra yüklenmeye başlayabilir. Bu istekler yalnızca belirli bir kullanıcı etkileşimi sırasını takiben gerçekleşirse aynı sayfaya yapılan birden fazla ziyarette tamamen farklı bir kaynak grubu istenebilir. Kritik yükleme yolunun dışında olduğunu belirlediğiniz içerikler için genellikle daha az agresif bir önbelleğe alma stratejisi uygundur.
Ad ve Tür sütunları, ne
Ad ve Tür sütunları, yüklenen şeyin anlamlı bir resmini sunmaya yardımcı olur. Yukarıdaki örnekte "Ne yükleniyor?" sorusunun yanıtı, her biri benzersiz bir içerik türünü temsil eden toplam dört URL'dir.
Ad, tarayıcınızın istediği URL'yi temsil eder. Ancak listede yalnızca URL yolunun son kısmı gösterilir. Örneğin, https://example.com/main.css yüklenirse Ad altında yalnızca main.css gösterilir.
URL'nin yolundaki son birkaç karakter (ör. "css"), nokta işaretinden sonra gelir ve URL'nin uzantısı olarak bilinir.
URL'nin uzantısı genellikle ne tür bir kaynağın istendiğini belirtir ve doğrudan Tür sütununda gösterilen bilgilerle eşlenir. Örneğin, v2.html bir doküman, main.css ise stil sayfasıdır.
Şelale sütunu,
Şelale sütununu yukarıdan aşağıya doğru inceleyin. Her çubuğun uzunluğu, her kaynağın yüklenmesi için harcanan toplam süreyi gösterir. Kritik yükleme yolunun bir parçası olarak yapılan bir isteği, sayfanın ilk yüklemesi tamamlandıktan çok sonra dinamik olarak tetiklenen bir istekle nasıl ayırt edebilirsiniz?
Şelalede ilk istek her zaman HTML dokümanı için olacaktır (ör. v2.html). Sonraki tüm istekler, HTML belgesinin referans verdiği resimlere, komut dosyalarına ve stillere göre bu ilk gezinme isteğinden (şelale gibi) akacaktır.
Şelale, v2.html yüklenmeyi tamamlar tamamlamaz referans verdiği öğelerin (alt kaynaklar olarak da bilinir) isteklerinin başladığını gösterir. Tarayıcı aynı anda birden fazla alt kaynak isteyebilir. Bu durum, main.css ve logo.svg için Şelale sütununda örtüşen çubuklarla gösterilir. Son olarak, ekran görüntüsünde main.js URL'sinin en son yüklenmeye başladığını ve diğer üç URL'nin de yüklenmesinin ardından yükleme işleminin tamamlandığını görebilirsiniz.