Lighthouse raporunuzun Fırsatlar bölümünde tüm stil sayfalarında, kullanılmayan CSS ile 2 KiB veya daha fazla tasarruf potansiyeli elde edersiniz. Kullanılmayan CSS'yi kaldırın kullanarak ağ etkinliğinin kullandığı gereksiz baytları azaltmak için aşağıdaki adımları uygulayın:
Kullanılmayan CSS'nin performansı nasıl yavaşlattığı
<link> etiketi kullanmak, bir sayfaya stil eklemek için sık 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ı, harici bir stil sayfası olarak bilinir.
çünkü onu kullanan HTML'den ayrı olarak saklanır.
Varsayılan olarak bir tarayıcının tüm harici stil sayfalarını indirmesi, ayrıştırması ve işlemesi gerekir içerik görüntülemeden veya oluşturmadan önce karşılaştığı özellikler. Bir tarayıcının içerik görüntülemeyi denemesi anlamlı olmaz işlenmeden önce, çünkü stil sayfaları, sayfanın stilini etkileyen kurallar içerebilir.
Her bir harici stil sayfası ağdan indirilmelidir. Bu ek ağ gezileri, süreyi önemli ölçüde kullanıcıların ekranlarında içerik görmeden önce beklemeleri gerektiğidir.
Kullanılmayan CSS de tarayıcının oluşturma ağacı. Oluşturma ağacı, DOM ağacı gibidir ancak her düğümün stilini de içerir. Oluşturma ağacını oluşturmak için tarayıcının, DOM ağacının tamamını yürütmesi ve her düğüme hangi CSS kurallarının uygulandığını kontrol etmesi gerekir. Kullanılmayan CSS sayısı ne kadar fazlaysa o kadar fazla zaman harcayabilir.
Kullanılmayan CSS'leri tespit etme
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'leri görüntüleme bölümüne bakın.
Kritik CSS'leri satır içine alın ve kritik olmayan CSS'leri erteleyin
Bir <script> etiketinde satır içi koda benzer şekilde,
ilk boyama için gereken satır içi kritik stiller
HTML sayfasının head kısmındaki bir <style> bloğunda.
Ardından, preload bağlantısını kullanarak geri kalan stilleri eşzamansız olarak yükleyin.
"Ekranın Üst Kısmı"nı ayıklama ve satır içine alma işlemini otomatikleştirmeyi düşünün CSS Kritik aracı kullanarak.
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ı deneyin. Yalnızca gerekli Drupal kitaplıklarını ekleyin bir sayfadaki alakalı sayfaya veya bileşene yönlendirmektedir. Bkz. Kitaplık tanımlama inceleyebilirsiniz.
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.