Bu sayfa, Cloud Translation API ile çevrilmiştir.

Performans paneli: Web sitenizin performansını analiz edin

Dale St. Marthe

Sofia Emelianova

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ğıdakileri yapmak için Performans panelini kullanın:

Performans profili kaydetme
Yakalama 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 bir dizi sekmeden Performans'ı seçin.

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

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+Shift+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) metrikleriniz hemen yakalanır ve gösterilir. Ayrıca, bu metriklerin puanı (iyi, iyileştirme gerekli veya kötü) da 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 Önemli Web Verileri hakkında 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ı (öğeler, zamanlamalar, aşamalar (etkileşimler için) ve puanlar (düzen kaymaları için) dahil) bulabilirsiniz. Her iki listeyi de temizlemek için Temizle'yi tıklayın.

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

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:

Performans > Sonraki adımlar > Alan verileri bölümünde Ayarlayın'ı tıklayın.
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 + işaretini tıklayın.
  
  Örneğin, http://localhost:8080 ile https://example.com eşlemesi, localhost:8080/page1'e gittiğinizde example.com/page1 için alan verilerini getirir.
  
  Ayrıca, alan verilerini otomatik olarak alamıyorsanız Aşağıdaki URL ile ilgili alan verilerini her zaman göster seçeneğini 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 ayarlandı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 penceresini görüntüleyin.

Ortamınızı kullanıcılarınızın ortamıyla daha iyi eşleşecek ş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ıza dair ö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, kullanıcılarınızın deneyimine daha iyi uyum sağlamak için yaygın bir masaüstü ekran boyutu kullanmanız ve CPU ile ağı kısıtlamanız gerekebilir.
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 panelinde Cihaz modu'nu kullanabilirsiniz.
2. Bu örnekteki web sitesinin kullanıcılarının% 82'si gezinmek 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'yu ise örneğin 20 kat yavaşlatma olarak ayarlayın. Aynı bölümde Ağ önbelleğini devre dışı bırak'ı işaretlediğinizden de emin olabilirsiniz.
İpucu: Ortam ayarları bölümünün sınırlama açılır menülerinde, Performans paneli de kullanılacak sınırlama hazır ayarlarını önerebilir. Ayrıca, alt ve orta segment mobil cihazlarla daha iyi eşleşmek için cihazınızda özel CPU sınırlama hazır ayarlarını kalibre edebilirsiniz. Bunu yapmak için CPU > Kalibre edilmiş hazır ayarlar'dan Kalibre et'i seçin.
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ı.

Bununla birlikte, artık web sitenizin Core Web Vitals metriklerini iyileştirmeye başlayabilirsiniz:

Performans raporu alma ve analiz etme

Sonraki bölümlerde, profili kaydetme, çekim 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:

Yakalama 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. Çekim ayarları menüsüne erişmek için Çekim ayarları 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 parçada 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 enstrümantasyonunu etkinleştir (yavaş): Gelişmiş boyama enstrümantasyonunu 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, kılavuzdaki konuların gruplandırılmış hâli ve diğer faydalı dokümanlar yer almaktadır:

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

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:

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:

Bu panellerle performansı artırın

Web sitenizin performansını artırmanıza yardımcı olabilecek diğer panelleri keşfedin: