Kullanılmayan CSS (Unused CSS) Nedir? Nasıl Kaldırılır?

TLDR;

Kullanılmayan CSS’leri kaldırmak için birden farklı “online araç” kullanıp daha sonra bunları test etmek gerekir. CSS bir oluşturma engelleyici olduğu için optimize edilmesi çok önemlidir.

Kullanılmayan CSS Nedir?

Kullanılmayan CSS, sayfanıza yüklenen CSS dosyasındaki kullanılmayan kodlardır. Tanımı okuduğumuzda işlem aslında basit gibi görünsede detaylı bir işlem.

Genellikle hazır CSS kütüphaneleri ve WordPress temaları bu problemin başlıca nedeni diyebiliriz. 

Tek bir tool ile kullanılmayan CSS’leri tespit etmek oldukça zor. Kullanılmayan CSS sorununun kaynağını ve çözüm yollarını sizlere bu blog yazısında aktaracağım.

Kullanılmayan CSS’leri Kaldırırsak Neler Olacak? 

Kullanılmayan CSS genellikle CSS Kütüphanelerinden (Bootstrap) kaynaklanır. Bootstrap bir yüzlerce yazılımcının destek verdiği bir CSS kütüphanesidir. 

Bootstrap genel olarak sitenizde daha önceden yazılmış kodların kullanılması sağlar. Fakat bu kodlar binlerce farklı varyasyon bulundurduğu için siz yalnızca belli bir bölümünü kullanacaksınız ve kullanmadığınız tüm kodlarda bu kütüphane ile birlikte sitenize yüklenecek. İşte burası kullanılmayan CSS bölümü. Sayfanız yalnızca 20 kB’lik bir kod satırı kullanırken 200 kB’lik bir dosyayı yüklemek zorunda kalacaktır. 

Aslında bunu bir görsellerde yapmak oldukça basit. Eğer PNG kullanıyorsanız onu JPG yaptığınızda çok daha kolay tasarruf sağlayabilirsiniz. Fakat bunu CSS’de yapmak daha önemli çünkü CSS, siteyi oluşturmaya engelleyen bir dosyadır.

Yani CSS küçültmek yerine bunu görselleri optimize edip sorunu çözeriz diye düşünmeyin. 

Kullanılmayan CSS Nasıl Bulunur?

Ne olduğunu ve neden çözmemiz gerektiğini anladık. Şimdi bunları bulalım. Kullanılmayan CSS’leri bulmak için Chrome DevTools kullanacağız ve daha sonrasında birkaç farklı Online Araç (Tool) inceleyeceğiz. Tüm bunları yaparken örnek olarak www.whitehouse.gov/ sitesini kullanalım.

Chrome DevTools İle Nasıl Yapılır?

Sitemizin ana sayfasını açıp işlemlere başlayalım. 

Aşağıdaki bölümü açmak için Chrome DevTools içinde bulunan “Coverage” sekmesini açmanız gerekmektedir.

Daha sonra sayfayı yenilememiz istenecek ve yeniledikten sonra aşağıdaki gibi bir ekran bizi karşılayacak.

Gördüğünüz gibi yüklenen sayfada %86.6 oranında kullanılmayan CSS kodu bulunmakta. Bir WordPress teması, kendi CSS kodlarını kullanmakta ve tüm bunları tek bir CSS dosyasında yüklemektedir. Görüldüğünü gibi ana sayfada bu kodların yalnızca %13.4’ü kullanılmış durumda. O zaman geri kalan tüm kodları silersek sitemiz daha mı hızlı açılır? Hayır. Çünkü kullanılmadığını düşündüğümüz %86.6’lık bölüm aslında sitenin diğer sayfalarında kullanılıyor olabilir. Kategori sayfası veya blog detay sayfalarının yapıları daha farklıdır ve kodların bir bölümü orada kullanılıyor olabilir. Kırmızı ile işaretlenen kodlar aslında ana sayfada kullanılmıyor fakat “post” bölümünde kullanılıyor.

Biraz Daha Derine İnmek Gerekirse

Muhtemelen kırmızı ile işaretlenen kodları silince problemin çözüleceğini düşünebilirsiniz fakat “Coverage” sekmesine tüm bunları yapmak çok mantıklı görünmüyor. Çünkü sitede bulunan tüm kullanılmayan CSS leri bulmak için sırasıyla,

• Her bir ayrı sayfa için coverage raporunu kontrol etmelisiniz
• Bunları yaparken Javascriptleri sakın iptal etmeyin çünkü etkileşime geçmesi gereken kodlar olabilir.
• Sitede bulunan tüm animasyonları kontrol etmelisiniz. (Butona basınca renginin değişmesi bile.)
• Bunu sadece Desktop için değil tüm site kırılımları içinde yapmalısınız. 
• Ve bunların yaparken her bir kodu bir kenara yazmanız gerekmektedir.

Yani sitede bulunan tüm varyasyonları ve uç noktaları kontrol etmeniz gerekmekte. Bunun için kodların düzgün ve özenli yazılması gerekmekte fakat yapabileceğimiz birkaç method var.

Kullanılmayan CSS Bulma Araçları

1- UnusedCSS 

2- PurifyCSS

3- PurgeCSS

4- UnCSS

Gerçekten bu araçlara CSS lerimizi atıp, kullanılmayan CSS’leri sildikten sonra geri aldığımızda problemimiz çözülecek mi? Hayır. Çünkü bu toollar yeteri kadar düzgün çalışmıyor. Sitenizde bulunan Javascript ile etkileşime geçmesi gereken CSS kodlarını da siliyor ya da :hover etiketlerini görmezden geliyor. Fakat yinede yukarıda listelenen tüm toolları bir kontrol edelim. 

UnusedCSS

En popüler tool’lardan bir tanesidir. Ücretli ve ücretsiz olmak üzere 2 farklı sürümü var. Ücretsiz sürümünde, sitenizin URL’ini attıktan sonra sitenizi tarayarak gerekli işlemlerin tamamını yapıyor fakat CSS dosyalarınızı indirmenize izin vermiyor. 

Sadece 1 sayfayı analiz ediyor gibi görünsede aslında tüm sayfaları analiz edip size bir mail atıyor.

Not: CSS dosyalarınızı değiştirdek sonra sitenizin tamamen kontrol etmeden yayına almayın. Çünkü bazı çalışan kodları silme ihtimali var.

PurifyCSS

Online olarak çalışan bu araçta birden fazla URL’i aynı anda tarayabiliyoruz. Böylelikle bizim elimizde yapmamız gereken bazı işlemleri hızlıca tool hallediyor. Fakat bu tool’u canlı web sitesinde kullanmak yerine siteyi geliştirme sürecinde kullanmak çok daha mantıklı. Daha sonra UnusedCSS tool’una atarak kodlarınızı 2 kere kontrol edebilirsiniz.

PurgeCSS

Sitenizde TailwindCSS, Bootstrap, MaterializeCSS, Foundation gibi CSS kütüphaneleri kullanıyorsanız bu tool kesinlikle size göre. Aslında bu tool’un asıl amacı siteyi geliştirirken kullanmaktır. Sitenizi geliştirdiniz ve artık kontrollere başlıyorsanız PurgeCSS burada rol oynamaya başlıyor. PurgeCSS içeriğinizi ve CSS dosyalarınızı analiz eder. Daha sonra tüm dosyalarınızda kullanılan seçicileri(class,id gibi) içerik dosyalarınızdaki seçicilerle eşleştirir. Gerekli işlemleri yaptıktan sonra size temiz bir CSS dosyasını iletir.

UnCSS

UnCSS, PurgeCSS ile çok benzer bir şekilde kullanılır fakat daha fazla manuel işleme ihtiyaç duyar. Sonuçları çok daha tutarlı diyebiliriz. UnCSS’i diğer araçlar ile kullandığımızda en doğru sonucu yakalıyoruz.

Kullanılmayan CSS Nasıl Kaldırılır?

Kullanılmayan CSS’leri manuel bir şekilde bulmanın ne kadar zor olduğunu anlamış olduk. Fakat bunları CSS Araçları ile daha kolay bir şekilde ortaya çıkarabiliriz.

Özetlemek gerekirse;

1- Birden fazla Kullanılmayan CSS aracını kullanarak en temiz dosyaya ulaşın

2- Çıkan sonuçları öncelikle bir test ortamında belli bir süre deneyin

3- Tüm bu işlemleri yaparken Javascript’i kapatmayın

4- Tüm işlemler ve test aşaması tamamlandıktan sonra orjinal sitenizin ve CSS dosyalarınızın yedeğini alın

Geliştirmek gerekirse;

1. Hazır kütüphaneler kullanmaktan kaçının
2. CSS dosyalarınızı parçalara bölün
   1. homePage.css 
   2. blogDetailPage.css
   3. productPage.css
3. Yeni ve güncel metodlar kullanın ve performansını deneyin 
   1. Styled Component
   2. CSS module gibi
4. Eğer WordPress kullanıyorsanız, gereksiz eklentilerinizi kaldırın. 
   1. Her eklentinin ayrı bir CSS dosyası vardır.
5. Eğer WordPress kullanıyorsanız, temanızda bulunan ama kullanmadığınız özelliklerin CSS kodlarını silin.
   1. Blog yazınız yoksa blog bölümünü
   2. Ürün satmıyorsanız E ticaret bölümünü

---