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ç
- Geliştirici Araçları'nı açın.
Diğer seçenekler > Diğer araçlar > Performans analizleri'ni tıklayın.
Alternatif olarak, Komut menüsünü kullanarak Performans analizleri panelini açabilirsiniz.
Performansı kaydedin
Performans analizleri paneli, genel ve kullanım alanına dayalı (ör. sayfa yükleme) performansı kaydedebilir.
- Bu demo sayfasını yeni bir sekmede açın ve sayfada Performans analizleri panelini açın.
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:
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.
Performans kaydını tekrar oynatma
Kaydınızın tekrarını kontrol etmek için alt kısımdaki kontrolleri kullanın.
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.
Performans kaydında gezinme
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.
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
İ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.
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.
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.
İ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.
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.
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.
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 kaymaları, bir oturum penceresinde gruplandırılır. Örnekte, iki oturum penceresi vardır. Oturum aralıkları arasında boşluklar vardır.
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.
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.
Ö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.
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ı.
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.
Oturum aralığı arka plan grafiği zamanla artar. Düzen kaymasının Kümülatif puanı, o sıradaki artışı yansıtır.
Ağ etkinliğini görüntüle
Ağ 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.
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.
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.
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:
- Uygulamanızdaki yerleri
performance.mark()ile işaretleyin. - İşaretler arasında geçen süreyi
performance.measure()ile ölçün. - Performansı kaydedin.
- Zamanlamalar kanalında ölçümleri görüntüleyin. Parçayı göremiyorsanız Ayarlar'da Kullanıcı zamanlamaları'nı kontrol edin.
- Ayrıntıları görüntülemek için kanaldaki zamanlamayı tıklayın.
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.
Kayıtları dışa aktarma
Kaydı kaydetmek için Dışa aktar'ı tıklayın.
Kayıtları içe aktarma
Kaydı yüklemek için İçe aktar simgesini seçin.
Kaydı silme
Bir kaydı silmek için:
- Sil'i tıklayın. Bir onay iletişim kutusu açılır.
- Silme işlemini onaylamak için iletişim kutusunda Sil'i tıklayın.