• Buradasın

    Potansiyel tasarruf ağ etkinliğinin kullandığı bayt sayısını azaltmak üzere stil sayfalarında kullanılmayan kuralları azaltıp ekranın üst kısmında içerik için kullanılmayan CSS'yi erteleyin.

    Yazeka

    Arama sonuçlarına göre oluşturuldu

    Ağ etkinliğinin kullandığı bayt sayısını azaltmak için stil sayfalarında kullanılmayan kuralları azaltmak ve ekranın üst kısmındaki içerik için kullanılmayan CSS'yi ertelemek amacıyla aşağıdaki yöntemler uygulanabilir:
    • Kullanılmayan CSS'yi kaldırma 15. Lighthouse raporundaki "Kullanılmayan CSS'yi Kaldır" önerisi, 2 KiB veya daha fazla tasarruf potansiyeli olan stil sayfalarını listeler 15.
    • CSS'yi kritik ve ertelenmiş olarak ayırma 3. Sayfanın ilk görüntüsünü oluşturan stil kurallarını kritik CSS olarak tanımlayıp HTML dosyasının başına, geri kalan kuralları ise ertelenmiş CSS olarak tanımlayıp dosyanın sonuna veya ayrı bir dosyaya yerleştirmek 3.
    • CSS'yi küçültme 35. CSS kodundaki boşlukları, yorumları ve gereksiz karakterleri kaldırarak dosya boyutunu küçültmek ve ağ trafiğini azaltmak 35.
    • CSS'yi sıkıştırma 3. CSS kodunu gzip veya brotli gibi bir algoritma ile sıkıştırarak dosya boyutunu daha da küçültmek ve sunucu ile tarayıcı arasındaki veri aktarımını hızlandırmak 3.
    Bu işlemleri otomatikleştirmek için Critical aracı kullanılabilir 5.
    5 kaynaktan alınan bilgiyle göre:

    Konuyla ilgili materyaller

    Kullanılmayan CSS'yi azaltın ne demek?

    Kullanılmayan CSS'yi azaltmak, web sitesinde aktif olarak kullanılmayan CSS kodlarının silinmesi anlamına gelir. Bu, genellikle şu nedenlerle yapılır: Performans artışı: Kullanılmayan CSS, tarayıcıların stil hesaplamasını yavaşlatır ve sayfa yükleme süresini uzatır. Kaynak tasarrufu: Aktif olarak kullanılmayan CSS dosyaları, gereksiz yere dosya boyutunu artırır. Kullanılmayan CSS'yi azaltmak için şu yöntemler uygulanabilir: Hazır kütüphane kodlarını inceleme: Bootstrap gibi kütüphanelerde, aktif olarak kullanılmayan kodlar da dosyada yer alır. Online araçlar kullanma: UnusedCSS, PurifyCSS, PurgeCSS gibi araçlarla kullanılmayan CSS kodları tespit edilebilir. Manuel inceleme: Chrome Geliştirici Araçları'nın "Kapsam" sekmesi kullanılarak kullanılmayan CSS kodları görülebilir.