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. Potansiyel performans sorunlarını ve kaynak kullanımını optimize edebileceğiniz yöntemleri bulmak için profilleri analiz edin.
Performans panelini kullanarak aşağıdakileri yapabilirsiniz:
- Performans profili kaydetme.
- Kayıt ayarlarını değiştirin.
- Bir performans raporunu analiz edin.
Web sitenizin performansını iyileştirmeyle 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 DevTools'u açın ve üstteki sekmelerden 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.
- Aşağıdaki tuşlara basarak Komut menüsünü açın:
- macOS: Command+Üst Karakter+P
- Windows, Linux, ChromeOS: Control+Üst Karakter+P
Performance panel
yazmaya başlayın, Performans panelini göster'i seçin ve Enter tuşuna basın.
Core Web Vitals'ı canlı olarak gözlemleme
Performans panelini açtığınızda, yerel Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS) metrikleri hemen yakalanıp size puanları (iyi, iyileştirme gerekli veya kötü) gösterir.
Sayfanızla etkileşimde bulunursanız Performans paneli, yerel Sonraki Boyamayla Etkileşimi (INP) ve puanını da kaydeder. Bu puan, LCP ve CLS'ye ek olarak, ağ bağlantınızı ve cihazınızı kullanarak sayfanızın Önemli Web Verileri'ne dair eksiksiz bir genel bakış sunar.
Performans paneli, üç metrik kartının altında yakalanan etkileşimlerin listesini sunar. Listeyi temizlemek için
Temizle'yi tıklayın.Bir metrik puanının dökümünü almak için fareyle metrik değerinin üzerine gelerek ipucunu görün.
Deneyiminizi, kullanıcılarınızın deneyimiyle karşılaştırın
Ayrıca, Chrome Kullanıcı Deneyimi Raporu'ndan alan verilerini getirebilir ve site kullanıcılarının deneyimini yerel metriklerinizle karşılaştırabilirsiniz.
Alan verileri eklemek için:
Performans > Sonraki adımlar > Alan verileri bölümünde Ayarla'yı tıklayın.
Alan verilerini getirmeyi yapılandır iletişim kutusunda, Gizlilik açıklaması'nı not edin ve Tamam'ı tıklayın.
Gelişmiş: Geliştirme ve üretim ortamları arasında eşleme oluşturma...
Dilerseniz en alakalı alan verilerini otomatik olarak almak için geliştirme ve üretim kaynaklarınız arasında eşlemeler (birden fazla) oluşturabilirsiniz:
- İletişim penceresinde Gelişmiş bölümünü genişletin ve + Yeni'yi tıklayın.
Eşleme tablosuna geliştirme ve üretim URL'lerinizi girin ve + simgesini tıklayın.
Örneğin,
http://localhost:8080
ilehttps://example.com
arasında yapılan bir eşleme,localhost:8080/page1
'e gittiğinizdeexample.com/page1
için alan verilerini gösterir.Ayrıca, herhangi bir nedenle alan verilerini otomatik olarak alamazsanız
Aşağıdaki URL için alan verilerini her zaman göster ayarını açabilir ve bir URL girebilirsiniz. Performans paneli, önce bu URL'nin alan verilerini getirmeye çalışır ve ardından hangi sayfaya giderseniz gidin bu alan verilerini gösterir.Kurulumdan sonra alan verisi getirme ayarlarınızı değiştirmek için Alan verileri > Yapılandır'ı tıklayın.
Alan verilerini getirme ayarı yapıldıktan sonra Performans paneli artık yerel metrik puanlarınız ile kullanıcılarınızın elde ettiği puanlar arasında bir karşılaştırma gösteriyor. Toplama süresini sağdaki Alan verileri bölümünde görebilirsiniz.
Bir metrik puanının dökümünü almak için fareyle metrik değerinin üzerine gelerek ipucunu görün.
Ortamınızı, kullanıcılarınızın ortamına daha uygun olacak şekilde yapılandırın
Alan verisi getirme işlemi önceki bölümde açıklandığı şekilde ayarlandığında Performans paneli, ortamınızı kullanıcılarınızın deneyimiyle daha iyi eşleşecek şekilde yapılandırmayla ilgili öneriler sunar.
Ortamınızı yapılandırmak için:
Her metrik kartında, varsa Yerel test koşullarınızı göz önünde bulundurun bölümünü genişletin ve önerileri okuyun.
Bu örnekte olduğu gibi, kullanıcılarınızın deneyimini daha iyi eşleştirmek için yaygın bir masaüstü ekran boyutu kullanarak CPU'yu ve ağı daraltabilirsiniz.
Bu örnekteki ortam yapılandırmasını eşleştirmek için:
- Görüntü alanınızı yaygın ekran boyutlarından birine (ör. 720p veya 1080p) ayarlayın. Belirli cihazların ve ekran boyutlarının emülasyonu için Öğeler panelindeki Cihaz modunu kullanabilirsiniz.
- Bu örnekte web sitesinin kullanıcılarının% 82'si ürünlere göz atmak için masaüstü bilgisayar kullanıyor. Yerel metrik puanlarınızı doğru alan verileriyle karşılaştırdığınızdan emin olmak için Alan verileri > Cihaz açılır listesinden Masaüstü'nü seçebilirsiniz.
- Ortam ayarları bölümünde, Ağ açılır listesini Hızlı 4G ve CPU'yu (örneğin, 20x yavaşlama) ayarlayın. Aynı bölümde Ağ önbelleğini devre dışı bırak seçeneğini belirlediğinizden de emin olabilirsiniz.
Ortamınız yapılandırıldıktan sonra sayfayı yeniden yükleyin, yerel INP'nizi yakalamak için sayfayla etkileşimde bulunun ve metrik puanlarını tekrar karşılaştırın.
Metrik puanları artık kullanıcılarınızın deneyimlerine daha yakın görünüyor. Bu nedenle Yerel test koşullarınızı göz önünde bulundurun bölümleri metrik kartlarından kaldırıldı.
Bu sayede artık web sitenizin Önemli Web Verileri'ni iyileştirmeye başlayabilirsiniz:
Performans raporu yakalama ve analiz etme
Sonraki bölümlerde, profil kaydetme, yakalama ayarlarını değiştirme ve raporu analiz etmeyle ilgili talimatları uygulayı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ı zorlama
- Kaydı kaydetme
- Kayıt yükleme
- Kaydı temizleme
Yakalama ayarlarını değiştir
Kayıt ayarları, DevTools'un performans kayıtlarını nasıl yakaladığını değiştirmenize olanak tanır ve raporda size ek bilgiler verebilir. Kayıt ayarları menüsüne erişmek için Kayıt ayarları
'nı tıklayın.Kayıt ayarları menüsünden aşağıdaki seçenekleri belirleyin:
- JavaScript örneklerini devre dışı bırak: Kayıt sırasında çağrılan ve Ana kanalda gösterilen 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 engelliyor.
- CSS seçici istatistiklerini etkinleştir (yavaş): CSS seçici istatistiklerini yakalar. Performansı önemli ölçüde engeller.
- CPU sınırlaması: Daha yavaş CPU hızlarını simüle eder.
- Ağ sınırlama: Daha yavaş ağ hızlarını simüle edin.
- Donanım eşzamanlılığı:
navigator.hardwareConcurrency
tarafından bildirilen değeri yapılandırın.
Performans raporunu analiz etme
Performans panelinin nasıl kullanılacağıyla ilgili tam kılavuz için Performans kaydını analiz etme başlıklı makaleyi inceleyin.
Aşağıda, kılavuzdaki konuların yanı sıra diğer yararlı dokümanlar gruplandırılmıştır:
Raporda nasıl gezineceğinizi öğrenmek için:
İş akışınız için önemli olana nasıl odaklanacağınızı öğrenmek istiyorsanız:
- Parçaların sırasını değiştirme ve parçaları gizleme
- Alev grafiğinde işlevleri ve alt öğelerini gizleme
- Breadcrumbs oluşturma ve yakınlaştırma seviyeleri arasında atlama
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
- Alev grafiğini okuma
- 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 performansını profilleme
- Saniyedeki kare sayısını (FPS) analiz etme
- Zaman çizelgesi etkinlik referansı
Bu panellerle performansı artırın
Web sitenizin performansını iyileştirmenize 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 edinin
- Oluşturma: Oluşturma performansıyla ilgili sorunları keşfetme
- Sorunlar: Sorunları bulma ve düzeltme
- Performans: Katman bilgilerini görüntüleme