Performans analizleri: Web sitenizin performansıyla ilgili uygulanabilir analizler elde edin

Sofia Emelianova
Sofia Emelianova

Web sitenizin performansı hakkında uygulanabilir ve kullanım alanına dayalı analizler elde etmek için Performans analizleri panelini kullanın.

Neden yeni panel?

Yeni Performans analizleri paneli, mevcut Performans paneliyle çalışırken geliştiricilerin karşılaştığı bu 3 sorunu gidermeyi amaçlayan bir denemedir:

  • Çok fazla bilgi var. Yeniden tasarlanan kullanıcı arayüzüyle Performans analizleri paneli, verileri basitleştirir ve yalnızca alakalı bilgileri görüntüler.
  • Kullanım alanlarını birbirinden ayırt etmek zordur. Performans analizleri paneli, kullanım alanına dayalı analizi destekler. Şu anda yalnızca sayfa yükleme kullanım alanını destekler. Geri bildiriminize (ör. etkileşim) bağlı olarak gelecekte daha fazla uygulama desteklenecektir.
  • Etkili bir kullanım için tarayıcıların nasıl çalıştığı konusunda derinlemesine uzmanlık gerektirir. Performans analizleri paneli, Analizler bölmesindeki önemli analizleri ve sorunların nasıl düzeltileceğine dair uygulanabilir geri bildirimleri vurgular.

Giriş

Bu eğitimde, Performans analizleri paneliyle sayfa yükleme performansınızı nasıl ölçüp anlayacağınızı öğretebilirsiniz. Okumaya devam edin veya yukarıdaki bu eğiticinin video sürümünü izleyin.

Performans analizleri panelini aç

  1. Geliştirici Araçları'nı açın.
  2. Diğer seçenekler > Diğer araçlar > Performans analizleri'ni tıklayın.

    Performans analizleri'ni tıklayın.

    Alternatif olarak, Komut menüsünü kullanarak Performans analizleri panelini açabilirsiniz.

    Komut menüsünde Performans analizleri komutunu gösterin.

Performansı kaydedin

Performans analizleri paneli, genel ve kullanım alanına dayalı (ör. sayfa yükleme) performansı kaydedebilir.

  1. Bu demo sayfasını yeni bir sekmede açın ve sayfada Performans analizleri panelini açın.
  2. Kayıt sırasında ağı ve CPU'yu daraltabilirsiniz. Bu eğitim için açılır menüden Önbelleği devre dışı bırak'ı işaretleyin ve CPU'yu 4x yavaşlatma olarak ayarlayın:

    Kısıtlama.

  3. Sayfa yüklemeyi ölç'ü tıklayın. Geliştirici Araçları, sayfa yeniden yüklenirken performans metriklerini kaydeder ve ardından sayfa yükleme tamamlandıktan birkaç saniye sonra kaydı otomatik olarak durdurur.

    Başlatma seçenekleri.

Performans kaydını tekrar oynatma

Kaydınızın tekrarını kontrol etmek için alt kısımdaki kontrolleri kullanın.

Tekrar oynatma kontrolleri.

Bunun nasıl yapılacağına dair bir örneği aşağıda bulabilirsiniz.

  • Kaydı oynatmak için Oynat'ı tıklayın.
  • Tekrar oynatmayı duraklatmak için Duraklat'ı tıklayın.
  • Açılır menüden oynatma hızını ayarlayın.
  • Görsel önizlemeyi göstermek veya gizlemek için Görsel önizlemeyi aç/kapat'ı tıklayın.

Geliştirici Araçları, otomatik olarak uzaklaştırarak kayıt zaman çizelgesinin tamamını gösterir. Yakınlaştırma ile kayıtta gezinebilir ve zaman çizelgesini taşıyabilirsiniz.

Zaman çizelgesini yakınlaştırmak ve sola ve sağa taşımak için ilgili gezinme düğmelerini kullanın:

  • Video yer imlecini hareket ettirerek belirli bir kareyi görüntülemek için Zaman Çizelgesi'ni tıklayın.
  • Yakınlaştırmak için alttaki Yakınlaştır ve Uzaklaştır kontrollerini tıklayın. Bu durumda, video yer imlecini temel alarak yakınlaştırma yaparsınız.
  • Zaman çizelgesini sola ve sağa taşımak için alttaki yatay kaydırma çubuğunu sürükleyin.

Alternatif olarak klavye kısayollarını da kullanabilirsiniz. Kısayolları görmek için düğmesini tıklayın. Klavye kısayolları.

Kısayolları kullanırken fare imlecinize göre yakınlaştırabilirsiniz.

Performans analizlerini görüntüleme

Analizler bölmesinde performans analizlerinin bir listesini alabilirsiniz. Olası performans sorunlarını belirleyip düzeltme

Analizler bölmesi.

İmleci, ana kanallarda vurgulamak için analizlerin her birinin üzerine getirin.

Ayrıntılar bölmesinde açmak için bir analizi (ör. oluşturma engelleme isteği) tıklayın. Sorunu daha iyi anlamak için Dosya, Sorun, Nasıl düzeltilir? bölümlerini ve daha fazlasını inceleyin.

Analiz ayrıntıları.

Web Verileri performans metriklerini görüntüleme

Web Vitals, Google'ın web'de mükemmel bir kullanıcı deneyimi sunmak için gerekli olan kalite sinyalleriyle ilgili birleşik kılavuzlar sunduğu bir girişimdir.

Bu metrikleri Zaman Çizelgesi ve Analizler bölmesinde görüntüleyebilirsiniz.

Web Verileri performans metriklerini görüntüleyin.

Metrikler hakkında daha fazla bilgi edinmek için fareyle Zaman Çizelgesi'ndeki analizlerin üzerine gelin.

En büyük zengin içerikli boyamadaki gecikmeleri keşfedin

Largest Contentful Paint (LCP), Core Web Vitals metriklerinden biridir. Sayfanın ilk yüklenmeye başladığı zamana göre, görüntü alanında görünen en büyük resmin veya metin bloğunun oluşturulma süresini bildirir.

LCP eşikleri.

İyi bir LCP puanı 2,5 saniye veya daha kısa sürer.

Sayfanızdaki en büyük zengin içerikli boyanın oluşturulması daha uzun sürerse zaman çizelgesinde LCP rozetini sarı bir kare veya kırmızı üçgenle görürsünüz.

LCP rozeti

Ayrıntılar bölmesini açmak için zaman çizelgesindeki veya sağdaki Analizler bölmesinde LCP rozetini tıklayın. Bölmede, gecikmelerin olası nedenlerini ve bunları nasıl gidereceğinize ilişkin önerileri bulabilirsiniz.

Ayrıntı penceresi.

Bu örnekte, bir istek, oluşturmayı engelliyor ve sorunu düzeltmek için kritik stilleri satır içinde uygulayabilirsiniz. Daha fazla bilgi için Oluşturmayı engelleyen kaynakları ortadan kaldırma bölümüne bakın.

LCP oluşturma süresinin alt bölümlerini görüntülemek için sayfayı aşağı kaydırarak Ayrıntılar > Zamanlama dökümü bölümüne gidin.

Zamanlama dökümü.

LCP oluşturma süresi aşağıdaki alt bölümlerden oluşur:

LCP alt bölümü Açıklama
İlk bayta geçiş zamanı (TTFB) Kullanıcının sayfayı yüklemeye başlamasından tarayıcının HTML belge yanıtının ilk baytını aldığı ana kadar geçen süre.
Kaynak yükleme gecikmesi TTFB ile tarayıcının LCP kaynağını yüklemeye başladığı zaman arasındaki delta.
Kaynak yükleme süresi LCP kaynağının kendisini yüklemek için gereken süre.
Öğe oluşturma gecikmesi LCP kaynağının yüklenmesinin tamamlanmasıyla LCP öğesinin tamamen oluşturulması arasında geçen deltadır.

Bir LCP öğesinin oluşturulması için kaynak yükü gerekmiyorsa kaynak yükleme gecikmesi ve süresi atlanır. Örneğin, öğenin sistem yazı tipiyle oluşturulmuş bir metin düğümü olması durumunda.

Düzen kaymaları etkinliğini görüntüle

Düzen Kaymaları kanalında düzen kayma etkinliklerini görüntüleyin.

Düzen Kayması parçası.

Düzen kaymaları, bir oturum penceresinde gruplandırılır. Örnekte, iki oturum penceresi vardır. Oturum aralıkları arasında boşluklar vardır.

Oturum aralığı ve boşluk.

Cumulative Layout Shift (CLS), önemli web verileri metriklerinden biridir. Olası sorunları ve düzen kaymalarının nedenlerini tanımlamak için Düzen Kaymaları kanalını kullanın.

CLS metriğini iyileştirirken her zaman en büyük oturum aralığıyla başlayın. Örneğimizde, oturum penceresi 1, arka plan rengi ve düzeyine göre en büyük penceredir.

CLS.

Düzen kaymasının ayrıntılarını görüntülemek, olası temel nedenleri ve etkilenen öğeleri belirlemek için bir ekran görüntüsünü tıklayın.

Düzen kaymasının ayrıntılarını görüntüleyin.

Örneğimizde olası temel neden boyutsuz medyadır. Nasıl düzeltileceğini öğrenmek için Cumulative Layout Shift'i optimize etme bölümüne bakın.

olası temel sebepleri belirleyebilirsiniz.

Düzen kaymaları puanını anlama

Puanların nasıl hesaplandığını anlamak için Ayrıntılar bölmesindeki Aralık bölümünü kullanın. Pencere, geçerli düzen kaymasının ait olduğu oturum aralığını gösterir.

Sayfanın tamamı kaydırılırsa her düzen kaymasının maksimum puanı 1 olur. Örneğimizde ilk düzen kayması 0.15 olarak puanlandı. İkinci düzen kayması 0.041 puan aldı.

Düzen kaymaları puanını anlayın.

Bu oturum için toplam puan: 0.19. CLS eşiğine göre iyileştirilmesi gerekiyor. Oturum penceresi arka plan rengi aynı şekilde gösterilir.

CLS eşiği.

Oturum aralığı arka plan grafiği zamanla artar. Düzen kaymasının Kümülatif puanı, o sıradaki artışı yansıtır.

Geçiş penceresi arka plan grafiği.

Ağ etkinliğini görüntüle

kanalında ağ etkinliğini görüntüleyin. Ağ kanalını, tüm ağ etkinliklerini görüntüleyecek şekilde genişletebilir ve ayrıntıları görüntülemek için her bir öğeyi tıklayabilirsiniz.

Ağ etkinliğini görüntüleyin.

Oluşturucu etkinliğini göster

Oluşturma etkinliğini Oluşturucu kanalında görüntüleyin. Etkinlikleri görüntülemek için her oluşturucuyu genişletebilir ve ayrıntıları görüntülemek için her bir öğeyi tıklayabilirsiniz.

Oluşturucu etkinliğini görüntüleyin.

GPU etkinliğini görüntüle

GPU kanalındaki GPU etkinliğini görüntüleyin. GPU parçası varsayılan olarak gizlidir. Etkinleştirmek için Ayarlar'da GPU'yu kontrol edin.

GPU etkinliğini görüntüleyin.

Kullanıcı zamanlamalarını göster

Özel performans ölçümleri almak için Kullanıcı Zamanlaması'nı kullanabilir ve Zamanlama kanalıyla zamanlamalarınızı görselleştirebilirsiniz. Daha fazla bilgi için UserTiming API'ye göz atın.

Geçen metin yükleme süresini hesaplayan bu demo sayfasına göz atın.

Kullanıcı zamanlamalarını görüntülemek için:

  1. Uygulamanızdaki yerleri performance.mark() ile işaretleyin.
  2. İşaretler arasında geçen süreyi performance.measure() ile ölçün.
  3. Performansı kaydedin.
  4. Zamanlamalar kanalında ölçümleri görüntüleyin. Parçayı göremiyorsanız Ayarlar'da Kullanıcı zamanlamaları'nı kontrol edin.
  5. Ayrıntıları görüntülemek için kanaldaki zamanlamayı tıklayın. Zamanlamalar bölümü.

Kullanıcı arayüzünü özelleştirme

Zaman Çizelgesi'ni ve Takipler'i özelleştirmek için panelin Ayarlar simgesini tıklayın ve tercih ettiğiniz seçenekleri işaretleyin.

Ayarlar.

Kayıtları dışa aktarma

Kaydı kaydetmek için Dışa aktar tıklayın.

Kayıtları dışa aktarma

Kayıtları içe aktarma

Kaydı yüklemek için İçe aktar simgesini seçin.

Kayıtları içe aktarın.

Kaydı silme

Bir kaydı silmek için:

  1. Sil'i tıklayın. Bir onay iletişim kutusu açılır. Kaydı silme
  2. Silme işlemini onaylamak için iletişim kutusunda Sil'i tıklayın.