Sitenizin yükleme ve çalışma zamanı performansı hakkında hızlıca fikir edinmek için Performans İzleyici'yi kullanın.
Genel Bakış
Performans İzleyici panelinde, performans metriklerini gerçek zamanlı olarak grafik hâlinde gösteren bir zaman çizelgesi gösterilir. Göstermek veya gizlemek istediğiniz metriği tıklayın. Ardından, uygulamanızla etkileşim kurarken grafiğin nasıl değiştiğini görün.
Performans İzleyici aşağıdaki metrikleri izler:
- CPU kullanımı.
- JavaScript yığın boyutu.
- Sayfadaki DOM düğümlerinin, JavaScript etkinlik işleyicilerinin, belgelerin ve çerçevelerin toplam sayısı.
- Saniye başına düzen ve stil yeniden hesaplamaları.
Performans İzleyici panelini açma
Performans İzleyici panelini açmak için:
- DevTools'u açın.
- Aşağıdaki tuşlara basarak Komut menüsünü açın:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Denetleyici+Üst Karakter+P
Performance monitoryazmaya başlayın, Performans İzleyici'yi göster'i seçin ve Enter tuşuna basın. DevTools, DevTools pencerenizin alt kısmında Performans İzleyici panelini gösterir.
Alternatif olarak, sağ üst köşede Diğer seçenekler > Diğer araçlar > Performans İzleyici'yi seçin.
Performans İzleyici panelini kullanma
Performans İzleyici, web sitenizin çalışma zamanındaki performansı hakkında genel bir fikir verir.
Web sitenizle etkileşim kurarken metrik değerlerinin nasıl değiştiğini gözlemlemek, iyileştirme fırsatları ortaya çıkarabilir.
Performans İzleyici'nin yararlı özelliklerinden biri, sayfa gezinme sırasında kalıcı olmasıdır. Bu nedenle, ön uç geliştirici olarak Performans İzleyici'yi açarak, web sitelerinde gezinerek ve DOM Düğümleri ile Düzen/sn metriklerini izleyerek düzen karmaşası gibi sorunlardan kaçınabilirsiniz.
Kullanıcılar sitenizde yavaş yükleme süreleri olduğunu bildiriyorsa Performans İzleyici, sorunlu alanları belirlemenize yardımcı olabilir.
Örneğin, CPU kullanımında büyük bir artış, verimsiz bir koda işaret edebilir. Genel olarak, bir sayfa çok sayıda JS etkinlik dinleyicisi içeriyorsa bellek boşaltmak için kodunuzu yeniden yapılandırmanız ve bu sayıları azaltmanız yararlı olabilir.
Performansı analiz etmeye yeni başladıysanız önerilen yol, önce Lighthouse panelini kullanmak, ardından Performans panelini veya Performans İzleyici'yi kullanarak daha ayrıntılı inceleme yapmaktır.