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.
Ne yüklediğinizi bilin
Web uygulamanız için doğru önbelleğe alma stratejilerini belirlemek, tam olarak ne yüklediğinizi bilmeyi gerektirir. Güvenilir bir web uygulaması geliştirilirken ağ her türlü karanlık güce tabi olabilir. Uygulamanızda bunlarla başa çıkmak istiyorsanız ağın güvenlik açıklarını anlamanız gerekir.
Web uygulamanızın ne yüklediği hakkında zaten çok iyi bir fikriniz olduğunu düşünebilirsiniz. Kullandığınız statik HTML, JavaScript, CSS ve resim dosyalarının sadece küçük bir kısmını kullanıyorsanız bu durum doğru olabilir. Ancak, dinamik API isteklerini ve sunucu tarafından oluşturulan yanıtları kullanarak içerik yayınlama ağlarında barındırılan üçüncü taraf kaynaklarını birleştirmeye başlar başlamaz, durum hızla daha kötü bir hal alır.
Örneğin, birkaç küçük CSS dosyası için anlamlı olan bir önbelleğe alma stratejisi, yüzlerce büyük resim için muhtemelen anlamlı olmayacaktır.
Ne zaman yüklediğinizi öğrenme
Genel yükleme resminin başka bir kısmı, her şeyin ne zaman yüklendiğidir.
İlk HTML'niz için gezinme isteği gibi ağa yapılan bazı istekler, kullanıcı belirli bir URL'yi ziyaret eder etmez koşulsuz olarak yapılır. Bu HTML, etkileşimli sayfanızı görüntülemek için yüklenmesi gereken kritik CSS veya JavaScript dosyalarına kod gömülü referanslar içerebilir. Bu isteklerin tümü kritik yükleme yolunuzda bulunur. Güvenilir bir şekilde hızlı olmaları için bunları yoğun bir şekilde önbelleğe almanız gerekir.
API istekleri veya geç yüklenen öğeler gibi diğer kaynaklar, ilk yüklemenin tamamı tamamlanana kadar yüklenmeye başlamayabilir. Bu istekler yalnızca belirli bir kullanıcı etkileşimi sırasının ardından gerçekleşirse aynı sayfaya yapılan birden fazla ziyarette tamamen farklı bir kaynak kümesi istenebilir. Kritik yükleme yolunun dışında olduğunu tanımladığınız içerik için daha az agresif bir önbelleğe alma stratejisi genellikle uygundur.
Ad ve Tür sütunları, sütununuza
Ad ve Tür sütunları, nelerin yüklendiğine dair anlamlı bir resim sağlamaya 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'den oluşur.
Ad, tarayıcınızın istediği URL'yi temsil eder, ancak URL yolunun yalnızca son kısmını listelenmiş olarak görürsünüz. Örneğin, https://example.com/main.css yüklenirse yalnızca main.css öğesini Ad altında listelenmiş olarak görürsünüz.
Noktadan sonra gelen son birkaç karakter (ör. "css"), URL uzantısı olarak bilinir.
URL'nin uzantısı, genellikle ne tür bir kaynağın istendiğini bildirir ve doğrudan Tür sütununda gösterilen bilgilerle eşlenir. Örneğin, v2.html bir doküman, main.css ise bir stil sayfasıdır.
Şelale sütunu, bir reklamın ne zaman
Yukarıdan başlayıp aşağı doğru devam ederek Şelale sütununu inceleyin. Her bir çubuğun uzunluğu, her bir kaynağın yüklenmesi için harcanan toplam süreyi gösterir. Kritik yükleme yolunun bir parçası olarak yapılan bir istek ile sayfanın ilk yüklemesi tamamlandıktan çok uzun bir süre sonra dinamik olarak tetiklenen bir istek arasındaki farkı nasıl ayırt edebilirsiniz?
Şelaledeki ilk istek her zaman HTML belgesine yönelik olacaktır (örneğin, v2.html). HTML dokümanının referansta bulunduğu resimlere, komut dosyalarına ve stillere bağlı olarak, sonraki tüm isteklerin akışı (şelale gibi!) bu ilk gezinme isteğinden başlar.
Şelale, v2.html uygulamasının yüklenmesi biter bitmez referans verdiği öğelere (alt kaynaklar olarak da adlandırılır) yönelik isteklerin başladığını gösteriyor. Tarayıcı aynı anda birden fazla alt kaynak isteyebilir. Bu, main.css ve logo.svg için Şelale sütununda çakışan çubuklarla temsil edilir. Son olarak, ekran görüntüsünden, main.js ürününün en son yüklenmeye başladığını ve diğer üç URL de tamamlandıktan sonra yüklendiğini görebilirsiniz.