Oluşturma sekmesindeki performansla ilgili seçeneklere ilişkin bu referansı kullanarak oluşturma performansı sorunlarını keşfedin.
Yeniden boyanmış alanları boya yanıp sönmeyle vurgulama
Bu seçenek açıldığında Chrome, her yeniden boyama işleminde ekranı yeşil renkte yanıp söner.
Yeniden boyanacak alanları görüntülemek için:
- Bu demoda Oluşturma sekmesini açın ve Boya yanıp sönüyor'u işaretleyin.
- Yeşille vurgulanmış yeniden boyamaya dikkat edin.
Başka bir sayfada, ekranın tamamının yeşil yanıp söndüğünü veya ekranın boyanması gerektiğini düşündüğünüz bölümlerini görüyorsanız daha ayrıntılı inceleme yapabilirsiniz.
Düzen kayması bölgelerini vurgula
Düzen kaymaları, beklenmedik durumlara neden olur ve hem rahatsız edici hem de zararlı olabilir.
Sayfadaki düzen kaymalarının konumunu ve zamanlamasını görüntülemek için:
Oluşturma sekmesini açın ve Düzen Kaydırma Bölgeleri'ni işaretleyin.
Sayfayı yenileyin. Düzen kayması alanları kısa süreliğine mor renkle vurgulanır.
Katman sınırları olan katmanları ve karoları görüntüleme
Sayfanın üst kısmında katman kenarlıkları ve döşemelerinin yer paylaşımını görüntülemek için Katman Kenarlıkları'nı kullanın.
Katman sınırlarını etkinleştirmek için:
- Oluşturma sekmesini açın ve Katman Kenarlıkları'nı işaretleyin.
- Turuncu ve zeytin renkteki katman sınırları ve camgöbeği renkli karolara dikkat edin.
Renk kodlamalarının açıklaması için debug_colors.cc sayfasındaki yorumlara bakın.
Kare oluşturma istatistikleriyle, saniyedeki kare sayısını gerçek zamanlı olarak görüntüleyin
Kare oluşturma istatistikleri, görüntü alanınızın sağ üst köşesinde görünen bir yer paylaşımıdır.
Kare oluşturma istatistiklerini açmak için:
- Oluşturma sekmesini açın ve Kare oluşturma istatistikleri onay kutusunu etkinleştirin.
- Sayfanın sağ üst köşesindeki istatistiklere bakın.
Kare oluşturma istatistikleri yer paylaşımı şunları gösterir:
- Sayfa yayınlanırken saniyedeki kare sayısının gerçek zamanlı tahmini.
- Üç çerçeve türünde bir çizim olarak kare zaman çizelgesi:
- Başarıyla oluşturulan kareler (mavi çizgiler)
- Kısmen sunulan kareler (sarı çizgiler)
- Atlanan çerçeveler (kırmızı çizgiler).
- GPU kafes durumu: açık veya kapalı. Daha fazla bilgi için GPU pikselleştirmesini alma bölümüne bakın.
- GPU bellek kullanımı: kullanılan bellek sayısı ve maksimum MB bellek.
Kaydırma performansı sorunlarını tanımlama
Sayfanın performansına zarar verebilecek kaydırmayla ilgili etkinlik işleyicilere sahip 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 Kaydırma Performansı Sorunları'nı kontrol edin.
- Sorunlu olabilecek öğelerin vurgulandığına dikkat edin.
Core Web Vitals'ı göster
Web Vitals, web'de mükemmel bir kullanıcı deneyimi sunmak için gerekli olan kalite sinyalleriyle ilgili olarak birleştirilmiş yönergeler sağlamayı amaçlayan bir Google girişimidir.
Önemli Web Verileri, Web Verileri'nin tüm web sayfaları için geçerli olan alt kümesidir. Önemli Web Verileri'nin her biri, kullanıcı deneyiminin farklı bir yönünü temsil eder, sahada ölçülebilirdir ve kritik kullanıcı merkezli bir sonucun gerçek dünyadaki deneyimini yansıtır. Önemli Web Verileri:
- Largest Contentful Paint (LCP): yükleme performansını ölçer. İyi bir kullanıcı deneyimi sağlamak için LCP, sayfa ilk yüklenmeye başladıktan sonra 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'si 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 değeri 0.1. veya daha düşük 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.