Web sitenizin performansıyla ilgili, üzerinde işlem yapılabilen ve kullanım alanına yönelik analizler almak 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ı kaydetme ve ölçme
- Web Verileri performans metriklerini görüntüleyin.
- Ağ etkinliğini görüntüleme
- Daha yavaş CPU ve ağ hızlarını simüle edin.
- Kayıtları içe ve dışa aktarma
Neden yeni bir panel?
Yeni Performans analizleri paneli, mevcut Performans paneliyle çalışırken geliştiricilerin karşılaştığı bu 3 sorunu çözmeye yönelik bir denemedir:
- Çok fazla bilgi. Yeniden tasarlanan kullanıcı arayüzünde, Performans analizleri paneli verileri kolaylaştırır ve yalnızca alakalı bilgileri gösterir.
- Kullanım alanları arasında ayrım yapmak zor. Performans analizleri paneli, kullanım alanına dayalı analizleri destekler. Şu anda yalnızca sayfa yükleme kullanım alanını desteklemektedir. Gelecekte geri bildirimlerinize göre daha fazla kullanım alanı (ör. etkileşim) desteklenecektir.
- Etkili bir şekilde kullanmak için tarayıcıların nasıl çalıştığı konusunda derinlemesine bilgi sahibi olmak gerekir. Performans analizleri panelinde, Analizler bölmesindeki temel analizler vurgulanır ve sorunların nasıl düzeltileceğiyle ilgili uygulanabilir geri bildirimler verilir.
Giriş
Bu eğitimde, Performans analizleri panelini kullanarak sayfa yükleme performansınızı nasıl ölçeceğinizi ve anlayacağınızı öğreneceksiniz. Okumaya devam edin veya yukarıdaki eğitimin video versiyonunu izleyin.
Performans analizleri panelini açma
- 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ı kaydetme
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 kısıtlayabilirsiniz. Bu eğitim için Önbelleği devre dışı bırak'ı işaretleyin ve açılır menüde CPU'yu 4x slowdown (4 kat yavaşlatma) olarak ayarlayın:
Sayfa yükleme hızını ölçün'ü tıklayın. Geliştirici Araçları, sayfa yeniden yüklenirken performans metriklerini kaydeder ve sayfa yükleme işlemi 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.
İşlemi nasıl yapacağınızla ilgili 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 listeden 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ı, kaydın tamamının zaman çizelgesini göstermek için otomatik olarak uzaklaştırır. Kaydı yakınlaştırarak ve zaman çizelgesini hareket ettirerek kayıtta gezinebilirsiniz.
Zaman çizelgesini yakınlaştırmak ve sola/sağa taşımak için ilgili gezinme düğmelerini kullanın:
- Video yer imlecini belirli bir kareyi görüntüleyecek şekilde taşımak 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, oynatma başlığına göre yakınlaştırma yaparsınız.
- Zaman çizelgesini sola ve sağa hareket ettirmek için alttaki yatay kaydırma çubuğunu sürükleyin.
Alternatif olarak, klavye kısayollarını da kullanabilirsiniz. Kısayolları görüntülemek için düğmesini tıklayın.
Kısayolları kullanırken fare imlecinize göre yakınlaştırma yaparsınız.
Performans analizlerini görüntüleme
Analizler bölmesinde performans analizlerinin listesini alın. Olası performans sorunlarını belirleyip düzeltin.
Ana parçalarda vurgulamak için imleci her bir analizinin üzerine getirin.
Bir içgörüyü (ör. oluşturmayı engelleyen istek) tıklayarak Ayrıntılar bölmesinde açın. Sorunu daha iyi anlamak için Dosya, Sorun, Nasıl düzeltilir? bölümlerini ve diğer bölümleri inceleyin.
Web Verileri performans metriklerini görüntüleme
Web Verileri, 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 Çizelgesi'ndeki analizlerin üzerine gelin.
Largest Contentful Paint'teki gecikmeleri keşfetme
Largest Contentful Paint (LCP), Core Web Vitals metriklerinden biridir. Bu metrik, 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 azdır.
Sayfanızdaki en büyük zengin içerikli boyama işleminin oluşturulması daha uzun sürüyorsa 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 çizelgesindeki veya sağ taraftaki Analizler bölmesindeki LCP rozetini tıklayın. Bu bölmede, gecikmelerin olası nedenlerini ve bunları nasıl düzelteceğinize dair önerileri görebilirsiniz.
Bu örnekte, bir istek oluşturmayı engelliyor ve bunu düzeltmek için kritik stilleri satır içi olarak uygulayabilirsiniz. Daha fazla bilgi edinmek için Oluşturmaları engelleyen kaynaklardan kaçınma başlıklı makaleyi inceleyin.
LCP oluşturma süresinin alt bölümlerini görüntülemek için Ayrıntılar > Zamanlama dökümü bölümüne gidin.
En büyük içerik öğesinin oluşturma süresi aşağıdaki alt bölümlerden oluşur:
| LCP alt bölümü | Açıklama |
|---|---|
| Time to First Byte (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 yüklenmesi için gereken süre. |
| Öğe oluşturma gecikmesi | LCP kaynağının yüklenmesi tamamlandıktan sonra 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 sistem yazı tipiyle oluşturulmuş bir metin düğümü olduğunda.
Düzen kayması etkinliğini görüntüleme
Düzen kaymaları izinde düzen kayması etkinliğini görüntüleyin.
Düzen kaymaları oturum aralığında gruplandırılır. Örnekte iki oturum penceresi vardır. Oturum aralıkları arasında boşluklar vardır.
Cumulative Layout Shift (CLS), Core Web Vitals metriklerinden biridir. Olası sorunları ve düzen kaymalarının nedenlerini belirlemek için Düzen Kaymaları izini kullanın.
CLS metriğini iyileştirirken her zaman en büyük oturum penceresiyle başlayın. Örneğimizde, arka plan rengine ve seviyeye göre 1. oturum penceresi 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'dır. Bu sorunu nasıl düzelteceğinizi öğrenmek için Optimize Cumulative Layout Shift başlıklı makaleyi inceleyin.
Düzen kayması puanını anlama
Puanların nasıl hesaplandığını anlamak için Ayrıntılar bölmesindeki Dönem 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ılırsa her düzen kaymasının maksimum puanı 1 olur. Örneğimizde, ilk düzen kayması 0.15 puan aldı. İkinci düzen kayması 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ı şekilde değişir.
Oturum aralığı arka plan grafiği zamanla 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ğ izinde ağ etkinliğini görüntüleyin. Tüm ağ etkinliklerini görüntülemek için ağ izini genişletebilir ve ayrıntıları görmek için her öğeyi tıklayabilirsiniz.
Oluşturucu etkinliğini görüntüleme
Oluşturucu parçasında oluşturma etkinliğini 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 parçası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 parçasıyla görselleştirebilirsiniz. Daha fazla bilgi için User Timing API başlıklı makaleyi inceleyin.
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ındaki ö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 parçadaki zamanlamayı tıklayın.
Kullanıcı arayüzünü özelleştirme
Zaman Çizelgesi 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ıt içe aktarma
Kaydı 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.