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. Olası performans sorunlarını ve kaynak kullanımını optimize etmenin yollarını bulmak için profilleri analiz edin.

Performans panelini kullanarak aşağıdakileri yapabilirsiniz:

  • Performans profili kaydetme.
  • Yakalama ayarlarını değiştirin.
  • Bir performans raporunu analiz edebilirsiniz.

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ç

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

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

  1. Geliştirici Araçları'nı açın.
  2. Şu tuşlara basarak Komut menüsünü açın:
  3. macOS: Command+Üst Karakter+P
  4. Windows, Linux, ChromeOS: Denetimli+Üst Karakter+P Komut Menüsü
  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) 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 panelinde, üç metrik kartının altında yakalanan etkileşimlerin listesi sağlanır. Listeyi temizlemek için Temizle'yi tıklayın.

Metrik puanının dökümünü almak için 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:

  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...

    İsterseniz 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 penceresinde 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ümündeki geliştirme ve üretim kaynakları arasındaki eşleme.

      Örneğin, http://localhost:8080 ile https://example.com eşleştirmesi, localhost:8080/page1 adresine gittiğinizde example.com/page1 için alan verilerini getirir.

      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.

      Alan verilerini getirme ayarlarınızı kurulumdan sonra değiştirmek için Alan verileri'ni tıklayın > Yapılandır

    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 toplama işlemi gerçekleştirildi.

    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

Önceki bölümde açıklandığı gibi alan verilerini getirme ayarlandığında Performans paneli, ortamınızı kullanıcılarınızın deneyimine daha iyi uyacak şekilde nasıl yapılandıracağınıza ilişkin ö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.

    "Yerel test koşullarınızı göz önünde bulundurun" her metrik kartında genişletilen bölümler.

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

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

    1. Görüntü alanınızı yaygın olarak kullanılan ekran boyutlarından birine ayarlayın (ör. 720p veya 1080p). Belirli cihazları ve ekran boyutlarını taklit etmek için Öğeler panelindeki Cihaz modu'nu kullanabilirsiniz.
    2. 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 > Masaüstü seçeneğini belirleyebilirsiniz Cihaz açılır listesi.
    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şimde bulunun ve metrik puanlarını tekrar karşılaştırın.

    Ortam, gerçek dünyadaki kullanıcı deneyimine uyacak ş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 etme ile ilgili yönergeleri izleyin.

Performans profili kaydetme

Kaydetmeye hazır olduğunuzda Performans paneli size aşağıdaki seçenekleri sunar:

Kayıt 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 size ek bilgiler sağlayabilir. Fotoğraf çekme ayarları'nı tıklayın kullanı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 eksiksiz bir rehber için Performans kaydını analiz etme bölümüne bakın.

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 olan konulara nasıl odaklanacağınızı öğrenmek için:

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:

Bu panellerle performansı artırın

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