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 aktarabilirsiniz.
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 kolaylaştırır ve yalnızca alakalı bilgileri gösterir.
- 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ı desteklemektedir. Geri bildirimleriniz doğrultusunda gelecekte etkileşimli gibi daha fazla özellik eklenecektir.
- Etkili bir şekilde kullanmak için tarayıcıların işleyiş şekli hakkında derin uzmanlık gerektirir. Performans analizleri paneli, Analizler bölmesinde önemli analizleri vurgular ve sorunların nasıl düzeltileceğine dair uygulanabilir geri bildirim sağlar.
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 eğitim videosunu izleyin.
Performans analizleri panelini açma
- DevTools'u açın.
Diğer seçenekler > Diğer araçlar > Performans analizleri'ni tıklayın.
Alternatif olarak, Performans analizleri panelini açmak için Komut Menüsü'nü de kullanabilirsiniz.
Kayıt performansı
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 sayfadaki Performans analizleri panelini açın.
Kayıt sırasında ağ ve CPU'yu kısıtlayabilirsiniz. Bu eğitim için Önbelleği devre dışı bırak'ı işaretleyin ve açılır menüden CPU'yu 4 kat yavaşlatma olarak ayarlayın:
Sayfa yükleme hızını ölçün'i tıklayın. Geliştirici Araçları, sayfa yeniden yüklenirken performans metriklerini kaydeder ve sayfanın yüklenmesi tamamlandıktan birkaç saniye sonra kaydı otomatik olarak durdurur.
Performans kaydını tekrar oynatma
Kaydınızın oynatılmasını kontrol etmek için alt kısımdaki kontrolleri kullanın.
Bunu nasıl yapacağınıza dair bir örnek aşağıda verilmiştir.
- 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 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 özelliğini kullanarak 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:
- Belirli bir kareyi görüntülemek için video yer imlecini taşımak üzere zaman çizelgesini 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, oynatma başlığına göre yakınlaştırırsı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ı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.
Bir analizi (ör. oluşturmayı engelleyen istek) Ayrıntılar bölmesinde açmak için 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 tarafından başlatılan bir girişimdir. Bu girişimin amacı, internette mükemmel bir kullanıcı deneyimi sunmak için gerekli olan kalite göstergeleri hakkında tek bir kılavuz sağlamaktır.
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.
Largest Contentful Paint gecikmeleri
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 boyamanın oluşturulması daha uzun sürerse zaman çizelgesinde sarı kare veya kırmızı üçgen içeren LCP rozetini 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. Bu bölmede, gecikmelerin olası nedenlerini ve bunların nasıl düzeltileceğine dair önerileri görebilirsiniz.
Bu örnekte, bir istek oluşturmayı engelliyor. Bu sorunu düzeltmek için kritik stilleri satır içine yerleştirebilirsiniz. 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 Ayrıntılar > Zaman çizelgesi 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ş süresi (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 kendisinin yüklenmesi için geçen 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, öğe bir sistem yazı tipiyle oluşturulan bir metin düğümüyse.
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 penceresiyle 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 kayması puanını anlama
Puanların nasıl hesaplandığını anlamak için Ayrıntılar bölmesinde Pencere 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 değişikliği 0.15 puan aldı. İ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 penceresinin arka plan rengi de aynıdır.
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üleme
Ağ kanalında ağ etkinliğini görüntüleyin. Tüm ağ etkinliklerini görüntülemek için ağ kanalını genişletebilir ve ayrıntıları görüntülemek için her öğ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 öğeyi tıklayabilirsiniz.
GPU etkinliğini görüntüleme
GPU kanalında GPU etkinliğini görüntüleyin. GPU parçası varsayılan olarak gizlidir. Etkinleştirmek için Ayarlar'da GPU'yu işaretleyin.
Kullanıcı zamanlamalarını görüntüleme
Özel performans ölçümleri almak için Kullanıcı Zamanlaması'nı kullanabilir ve zamanlamalarınızı Zamanlama kanalıyla görselleştirebilirsiniz. Daha fazla bilgi için User Timing API başlıklı makaleyi inceleyin.
Metnin yüklenmesi için geçen süreyi 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.
- Ölçümleri Zamanlamalar kanalında 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 parçadaki zamanlamayı tıklayın.
Kullanıcı arayüzünü özelleştirme
Zaman çizelgesini ve Parçaları özelleştirmek için panelin Ayarlar simgesini tıklayın ve tercih ettiğiniz seçenekleri işaretleyin.
Kaydı 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.
Kayıt 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.