• Buradasın

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

    Yazeka

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

    Kullanılmayan CSS'yi azaltmak, web sitesinde aktif olarak kullanılmayan CSS kodlarının silinmesi anlamına gelir 12. 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 135.
    • Kaynak tasarrufu: Aktif olarak kullanılmayan CSS dosyaları, gereksiz yere dosya boyutunu artırır 125.
    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 12.
    • Online araçlar kullanma: UnusedCSS, PurifyCSS, PurgeCSS gibi araçlarla kullanılmayan CSS kodları tespit edilebilir 124.
    • Manuel inceleme: Chrome Geliştirici Araçları'nın "Kapsam" sekmesi kullanılarak kullanılmayan CSS kodları görülebilir 13.
    5 kaynaktan alınan bilgiyle göre:

    Konuyla ilgili materyaller

    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.

    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. CSS'yi kritik ve ertelenmiş olarak ayırma. CSS'yi küçültme. CSS'yi sıkıştırma. Bu işlemleri otomatikleştirmek için Critical aracı kullanılabilir.

    CSS kritik yol nedir?

    CSS kritik yolu, bir tarayıcının bir HTML, CSS ve JavaScript belgesini işleyerek ekranda anlamlı piksellere dönüştürmesi için geçmek zorunda olduğu adımlar dizisidir. Bu yoldaki her bir kaynak, örneğin bir CSS dosyası, "kritik" olarak kabul edilir çünkü bu kaynak işlenmeden sayfa render edilemez, yani kullanıcı boş bir beyaz ekrana bakmaya devam eder. CSS kritik yolunun optimizasyonu, özellikle sayfanın ilk açıldığında görünen kısmı olan "ekranın üstü" (above-the-fold) içeriğinin render edilmesi için hayati önem taşır. CSS kritik yolu şu adımları içerir: HTML'den Belge Nesne Modeli (DOM) oluşturma. CSS'den CSS Nesne Modeli (CSSOM) oluşturma. CSS kritik yolunu optimize etmek için şu yöntemler kullanılabilir: Kritik CSS'in HTML'e dahili olarak yerleştirilmesi. Kritik olmayan CSS ve JavaScript'in FCP tamamlandıktan sonra yüklenmesi/çalıştırılması. Daha sonra render olacak alanlar için (banner vb.) render işlemine kadar mevcut alanı dolduracak şekilde görsel kullanılması. Sayfa yüklemesine kadar varlıklar/görseller için placeholder görseller kullanılması.