Web sitenizin performansını analiz etmek için Performans panelini kullanın.
Genel Bakış
Performans paneli, web uygulamalarınızın CPU performans profillerini kaydetmenize olanak tanır. Olası performans sorunlarını ve kaynak kullanımını optimize etmenin yollarını bulmak için profilleri analiz edin.
Performans panelini kullanarak aşağıdakileri yapabilirsiniz:
- Performans profili kaydetme.
- Yakalama ayarlarını değiştirin.
- Bir performans raporunu analiz edebilirsiniz.
Web sitenizin performansını artırmayla ilgili kapsamlı bir kılavuz için Çalışma zamanı performansını analiz etme başlıklı makaleyi inceleyin.
Performans panelini aç
Performans panelini açmak için Geliştirici Araçları'nı açın ve üstteki sekmeden Performans'ı seçin.
Alternatif olarak, Komut menüsü ile Performans panelini açmak için şu adımları izleyin:
- Geliştirici Araçları'nı açın.
- Şu tuşlara basarak Komut menüsünü açın:
- macOS: Command+Üst Karakter+P
- Windows, Linux, ChromeOS: Control+Üst Karakter+P
Performance panelyazmaya başlayın, Performans panelini göster'i seçin ve Enter tuşuna basın.
Performans profili kaydetme
Kaydetmeye hazır olduğunuzda Performans paneli size aşağıdaki seçenekleri sunar:
- Çalışma zamanı performansını kaydetme
- Yükleme performansını kaydetme
- Kayıt sırasında ekran görüntüsü alma
- Kayıt sırasında atık toplamayı zorunlu kılma
- Kaydı kaydetme
- Kayıt yükleme
- Kaydı temizleme
Yakalama ayarlarını değiştir
Yakalama ayarları, Geliştirici Araçları'nın performans kayıtlarını yakalama şeklini değiştirmenize olanak tanır ve raporda size ek bilgiler sağlayabilir. Fotoğraf çekme ayarları'nı tıklayın Yakalama ayarları menüsüne erişmek için ayarları kullanın.
Yakalama ayarları menüsünde aşağıdaki seçenekleri belirleyin:
- JavaScript örneklerini devre dışı bırak: Ana kanalda görüntülenen ve kayıt sırasında çağrılan JavaScript çağrı yığınlarının kaydını devre dışı bırakır. Genel performans yükünü azaltır.
- Gelişmiş boyama enstrümantasyonunu etkinleştir (yavaş): Gelişmiş boyama enstrümantasyonunu yakalar. Performansı önemli ölçüde engeller.
- CSS seçici istatistiklerini etkinleştir (yavaş): CSS seçici istatistiklerini yakalar. Performansı önemli ölçüde engeller.
- CPU kısıtlama: Daha yavaş CPU hızlarını simüle edin.
- Ağ sınırlama: Daha yavaş ağ hızlarını simüle edin.
- Donanım eşzamanlılığı:
navigator.hardwareConcurrencytarafından bildirilen değeri yapılandırın.
Performans raporunu analiz etme
Performans panelinin nasıl kullanılacağıyla ilgili eksiksiz bir rehber için Performans kaydını analiz etme bölümüne bakın.
Aşağıda, rehberdeki konular ve diğer yararlı dokümanlar sunulmaktadır:
Raporda nasıl gezineceğinizi öğrenmek için:
İş akışınız için önemli olan konulara nasıl odaklanacağınızı öğrenmek için:
- Parçaların sırasını değiştirme ve gizleme
- İşlevleri ve alt öğelerini flame grafiğinde gizleme
- İçerik haritası oluşturma ve yakınlaştırma seviyeleri arasında geçiş yapma
Aşağıdan yukarıya, Çağrı ağacı ve Etkinlik günlüğü sekmeleri hakkında bilgi edinmek için:
Raporu nasıl analiz edeceğinizi öğrenmek için:
- Ana ileti dizisi etkinliğini görüntüleme
- flame grafiğini okuyun
- Ekran görüntüsü göster
- Bellek metriklerini görüntüleme
- Kaydın bir kısmının süresini görüntüleme
- Stili Yeniden Hesapla etkinlikleri sırasında CSS seçici performansını analiz etme
- Performans paneliyle Node.js profili performansı
- Saniyedeki kare sayısını (FPS) analiz etme
- Zaman çizelgesi etkinlik referansı
Bu panellerle performansı artırın
Web sitenizin performansını artırmanıza yardımcı olabilecek diğer panelleri keşfedin:
- Lighthouse: Web sitesi hızını optimize etme
- Bellek: Bellek paneline genel bakış
- Performans analizleri: Web sitenizin performansıyla ilgili uygulanabilir analizler elde edin
- Oluşturma: Oluşturma performansıyla ilgili sorunları keşfetme
- Sorunlar: Sorunları bulma ve düzeltme
- Performans: Katman bilgilerini görüntüleme