Resource Waterfall, sayfanın yaptığı her isteği bir zaman çizelgesinde çizer; her çubuk, FCP, LCP, DOMContentLoaded ve yükleme işaretleriyle birlikte gerçek aşamalarına (kuyruğa alınmış, DNS, TCP, TLS, bekleme ve indirme) ayrılır.
Bir sayfa yavaşladığında soru her zaman aynıdır: Neyi bekliyor? Tarayıcının kendi yanıtı Ağ panelinde bulunur; bu, DevTools'u açmak, incelemekte olduğunuz sayfanın üzerine bir çekmece yerleştirmek ve yükün başlangıcını yakalamak için yeniden yüklemek anlamına gelir.
Resource Waterfall, bu zaman çizelgesini sayfanın yanındaki kayan bir panele yerleştirir. Her istek, başlatıldığı zamana göre konumlandırılmış ve zamanının gerçekte gittiği yere göre bölümlere ayrılmış bir çubuk olarak görünür: sıraya alınmış veya durdurulmuş, DNS araması, TCP bağlantısı, TLS anlaşması, sunucuyu bekleme ve ardından indirme. Uzun mavi bölüm yavaş bir sunucudur; uzun yeşil olan kalın bir dosyadır; uzun gri olan, isteğin sırasını beklediği anlamına gelir. Ayrım neyi düzeltmeniz gerektiğine karar verir.
Zaman çizelgesindeki kesikli işaretleyiciler İlk İçerikli Boya, En Büyük İçerikli Boya, DOMContentLoaded ve yüklemeyi gösterir; böylece kullanıcı herhangi bir şey görmeden hangi isteklerin bittiğini ve hangilerinin daha sonra devam ettiğini görebilirsiniz. İşlemeyi engelleyen kaynaklar ve önbellek isabetleri her satırda işaretlenir ve tek bir Engelleme filtresi, listeyi ilk boyamayı gerçekten geciktiren şeye göre kısaltır.
En kötü suçluyu hızlı bir şekilde bulmak için türe göre filtreleyin, URL'ye göre arayın veya en yavaş veya en büyüğe göre sıralayın. Tam URL'si, protokolü, aktarım ve kodu çözülmüş boyutları, durumu ve tam aşama dökümü için herhangi bir satıra tıklayın. Panel açıkken gelen istekler doğrudan akışa alınır ve JSON'u Dışa Aktarma, kilometre taşları da dahil olmak üzere tüm zaman çizelgesini kopyalar, böylece performans bulgusu ekran görüntüsü olmadan başka birine iletilebilir.
Her çubuk sıraya alınmış, DNS, TCP, TLS, bekleme ve indirmeye bölünmüştür, böylece yavaş bir sunucu, büyük bir dosya ve sıraya alınmış bir istek hemen ayırt edilebilir.
FCP, LCP, DOMContentLoaded ve yükleme için kesikli çizgiler, kullanıcı içeriği görmeden önce hangi isteklerin tamamlandığını ve hangilerinin ondan sonra çalışmaya devam ettiğini gösterir.
Tek tıklamayla liste, özet çubuğundaki toplam engelleme sayılarıyla birlikte ilk boyamayı gerçekten tutan kaynaklara indirgenir.
Önbellekten sunulan kaynaklar, gizemli sıfır baytlık satırlar olarak görünmek yerine işaretlenir ve etiketlenir, böylece önbelleğe alma işleminizin gerçekten işe yaradığını doğrulayabilirsiniz.
Türe göre daraltın (belge, CSS, JS, görseller, yazı tipleri, XHR, medya) URL'ye göre arayın veya en kötü suçluya saniyeler içinde ulaşmak için en yavaş veya en büyüğe göre sıralayın.
Bir bilete eklemek veya daha sonraki bir çalıştırmayla karşılaştırmak için kilometre taşları, toplamlar ve istek başına aşamalar da dahil olmak üzere şelalenin tamamını JSON olarak kopyalayın.
Oluşturmayı engelleyen kaynakları filtreleyin ve ziyaretçinizle görünür içerik arasında duran stil sayfalarını ve komut dosyalarını tam olarak görün.
En yavaşına göre sıralayın ve kodunuzla hiçbir ilgisi olmayan uzun bir bekleme aşamasıyla bir analizin, yazı tipinin veya sohbet sağlayıcının en üstte görünmesini izleyin.
Aşama renklerini okuyun: beklemek için harcanan zaman bir arka uç veya CDN sorunudur, indirmek için harcanan zaman ise dosya boyutu sorunudur. Düzeltme her biri için farklıdır.
Yeniden yükleyin ve varlıkların önbellekten geldiğini ve aktarım boyutlarının kodu çözülmüş boyutlardan çok daha küçük olduğunu doğrulayın; bu da sıkıştırmanın gerçekten açık olduğunu kanıtlar.
Zaman çizelgesini JSON olarak dışa aktarın ve bir bilete ekleyin; böylece bir sonraki kişi, oturumunuzu yeniden oluşturmaya çalışmak yerine aynı sayıları görür.
DevSuite Pro dock'taki Resource Waterfall simgesine tıklayın. Sayfanın şu ana kadar yüklediği her şey zaman çizelgesinde anında görünür.
Belgenin kendisi ve boyama aşamaları da dahil olmak üzere ilk istekten itibaren yükü yakalamak için panel açıkken yeniden yükleyin.
Yalnızca oluşturmayı engelleyen kaynakları görmek için engelleme çipine basın veya js veya img gibi bir tür seçin. En kötü suçluyu en üste koymak için en yavaşa göre sıralayın.
Tam URL'si, protokolü, boyutları, durumu ve milisaniye cinsinden aşama aşama dökümü için herhangi bir satıra tıklayın ve ihtiyacınız varsa URL'yi kopyalayın.
JSON'u dışa aktarma, kilometre taşları ve toplamlarla birlikte tam zaman çizelgesini bir bilete yapıştırmaya veya öncesi ve sonrası kaydı olarak saklamaya hazır şekilde kopyalar.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 71'dan fazla geliştirici aracının kilidini açın.
