Performans paneli: Web sitenizin performansını analiz edin

Dale St. Marthe
Dale St. Marthe
LinkedIn

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.

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

  • Performans profili kaydedin.
  • 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çma

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 aşağıdaki adımları uygulayın:

  1. DevTools'u açın.
  2. Aşağıdaki tuşlara basarak Komut menüsünü açın:
  3. macOS: Komut+Üst Karakter+P
  4. Windows, Linux, ChromeOS: Denetimli+Ü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 anında yakalanır ve gösterilir. Ayrıca bu metriklerin puanı (iyi, iyileştirme gerektiriyor veya kötü) da gösterilir.

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 Önemli Web Verileri'ne dair eksiksiz bir genel bakış elde edebilirsiniz.

Performans panelinde, üç metrik kartının altında yakalanan etkileşimlerin listesi sağlanır. 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 UX Report'tan alan verileri 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 Ayarla'yı tıklayın.

    Sonraki adımlar bölümündeki "Kurulum" düğmesi.

  2. Alan verisi getirmeyi yapılandır iletişim kutusunda Gizlilik beyanı'nı okuyup Tamam'ı tıklayın.

    Gelişmiş: Geliştirme ve üretim ortamları arasında eşleme oluşturun...

    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:

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

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

      Gelişmiş bölümde, geliştirme ve üretim kaynakları arasındaki eşleme.

      Örneğin, http://localhost:8080 ile https://example.com arasında yapılan bir eşleme, localhost:8080/page1'e gittiğinizde example.com/page1 için alan verilerini gösterir.

      Ayrıca, herhangi bir nedenle 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 verisi getirme ayarlarınızı değiştirmek için Alan verileri > Yapılandır'ı tıklayın.

    Alan verisi getirme özelliği ayarlandıktan sonra Performans panelinde artık yerel metrik puanlarınız ile kullanıcılarınızın deneyimlediği puanlar karşılaştırmalı olarak gösterilir. Toplama dönemini sağdaki Alan verileri bölümünde görebilirsiniz.

    Alan verileri getirildikten sonra veri toplama dönemi.

    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ınkine 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 yapılandırmayla 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.

    Her metrik kartında "Yerel test koşullarınızı göz önünde bulundurun" bölümleri genişletildi.

    Bu örnekte, kullanıcılarınızın deneyimiyle daha iyi eşleşecek şekilde yaygın bir masaüstü ekran boyutu kullanmanız ve CPU ile ağı yavaşlatmanız gerekebilir.

  2. Bu örnekteki ortam yapılandırmasıyla 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% 82'si masaüstü cihazları kullanarak siteye göz atı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'ı 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.

    Ortam, gerçek dünyadaki kullanıcı deneyimiyle eşleşecek şekilde yapılandırılır.

    Metrik puanları artık kullanıcılarınızın deneyimlerine daha benzer 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ı.

Artık web sitenizin Core Web Vitals metriklerini 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 panelinde aşağıdaki seçenekler sunulur:

Kayıt ayarlarını değiştirme

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:

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:

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

Raporu nasıl analiz edeceğinizi öğrenmek için:

Bu panellerle performansı artırın

Web sitenizin performansını iyileştirmenize yardımcı olabilecek diğer panelleri keşfedin: