Oluşturma sekmesindeki performansla ilgili seçenekler için bu referansla birlikte oluşturma performansı sorunlarını keşfedin.
Yeniden boyanmış alanları boya yanıp sönerek vurgulama
Bu seçenek açık olduğunda, yeniden boyama her gerçekleştiğinde Chrome ekranı yeşil renkte yanıp söner.
Yeniden boyanan alanları görüntülemek için:
- Bu demoda Oluşturma sekmesini açın ve Yanıp sönen boya seçeneğini işaretleyin.
- Yeşil renkle vurgulanmış yeniden boyayı inceleyin.
Başka bir sayfada, tüm ekranın yeşil renkte yanıp söndüğünü veya ekranın boyanması gerektiğini düşünmediğiniz alanlarını görürseniz, daha fazla araştırma yapmayı düşünün.
Düzen kayması bölgelerini vurgulama
Düzen kaymaları, beklenmedik şekilde yeniden boyamaya neden olur ve hem can sıkıcı hem de zararlı olabilir.
Bir sayfadaki düzen değişikliklerinin yerini ve zamanlamasını görüntülemek için:
Oluşturma sekmesini açın ve Düzen Kayması Bölgeleri'ni işaretleyin.
Sayfayı yenileyin. Düzen kayması alanları kısa süreliğine mor renkle vurgulanır.
Katmanları ve kartları katman sınırlarıyla görüntüleme
Sayfanın üst kısmında katman kenarlıkları ve karoların yer aldığı bir yer paylaşımı görüntülemek için Katman Kenarlıkları'nı kullanın.
Katman kenarlıkları etkinleştirmek için:
- Oluşturma sekmesini açın ve Katman Kenarlıkları'nı işaretleyin.
- Turuncu ve zeytin rengindeki katman kenarlıklarına ve camgöbeği karolara dikkat edin.
Renk kodlamaların açıklaması için debug_colors.cc adresindeki yorumlara bakın.
Kare oluşturma istatistikleriyle saniyedeki kare sayısını gerçek zamanlı olarak görüntüleyin
Çerçeve oluşturma istatistikleri, görüntü alanınızın sağ üst köşesinde görünen bir yer paylaşımıdır.
Çerçeve oluşturma istatistikleri'ni açmak için:
- Oluşturma sekmesini açın ve Çerçeve oluşturma istatistikleri onay kutusunu etkinleştirin.
- Sayfanın sağ üst köşesindeki istatistikleri inceleyin.
Kare oluşturma istatistikleri yer paylaşımında şunlar gösterilir:
- Sayfa yayınlanırken saniyedeki kare sayısının gerçek zamanlı tahmini.
- Üç kare türüne sahip bir grafik grafiği olarak kare zaman çizelgesi:
- Başarıyla oluşturulan kareler (mavi çizgiler)
- Kısmen gösterilen kareler (sarı çizgiler)
- Atlanan kareler (kırmızı çizgiler).
- GPU kafesinin durumu: açık veya kapalı. Daha fazla bilgi için GPU pikselleştirmesini alma başlıklı makaleyi inceleyin.
- GPU bellek kullanımı: Kullanılan ve maksimum MB bellek sayısı.
Kaydırma performansı sorunlarını tanımlama
Kaydırmayla ilgili olarak sayfa performansına zarar verebilecek etkinlik işleyicilerin bulunduğu sayfa öğelerini tanımlamak için Kaydırma Performansı Sorunları'nı kullanın.
Sorunlu olabilecek öğeleri görüntülemek için:
- Oluşturma sekmesini açın ve Kayan Performans Sorunları'nı işaretleyin.
- Vurgulanan potansiyel sorunlu öğeleri inceleyin.
Core Web Vitals'i 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.
Core Web Vitals, tüm web sayfaları için geçerli olan Web Verileri'nin alt kümesidir. Core Web Vitals'ın her biri kullanıcı deneyiminin farklı bir yönünü temsil eder, sahada ölçülebilirdir ve kullanıcı odaklı kritik bir sonucun gerçek dünyadaki deneyimini yansıtır. Core Web Vitals:
- Largest Contentful Paint (LCP): yükleme performansını ölçer. İyi bir kullanıcı deneyimi sağlamak için LCP, sayfa yüklenmeye başladıktan sonraki 2,5 saniye içinde gerçekleşmelidir.
- Sonraki Boyamayla Etkileşim (INP): Etkileşimi ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların INP değeri 200 milisaniye veya daha kısa olmalıdır.
- Cumulative Layout Shift (CLS): görsel kararlılığı ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların CLS'si 0,1 veya daha az olmalıdır.
Sayfanızın Core Web Vitals değerlerini görüntülemek için Web Vitals Chrome uzantısını kullanın.