Lighthouse raporunuzun Fırsatlar bölümünde, kullanılmayan CSS içeren ve 2 KiB veya daha fazla tasarruf potansiyeli olan tüm stil sayfaları listelenir. Ağ etkinliğinin kullandığı gereksiz bayt sayısını azaltmak için kullanılmayan CSS'yi kaldırın:
Kullanılmayan CSS'nin performansı nasıl yavaşlattığı
Bir sayfaya stil eklemenin yaygın bir yolu <link> etiketi kullanmaktır:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
Tarayıcının indirdiği main.css dosyası, kullandığı HTML'den ayrı olarak depolandığı için harici stil sayfası olarak bilinir.
Varsayılan olarak, bir tarayıcı kullanıcının ekranında herhangi bir içerik görüntüleyebilmeden veya oluşturmadan önce karşılaştığı tüm harici stil sayfalarını indirmeli, ayrıştırmalı ve işlemelidir. Stil sayfaları sayfanın stilini etkileyen kurallar içerebileceğinden, tarayıcı stil sayfaları işlenmeden önce içerik göstermeye çalışmamalıdır.
Her bir harici stil sayfası ağdan indirilmelidir. Bu ek ağ gezileri, kullanıcıların ekranlarında içerik görmeden önce beklemesi gereken süreyi önemli ölçüde uzatabilir.
Kullanılmayan CSS, tarayıcının oluşturma ağacını oluşturma hızını da yavaşlatır. Oluşturma ağacı, DOM ağacı gibidir ancak her düğümün stilini de içerir. Tarayıcı, oluşturma ağacını oluşturmak için DOM ağacının tamamını incelemeli ve her düğüm için hangi CSS kurallarının geçerli olduğunu kontrol etmelidir. Kullanılmayan CSS sayısı ne kadar fazla olursa tarayıcının her bir düğüme ait stilleri hesaplamak için harcaması gereken zaman da o kadar fazla olabilir.
Kullanılmayan CSS'yi algılama
Chrome Geliştirici Araçları'nın Kapsam sekmesi, kritik ve kritik olmayan CSS'leri keşfetmenize yardımcı olabilir. Kapsam sekmesiyle kullanılan ve kullanılmayan CSS'yi görüntüleme başlıklı makaleyi inceleyin.
Kritik CSS'leri satır içine alın ve kritik olmayan CSS'leri erteleyin
Bir <script> etiketine kod eklemeye benzer şekilde, HTML sayfasının head bölümündeki bir <style> bloğunun içine ilk boyama için gerekli kritik stilleri ekleyin.
Ardından, preload bağlantısını kullanarak stillerin geri kalanını eşzamansız olarak yükleyin.
Kritik araç'ı kullanarak "Sayfanın Üst Kısmı" CSS'sini ayıklayıp satır içi hale getirme işlemini otomatikleştirebilirsiniz.
Kritik olmayan CSS'leri erteleme bölümünden daha fazla bilgi edinebilirsiniz.
Gruba özel yönergeler
Drupal
Kullanılmayan CSS kurallarını kaldırmayı ve yalnızca gerekli Drupal kitaplıklarını alakalı sayfaya veya bir sayfadaki alakalı bileşene eklemeyi değerlendirin. Ayrıntılar için Drupal belgelerini inceleyin.
Gereksiz CSS ekleyen ekli kitaplıkları belirlemek için Chrome Geliştirici Araçları'nda kod kapsamını çalıştırmayı deneyin. Drupal sitenizde CSS toplama devre dışı bırakıldığında, sorumlu temayı veya modülü stil sayfasının URL'sinden belirleyebilirsiniz.
Kod kapsamında çok sayıda kırmızı işaret taşıyan birden fazla stil sayfası bulunan temaları ve modülleri arayın. Temalar ve modüller yalnızca sayfada gerçekten kullanılan bir stil sayfası kitaplığını eklemelidir.
Joomla
Sayfanızda kullanılmayan CSS'ler yükleyen Joomla uzantılarının sayısını azaltmayı veya değiştirmeyi düşünün.
WordPress
Sayfanızda kullanılmayan CSS'ler yükleyen WordPress eklentilerinin sayısını azaltmayı veya değiştirmeyi düşünün.