Web sitenizin performansıyla ilgili uygulanabilir ve kullanım alanına dayalı analizler elde etmek için Performans analizleri panelini kullanın.
Genel Bakış
Performans analizleri paneli aşağıdakileri yapmanıza olanak tanır:
- Sayfa yükleme performansını kaydedin ve ölçün.
- Web Vitals performans metriklerini görüntüleyin.
- Ağ etkinliğini görüntüleyin.
- Daha yavaş CPU ve ağ hızlarını simüle edin.
- Kayıtları içe ve dışa aktarın.
Neden yeni bir panel?
Yeni Performans analizleri paneli, mevcut Performans paneliyle çalışırken geliştiricilerin karşılaştığı aşağıdaki 3 sorunu gidermek için tasarlanmış bir denemedir:
- Çok fazla bilgi. 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ı ayırt etmek zor. Performans analizleri paneli, kullanım alanına dayalı analizleri 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 şekilde kullanmak 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 panelini kullanarak sayfa yükleme performansınızı nasıl ölçeceğiniz ve anlayacağınız açıklanmaktadır. 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.
- Yeni bir sekmede bu demo sayfasını 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.
Bunu nasıl yapabileceğinize dair bir örneği aşağıda bulabilirsiniz.
- Kaydı oynatmak için Oynat'ı tıklayın.
- Tekrarı 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 değiştir'i tıklayın.
Performans kaydında gezinme
Geliştirici Araçları, kayıt zaman çizelgesinin tamamını göstermek için otomatik olarak uzaklaştırır. 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 alt kısımdaki 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 alt kısımdaki yatay kaydırma çubuğunu sürükleyin.
Alternatif olarak klavye kısayollarını da kullanabilirsiniz. Kısayol tuşlarını görüntülemek için düğmesini tıklayın.
Kısayollar kullanırken fare imlecinizle yakınlaştırır veya uzaklaştırırsınız.
Performans analizlerini görüntüleme
Analizler bölmesinde performans analizlerinin listesini görebilirsiniz. Olası performans sorunlarını tespit edip düzeltin.
Ana kanallarda vurgulamak için imleci 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, Düzeltme ve diğer bölümleri 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 zaman çizelgesindeki 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 kez yüklenmeye başladığı zamana kıyasla görüntü alanında görünür olan en büyük resim veya metin bloğunun oluşturulma süresini bildirir.
İyi bir LCP puanı 2,5 saniye veya daha kısadır.
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 çizelgesinde 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 başlıklı makaleyi inceleyin.
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 dokümanı yanıtının ilk baytını almasına 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 fark. |
| 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üklenmesi tamamlandıktan LCP öğesinin tamamen oluşturulmasına kadar geçen süre. |
Bir LCP öğesinin oluşturulması için kaynak yükleme 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 kayması etkinliğini görüntüleme
Düzen değişiklikleri etkinliğini Düzen Değişiklikleri kanalında görüntüleyin.
Düzen kaymaları oturum aralığında gruplandırılır. Örnekte iki oturum aralığı vardır. Oturum aralıkları arasında boşluklar vardır.
Cumulative Layout Shifts (CLS), Core Web Vitals metriklerinden biridir. Olası sorunları ve düzen kaymalarının nedenlerini belirlemek 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, arka plan rengine ve düzeyine göre oturum penceresi 1 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 boyutlandırılmamış medya. Bu sorunu nasıl düzelteceğinizi öğrenmek için Kümülatif Düzen Değişikliği metriğini optimize etme başlıklı makaleyi inceleyin.
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 hangi oturum aralığına ait olduğunu gösterir.
Sayfanın tamamı kaydırılmışsa her düzen kaymasının maksimum puanı 1 olur. Örneğimizde ilk düzen kayması 0.15 olarak puanlandı. İkinci düzen değişikliği 0.041 puan aldı.
Bu oturum aralığının 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 zaman içinde artar. Düzen değişikliğinin kümülatif puanı, o andaki 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örüntüleme
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üleme
GPU kanalında GPU etkinliğini görüntüleyin. GPU kanalı varsayılan olarak gizlidir. Etkinleştirmek için Ayarlar'da GPU'yu işaretleyin.
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. performance.measure()ile işaretler arasında geçen süreyi ölçün.- Performansı kaydetme.
- Zamanlamalar kanalında ölçümleri görüntüleyin. Parçayı görmüyorsanı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
Kayıt yüklemek için İçe aktar'ı 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.