Performans izleme paneli

Dale St. Marthe

Sitenizin yük ve çalışma zamanı performansı hakkında hızlı bir şekilde fikir edinmek için Performans izleyicisini kullanın.

Genel bakış

Performans izleyici paneli, performans metriklerini gerçek zamanlı olarak gösteren bir zaman çizelgesi görüntüler. Göstermek veya gizlemek için bir metriği tıklayın. Sonra, uygulamanızla etkileşim kurdukça grafiğin nasıl değiştiğini görün.

Performans izleyici aşağıdaki metrikleri izler:

• CPU kullanımı.
• JavaScript yığın boyutu.
• Sayfadaki DOM düğümlerinin, JavaScript etkinlik işleyicilerin, dokümanların ve çerçevelerin toplam sayısı.
• Saniye başına düzenler ve stil için yeniden hesaplamalar.

Performans izleme panelini aç

Performans izleyici panelini açmak için:

1. Geliştirici Araçları'nı açın.
2. Aşağıdaki tuşlara basarak Komut menüsünü açın:
   • macOS: Command+Üst Karakter+P
   • Windows, Linux, ChromeOS: Control+Üst Karakter+P
3. Performance monitor yazmaya başlayın, Performans İzleyiciyi Göster'i seçin ve Enter tuşuna basın. Geliştirici Araçları, Geliştirici Araçları pencerenizin en altında Performans izleme panelini gösterir.

Alternatif olarak, sağ üst köşede more_vert Diğer seçenekler > Diğer araçlar > Performans izleyici'yi seçin.

Performans izleme panelini kullanma

Performans izleyicisi web sitenizin çalışma zamanı performansı hakkında genel bir fikir verir.

Web sitenizle etkileşim kurduğunuzda metrik değerlerinin nasıl değiştiğini gözlemlemek, iyileştirme fırsatlarını ortaya çıkarabilir.

Performans İzleyicisi'nin yararlı bir özelliği de sayfada gezinme boyunca sabit kalmasıdır. Böylece, ön uç geliştiricisi olarak Performans izleyicisi'ni açıp web sitesinde gezinerek ve DOM Düğümleri ile Düzen/sn metriklerine göz atarak düzenin takılması gibi sorunlardan kaçınabilirsiniz.

Kullanıcılar sitenizin yükleme sürelerinin kısa olduğunu bildiriyorsa Performans izleyici sorunlu alanları belirlemenize yardımcı olabilir.

Örneğin, CPU kullanımındaki büyük bir artış, verimsiz koda işaret edebilir. Genel olarak, bir sayfada çok sayıda JS etkinlik işleyici varsa kodunuzu yeniden düzenlemek ve bellekte yer açmak için bu sayıları azaltmak faydalı olabilir.

Performansı analiz etmeye yeni başlıyorsanız önerilen yol, önce Lighthouse panelini kullanmanız, ardından Performans panelini veya Performans izleyicisi'ni kullanarak daha ayrıntılı araştırma yapmanızdır.