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 yollarını bulmak için profilleri analiz edin.

Performans panelini kullanarak şunları yapabilirsiniz:

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

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ç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: Ctrl+Üst Karakter+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şim kurarsanız Performans paneli, yerel Interaction to Next Paint (INP) değerinizi ve puanını da yakalar. Bu sayede, LCP ve CLS'ye ek olarak ağ bağlantınızı ve cihazınızı kullanarak sayfanızın Core Web Vitals hakkında eksiksiz bir genel bakış elde edersiniz. Ayrıca, tek sayfalık uygulamalarda istemci taraflı yumuşak gezinmeler için Core Web Vitals'ı yakalar ve raporlar.

Etkileşimler ve Düzen kaymaları sekmelerindeki üç metrik kartının altında, yakalanan etkileşimler ve düzen kaymaları hakkında bilgiler içeren tablolar bulunur. Bu tablolarda öğ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 alabilir 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şturun...

   İsterseniz en alakalı alan verilerini otomatik olarak almak için geliştirme ve üretim kaynaklarınız arasında (birden fazla) eşleme ayarlayabilirsiniz:

   1. İletişim penceresinde 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, herhangi bir nedenle alan verilerini otomatik olarak alamıyorsanız check_boxAşağıdaki URL ile ilgili alan verilerini her zaman göster onay kutusunu etkinleştirip 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 özelliği ayarlandığında 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.

   

   Bir metrik puanının dökümünü görmek için fareyle metrik değerinin üzerine gelerek ipucunu görüntüleyin.

Ortamınızı kullanıcılarınızın ortamına daha uygun olacak ş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 deneyimini daha iyi eşleştirmek 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ını eşleştirmek için:

   1. Görüntü alanınızı yaygın ekran boyutlarından birine (ör. 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 Hızlı 4G, CPU'yu ise 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 oluşturma 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
• Kayıtları saklama
• Kayıt yükleme
• Kaydı temizleme

Yakalama ayarlarını değiştirme

Yakalama ayarları, Geliştirici Araçları'nın performans kayıtlarını yakalama şeklini değiştirmenize olanak tanır ve raporda ek bilgiler sağlayabilir. Yakalama ayarları menüsüne erişmek için Yakalama ayarları'nı settings 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 yükünü azaltır.
• Gelişmiş boyama araçlarını etkinleştir (yavaş): Gelişmiş boyama araçlarını yakalar. Performansı önemli ölçüde düşürür.
• CSS seçici istatistiklerini etkinleştirin (yavaş): CSS seçici istatistiklerini kaydeder. Performansı önemli ölçüde düşürür.
• CPU sınırlaması: Daha yavaş CPU hızlarını simüle edin.
• Ağ sınırlama: Daha yavaş ağ hızlarını simüle edin.
• Ekran görüntüsü yakalama: Ekran görüntüleri etkinleştirildiğinde bir ekran görüntüsü kare boyutu ve sayı sınırı ön ayarı seçin.

Performans raporunu analiz etme

Performans panelinin nasıl kullanılacağına dair eksiksiz bir kılavuz için Performans kaydını analiz etme başlıklı makaleyi inceleyin.

Aşağıda, kılavuzdaki konuların bir gruplandırması ve diğer faydalı dokümanlar sunulmaktadır:

Raporda nasıl gezineceğinizi öğrenmek için:

• Kaydı inceleme
• 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
• Flame 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, Çağrı ağacı ve Olay 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
• Flame 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