Lighthouse raporunuzun Fırsatlar bölümünde, 2 KiB veya daha fazla tasarruf edebileceğiniz kullanılmayan CSS içeren 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, performansı nasıl yavaşlatır?
<link> etiketi kullanmak, sayfalara stil eklemek için yaygın olarak kullanılan bir yöntemdir:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
Tarayıcının indirdiği main.css dosyası, onu kullanan HTML'den ayrı olarak depolandığı için harici stil sayfası olarak bilinir.
Varsayılan olarak, bir tarayıcının kullanıcının ekranında herhangi bir içeriği görüntülemeden veya oluşturmadan önce, karşılaştığı tüm harici stil sayfalarını indirmesi, ayrıştırması ve işlemesi gerekir. Stil sayfaları sayfanın stilini etkileyen kurallar içerebileceğinden, tarayıcının içeriği stil sayfaları işlenmeden önce görüntülemeye çalışması anlamlı olmaz.
Her bir harici stil sayfası ağdan indirilmelidir. Bu ekstra ağ gezileri, kullanıcıların ekranlarında herhangi bir içerik görmeden önce beklemeleri gereken süreyi önemli ölçüde artırabilir.
Kullanılmayan CSS, tarayıcının oluşturma ağacı yapısını da yavaşlatır. Oluşturma ağacı, her bir düğümün stillerini de içermesi dışında DOM ağacına benzer. Oluşturma ağacını oluşturmak için tarayıcının tüm DOM ağacını işlemesi ve her düğüme hangi CSS kurallarının geçerli olduğunu kontrol etmesi gerekir. CSS ne kadar çok kullanılmazsa tarayıcının her bir düğümün stillerini hesaplamak için harcaması gereken süre de o kadar fazla olabilir.
Kullanılmayan CSS'yi tespit etme
Chrome Geliştirici Araçları'nın Kapsam sekmesi, kritik öneme sahip olmayan CSS'leri keşfetmenize yardımcı olabilir. Kapsam sekmesiyle, kullanılan ve kullanılmayan CSS'yi görüntüleme bölümünü inceleyin.
Kritik CSS'leri satır içine alın ve kritik olmayan CSS'leri erteleyin
Kodu <script> etiketinde satır içine yerleştirmeye benzer şekilde, HTML sayfasının head kısmındaki <style> bloğunun içindeki ilk boyama için satır içi kritik stiller gerekir.
Daha sonra, preload bağlantısını kullanarak stillerin geri kalanını eşzamansız olarak yükleyin.
Kritik aracı kullanarak "Ekranın Üst Kısmındaki" CSS'yi ayıklama ve satır içine alma sürecini otomatikleştirmeyi düşünebilirsiniz.
Kritik olmayan CSS'leri erteleme bölümünde daha fazla bilgi edinebilirsiniz.
Yığına özel kılavuz
Drupal
Kullanılmayan CSS kurallarını kaldırabilirsiniz. Gerekli Drupal kitaplıklarını yalnızca ilgili sayfaya veya bileşene ekleyin. Ayrıntılar için Kitaplık tanımlama konusuna bakın.
Joomla Dili
Sayfanızda kullanılmayan CSS'ler yükleyen Joomla uzantılarının sayısını azaltmayı veya bu uzantıları değiştirmeyi değerlendirin.
WordPress
Sayfanızda kullanılmayan CSS'ler yükleyen WordPress eklentilerinin sayısını azaltmayı veya değiştirmeyi düşünün.