Performans paneli: Web sitenizin performansını analiz edin

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 etme yöntemlerini bulmak için profilleri analiz edin.

Aşağıdaki işlemleri yapmak için Performans panelini kullanın:

• Performans profili kaydetme
• Çekim ayarlarını değiştirme
• Performans raporunu analiz etme

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çma

Performans panelini açmak için Geliştirici Araçları'nı açın ve üstteki sekme grubundan Performans'ı seçin.

Alternatif olarak, Komut menüsü ile Performans panelini açmak için aşağıdaki adımları uygulayın:

1. Geliştirici Araçları'nı açın.
2. Aşağıdaki tuşlara basarak Komut menüsünü açın:
3. macOS: Command+üst karakter+P
4. Windows, Linux, ChromeOS: Control+Shift+P
5. 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) metrikleriniz hemen yakalanıp gösterilir ve puanları (iyi, iyileştirme gerekiyor veya kötü) belirtilir.

Sayfanızla etkileşimde bulunursanız Performans paneli, yerel Interaction to Next Paint (INP) değerinizi ve puanını da yakalar. Bu değer ve puan, LCP ve CLS'ye ek olarak ağ bağlantınızı ve cihazınızı kullanarak sayfanızın Core Web Vitals değerlerine dair eksiksiz bir genel bakış sunar.

Etkileşimler ve Düzen kaymaları sekmelerindeki üç metrik kartının altında, etkileşimler ve düzen kaymalarıyla ilgili bilgilerin yer aldığı tabloları bulabilirsiniz. Bu bilgiler arasında öğeler, zamanlamalar, aşamalar (etkileşimler için) ve puanlar (düzen kaymaları için) yer alır. Her iki listeyi de temizlemek için Engelle Temizle'yi tıklayın.

Metrik puanının dökümünü görmek için fareyle metrik değerinin üzerine gelerek ipucu görünümünü inceleyin.

Deneyiminizi kullanıcılarınızın deneyimiyle karşılaştırma

Ayrıca Chrome UX Report'tan alan verilerini getirebilir ve sitenizin kullanıcılarının deneyimini yerel metriklerinizle karşılaştırabilirsiniz.

Alan verileri eklemek için:

1. Performans > Sonraki adımlar > Alan verileri bölümünde Ayarlayın'ı tıklayın.

   

2. Alan verisi getirme işlemini yapılandırın iletişim kutusunda Gizlilik açıklaması'nı inceleyin 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 (birden fazla) eşleme oluşturabilirsiniz:

   1. İletişim kutusunda Gelişmiş bölümünü genişletin ve + Yeni'yi tıklayın.

   2. Eşleme tablosunda geliştirme ve üretim URL'lerinizi girip + simgesini tıklayın.

      

      Örneğin, http://localhost:8080 ile https://example.com arasındaki eşleme, localhost:8080/page1'e gittiğinizde example.com/page1 için alan verilerini getirir.

      Ayrıca, alan verilerini otomatik olarak alamıyorsanız check_boxAşağıdaki URL ile ilgili alan verilerini her zaman göster'i etkinleştirebilir ve bir URL sağlayabilirsiniz. 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 verilerini getirme ayarlarınızı değiştirmek için Alan verileri > Yapılandır'ı tıklayın.

   Alan verileri getirme ayarı yapıldıktan sonra Performans panelinde artık yerel metrik puanlarınız ile kullanıcılarınızın deneyimlediği puanlar arasında bir karşılaştırma gösterilir. Toplama dönemini sağdaki Alan verileri bölümünde görebilirsiniz.

   

   Metrik puanının dökümünü görmek için fareyle metrik değerinin üzerine gelerek ipucu görünümünü inceleyin.

Ortamınızı kullanıcılarınızın ortamına daha iyi uyacak şekilde yapılandırma

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 nasıl yapılandıracağınızla ilgili öneriler sunar.

Ortamınızı yapılandırmak için:

1. 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, kullanıcılarınızın deneyimine daha iyi uyum sağlamak için yaygın bir masaüstü ekran boyutu kullanmak ve CPU ile ağı kısıtlamak isteyebilirsiniz.

2. Bu örnekteki ortam yapılandırmasıyla eşleşmek için:

   1. Görüntü alanınızı yaygın ekran boyutlarından birine (örneğin, 720p veya 1080p) ayarlayın. Belirli cihazları ve ekran boyutlarını taklit etmek için Öğeler panelindeki Cihaz modu'nu kullanabilirsiniz.
   2. Bu örnekteki web sitesinin kullanıcılarının% 82'si 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.
   3. Ortam ayarları bölümünde, Ağ açılır listesini örneğin Hızlı 4G, CPU açılır listesini ise örneğin 20 kat yavaşlama olarak ayarlayın. Aynı bölümde check_box Ağ önbelleğini devre dışı bırak'ı da işaretleyebilirsiniz.

3. Ortamınız yapılandırıldıktan sonra sayfayı yeniden yükleyin, yerel INP'nizi yakalamak için sayfayla etkileşim kurun ve metrik puanlarını tekrar karşılaştırın.

   

   Metrik puanları artık kullanıcılarınızın deneyimlediği puanlara daha çok benziyor. Bu nedenle, Yerel test koşullarınızı göz önünde bulundurun bölümleri metrik kartlarından kaldırıldı.

Böylece, web sitenizin Core Web Vitals metriklerini iyileştirmeye başlayabilirsiniz:

• LCP'yi optimize edin
• INP'yi optimize etme
• CLS'yi optimize edin

Performans raporu yakalama ve analiz etme

Sonraki bölümlerde, profil kaydetme, yakalama ayarlarını değiştirme ve raporu analiz etme ile ilgili talimatları uygulayın.

Performans profili kaydetme

Kayda hazır olduğunuzda Performans panelinde aşağıdaki seçenekler sunulur:

• Ç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 toplama işlemini zorunlu kılma
• Kaydı kaydetme
• Kayıt yükleme
• Kaydı temizleme

Çekim ayarlarını değiştirme

Kaydetme ayarları, Geliştirici Araçları'nın performans kayıtlarını nasıl yakaladığını değiştirmenize olanak tanır ve raporda ek bilgiler sunabilir. Kayıt ayarları menüsüne erişmek için Kayıt ayarları settings seçeneğini tıklayın.

Çekim 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 izde gösterilen JavaScript çağrı yığınlarının kaydedilmesini devre dışı bırakır. Performans ek yükünü azaltır.
• Gelişmiş boyama araçlarını etkinleştirme (yavaş): Gelişmiş boyama araçlarını yakalar. Performansı önemli ölçüde engeller.
• CSS seçici istatistiklerini etkinleştirin (yavaş): CSS seçici istatistiklerini kaydeder. Performansı önemli ölçüde engeller.
• CPU sınırlaması: Daha düşük CPU hızlarını simüle edin.
• Ağ sınırlama: Daha yavaş ağ hızlarını simüle edin.

Performans raporunu analiz etme

Performans panelini kullanmayla ilgili eksiksiz bir kılavuz için Performans kaydını analiz etme başlıklı makaleyi inceleyin.

Aşağıda, rehberdeki konuların gruplandırılmış hâli ve diğer faydalı dokümanlar yer almaktadır:

Rapor içinde gezinmeyi öğrenmek için:

• Kaydedilen toplantıda gezinme
• Arama etkinlikleri
• Etkinlik başlatıcılarını izleme

Web sitenizin performansıyla ilgili uygulanabilir analizler almak için Performans Analizleri'ni kullanın:

• Performans Analizleri

İş 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 parçaları gizleme
• Alev grafiğinde işlevleri ve alt öğelerini gizleme
• İçerik haritası oluşturma ve yakınlaştırma düzeyleri arasında geçiş yapma

Aşağıdan yukarıya, Arama ağacı ve Etkinlik günlüğü sekmeleri hakkında bilgi edinmek için:

• Etkinlikleri tabloda görüntüleme

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ünü görüntüleme
• Bellek metriklerini görüntüleme
• Kaydın bir bölümü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ı artırmanıza yardımcı olabilecek diğer panelleri keşfedin:

• Lighthouse: Web sitesi hızını optimize etme
• Bellek: Bellek paneline genel bakış
• Oluşturma: Oluşturma performansıyla ilgili sorunları keşfedin
• Sorunlar: Problemleri bulma ve düzeltme
• Performans: Katman bilgilerini görüntüleme

Ek kaynaklar