Kullanılmayan CSS kodlarını nasıl filtreleriz?

CSS client side bir dildir. Server üzerinde yorumlanmaz. Dilerseniz kopyalaya kopyalaya 10-20mblık bir css oluşturun ve sayfayı açmaya çalışın. Zaten serverside olsaydı ie ile uğraşmak zorunda kalmazdık :)

Bkz : http://www.aaronsw.com/weblog/000169

Şöyle bir şey var mesela, css dosya boyutu 200kb olsun diyelim, siteyi açan kişinin internet hızı da 100kb olsun saniyede. Bu dosya ilk açılışta mecburen yüklenecek, 200kb bir css dosyası 2 sn de yüklenir. Temizleyip, sıkıştırdık diyelim 100kb olsun, site açılış hızına 1sn katkısı olur. Dediğiniz gibi çok etkisi olmuyor ama az da olsa bir etki var.

Hocam söylenmiş ama ben tekrar sormak istiyorum. CSS dosyasında boşluklar bile boyut ve işlenme hızını etkiliyor. Nasıl olur da kullanılmayan kodların etkisi olmaz? Ben newspaper temasında testler yaparken (ki newspaper temasında style.css dosyasında 50.000 satır kod var) işine yaramayan gereksiz 10.000 satır kodu sildigimde gözle görülür fark vardı. Pingdom gtmetrix testlerinde de boyut ve hızda farklar vardı. Kullanimayan satırlar yük bindiriyor bunu kendi tecrübelerime ve mantığa göre söylüyorum. Normalde bazı dillerde yorum satırı ve boşluğunun etkisi olmuyor. Fakat css ve js kodlarında boşlukları kaldırmak dahi sonucu etkiliyor. Gereksiz kullanilmayan satırlar performansı etkiler hem boyut hem hız olarak. Bunu birçok sitede test ettim. Lütfen yanılmıyorsam bilgilendirin.

Peki can alıcı bir soru sorabilir miyim? :P Kullanılmayan stillerin orada ne işi var? Yani kullanılmayan stiller nereden geliyor.


Google Chrome tarayıcısının geliştirici bölümünde böyle bir özellik var. Ancak bu özellik sayfa bazlı çalışıyor. Fakat şöyle bir şey yapabilirsiniz mesela: Sitenizdeki tüm şablon sayfaları (Bir içerik sayfası, iletişim sayfası,etiket sayfası,kategori sayfası vs.) gezerek bu aracı kullanım Chrome tarayıcısının tüm sayfalarda bulduğu kullanılmayan kodları karşılaştırıp gezdiğiniz tüm sayfalarda ortak bir şekilde kullanılmayan kodları ortaya çıkartabilirsiniz. Biraz uğraştıracak bir yöntem ama sonuç verecektir.

Ayrıca şöyle bir site buldum: https://unused-css.com/

Yorumları tek tek okudum ve hayal kırıklığına uğradım, gerçekten seviyemiz çok ama çok geride, "css, kullanıcı tarafında derlendiği için çok yormaz", "css pek yormaz" gibi yaklaşımlar kabul edilemez, bir sunucunun sunum hızı sadece dosya boyutuna ya da hangi tarafta derlendiğiyle doğru orantılı değildir, arada çok fazla faktör vardır mesela socketler bunun bir örneğidir, siz bir siteye giriş yaptığınızda arkaplanda ne kadar kaynak varsa herbiri için tek tek bağlantı açılıp dosya kendi diskinizdeki geçici klasöre yazılır, tarayıcı oradan okur ve yorumlar. Yorumlanan her bir değişken ram'da ve cpu'da, işlem ve hacmi haplar. Dolayısıyla sayfa içindeki bütün kaynaklar sitenizin açılmasını etkiler buna css de dahil.

Bütün kaynaklar için geçerli olan tek kural; en minimal, en kırpılmış hali en uygun halidir.

Konudaki ana soruya gelecek olursak, csslerinizi artık sass gibi preprocessor programlara aktarmanız çağı yakalamanız ve verimlilik açısından önemli, ayrıca gulp gibi yardımcı programlar ile kullanılmayan kodları csse derlenirken silmeniz de mümkün, purifycss adında bir kütüphane var, deneyebilirsiniz.

CSS dosyalarındaki kullanılmayan stilleri tespit etme işlemini tek sayfa üzerinden yapmanız doğru sonuç vermeyebilir çünkü her stil websitesinin her sayfasında kullanılmayabiliyor. Sitenin hiç bir yerinde kullanılmayan stilleri kaldırmak gerekir ki doğru sonuç alınsın. O yüzden bahsedilen tek sayfa üzerinden tarama yapan eklentilerin doğru sonuç vereceğini düşünmüyorum.

Wordpress gibi hazır yazılım kullananlar için bir fikrim yok(belki bir eklenti falan vardır) ancak websitesinin tamamını local olarak geliştirenler için kullandığınız IDE üzerinde böyle bir fonksiyon mutlaka vardır.

Şahsen ben intelliJ'in PHPStorm IDE'sini kullanıyorum ve bunda böyle bir özellik mevcut tüm dosyalarınızı tarayarak css dosyalarında bulunan kullanılmayan stilleri otomatik olarak kaldırabiliyor. Bu tarz local çözümler kullanabilirsiniz belki.