Performans paneli, ana iş parçacığı üzerinde çalışması uzun süren ve performansın yavaş olduğunu göstermek için uzun süreli görevleri sağ üst köşesinde kırmızı bir üçgen ve Özet sekmesinde bir uyarıyla işaretler:
Performans kayıtlarınızda, bu uzun süreli görevlerden bazıları Stili Yeniden Hesapla etkinlikleri olabilir. Stili Yeniden Hesapla etkinliği, tarayıcının aşağıdakileri yapması için gereken süreyi izler:
- Belirli bir öğeyle eşleşen tüm CSS stili kurallarını bulmak için bir sayfadaki DOM öğelerini tekrarlayın.
- Eşleşen CSS stili kurallarına göre her öğenin gerçek stilini hesaplayın.
CSS kurallarının geçerliliği değişmiş olduğunda, CSS stillerinin yeniden hesaplanması gerekir. Örneğin:
- Öğeler DOM'ye eklenir veya DOM'den kaldırılır.
- Bir öğenin özellikleri (ör. sınıf veya kimlik özelliğinin değeri) değiştirilir.
- Kullanıcı, fare hareketi veya öğe odağının değiştirilmesi gibi girişler yapabilir. Bu durum,
:hoverkurallarını etkileyebilir.
Uzun süreli Stili Yeniden Hesapla etkinlikleri performans açısından sorunlu olabilir ve web sitenizin Sonraki Boyamayla Etkileşimi (INP) etkileyen uzun sunum gecikmelerine neden olabilir. Uzun süreli Stili Yeniden Hesapla etkinlikleri görürseniz en çok zaman alan ve performansı yavaşlatan CSS seçicilerinizi öğrenmek için Seçici İstatistikleri sekmesini kullanabilirsiniz.
Seçici İstatistikleri sekmesi, performans kaydındaki bir veya daha fazla Stili Yeniden Hesapla etkinliğinde yer alan CSS kural seçicileriyle ilgili istatistikler sağlar.
Seçici İstatistikleri açık durumdayken performans izlemesi kaydetme
Uzun süreli Stili Yeniden Hesapla etkinlikleri sırasında CSS kural seçicilerinizin istatistiklerini görüntülemek için Seçici İstatistikleri yakalama ayarı açıkken bir performans izlemesi kaydedin.
Seçici istatistikleriyle performans izlemeyi kaydetmek için:
Örneğin, Fotoğraf Galerisi demo sayfası bir web sayfası açın.
Geliştirici Araçları'nı açın ve Performans paneline gidin.
Performans panelinde ayarlar Yakalama ayarları düğmesini tıklayın ve onay kutusu CSS seçici istatistiklerini etkinleştir'i işaretleyin.
radio_button_checked Kaydet'i tıklayın, iyileştirmek istediğiniz senaryoyu çalıştırın ve ardından radio_button_checked Durdur'u tıklayın.
Ardından, sonraki bölümlerde açıklandığı gibi CSS seçici istatistiklerini görüntüleyin.
Tek bir etkinliğe ait CSS kural seçici istatistiklerini görüntüleme
Tek bir Stili Yeniden Hesapla etkinliğinde yer alan CSS kural seçicilerinin istatistiklerini görüntülemek için:
Seçici İstatistikleri açık durumdayken performans izleme kaydedin.
Performans kaydınızda bir Stili Yeniden Hesapla etkinliği bulup tıklayın.
Performans panelinin alt bölümünde Seçici İstatistikleri sekmesini açın.
Seçici İstatistikleri sekmesindeki CSS seçiciler tablosu
Seçici İstatistikleri sekmesi, CSS seçicilerin yer aldığı bir tablo içerir. Tabloda, her CSS seçici için aşağıdaki bilgiler gösterilir:
| Sütun | Açıklama |
|---|---|
| Geçen süre (ms) | Tarayıcının bu CSS seçici ile eşleşmesi için harcadığı süredir. Bu süre, milisaniye (ms) cinsinden verilir. 1 ms, saniyenin 1/1000'idir. |
| Eşleşme Denemeleri | Tarayıcı motorunun bu CSS seçiciyle eşleştirmeye çalıştığı öğe sayısı. |
| Eşleşme Sayısı | Tarayıcı motorunun bu CSS seçiciyle eşleştirdiği öğe sayısı. |
| Yavaş yol eşleşmeme yüzdesi | Bu CSS seçiciyle eşleşmeyen öğelerin, tarayıcı motorunun eşleştirmeye çalıştığı ve eşleştirmek için tarayıcı motorunun daha az optimize edilmiş kod kullanmasını gerektiren öğelere oranı. |
| Seçici | Eşleşen CSS seçici. |
| Stil Sayfası | CSS seçiciyi içeren CSS stil sayfası. |
İşlem tamamlandığında, Performans panelinde ayarlar Yakalama ayarları'nı açın ve CSS seçici istatistiklerini etkinleştir onay kutusu işaretini kaldırın.
Birden fazla etkinlik için CSS kural seçici istatistiklerini görüntüleme
Birden fazla Stili Yeniden Hesapla etkinliğine dahil olan CSS kural seçicilerinin toplu istatistiklerini görüntülemek için birden fazla Seçici İstatistikleri tablosunu aşağıdaki gibi bir e-tabloya kopyalayın:
Seçici İstatistikleri açık durumdayken performans izleme kaydedin.
İlgilendiğiniz ilk Stili Yeniden Hesapla etkinliğini bulup tıklayın.
Performans panelinin alt bölümünde Seçici İstatistikleri sekmesini açın.
Seçici istatistik tablosunu sağ tıklayın ve Tabloyu kopyala'yı seçin.
Tabloyu Google E-Tablolar gibi bir e-tabloya yapıştırın.
İlgilendiğiniz diğer Stili Yeniden Hesapla etkinlikleriyle önceki adımları tekrarlayın.
İşlem tamamlandığında, Performans panelinde ayarlar Yakalama ayarları'nı açın ve CSS seçici istatistiklerini etkinleştir onay kutusu işaretini kaldırın.
Tam kayıt için toplu CSS kural seçici istatistiklerini görüntüleyin
Performans kaydının tamamına dahil olan CSS kural seçicilerinin toplu istatistiklerini görüntülemek için:
Seçici İstatistikleri açık durumdayken performans izleme kaydedin.
Seçili olabilecek herhangi bir etkinliğin seçimini kaldırmak için flame grafiğinde boş bir alanı tıklayın.
Kayıt aralığının tamamını seçin. Bunu yapmak için Performans panelinin üst kısmındaki CPU grafiğini çift tıklayın.
Performans panelinin alt bölümünde Seçici İstatistikleri sekmesini açın. En üstte, tüm seçicilere ilişkin toplamlarla ilgili verilerin yer aldığı yeni bir satır görürsünüz.
İşlem tamamlandığında, Performans panelinde ayarlar Yakalama ayarları'nı açın ve CSS seçici istatistiklerini etkinleştir onay kutusu işaretini kaldırın.
CSS seçici istatistiklerini analiz etme
Seçici İstatistikleri tablosundaki verileri artan veya azalan düzende sıralamak için sütun başlığını tıklayın. Örneğin, en fazla süreyi hangi CSS seçicilerin kullandığını görmek için Geçen süre (ms) sütun başlığını tıklayın.
Web sayfanızın performansını iyileştirmek için şu CSS seçicilere odaklanın:
- Hesaplanması uzun sürdü (geçen süre (ms) değeri yüksek).
- Tarayıcının birçok kez eşleştirmeye çalıştığı içerikler (yüksek Eşleşme Denemeleri değeri).
- Tarayıcının aslında çok fazla öğe eşlemediği durumlar (Eşleşme Denemeleri değerine kıyasla düşük Eşleşme Sayısı değeri).
- Yavaş yol eşleşmeme yüzdesi yüksek olan.
Örneğin, önceki ekran görüntüsünde:
- En çok süre ilk CSS seçici (
html body .ps[tooltip...) gerekliydi. - Tarayıcı motoru, bu CSS seçiciyi 1.104 kez eşleştirmeye çalıştı ancak hiçbir öğeyle eşleşmedi.
Bu nedenle, bu CSS seçici, iyileştirilmesi gereken ilk adaydır.
CSS seçicilerinizi, sayfadaki daha az sayıda öğeyi hesaplamak ve eşleştirmek için daha az zaman alacak şekilde değiştirmeyi deneyin. CSS seçicilerinizi nasıl iyileştireceğiniz kendi kullanım alanınıza bağlıdır.
Yaptığınız değişikliklerin Stili Yeniden Hesapla etkinlik süresini azaltmaya yardımcı olduğunu onaylamak için Geçen süre (ms) sütununda bu eğiticideki adımları tekrarlayın.