CSS küçültme, tarayıcının dosyayı yorumlama biçimini hiç değiştirmeden dosya boyutunu azaltır — uygulanan stiller birebir aynı kalır, ortadan kalkan yalnızca kodu okuyan insan için var olan kısımdır.
Aslında ne siliniyor
Küçültücü, kurallar arasındaki boşluk ve satır sonlarını, /* ... */ biçimindeki yorumları, bir bloğun kapanış parantezinden hemen önceki son noktalı virgülü siler ve 0.5em → .5em gibi değerlerdeki gereksiz sıfırları kısaltır. Bunların hiçbiri karakter içeriğinin kendisine dokunmaz — yalnızca çevresindeki boşluk ve noktalama işaretlerine.
Türkçe karakterler ve @charset
content: "→" gibi bir değer ya da içinde "ş", "ğ", "ı" gibi Türkçe karakterler geçen bir yorum, küçültme sırasında hiçbir şekilde bozulmaz — küçültücü boşluk, yorum ve söz dizimiyle uğraşır, metnin byte kodlamasıyla değil. Dikkat edilmesi gereken tek nokta, birden fazla CSS dosyasını birleştiren eski araçların veya derleme hattının UTF-8 dışında bir kodlama varsayabilmesidir. Türkçe karakter içeren bir CSS dosyasını UTF-8 olarak kaydetmek ve dosyanın en başına, her şeyden önce (yorumlardan bile önce) açık bir @charset "UTF-8"; eklemek en güvenlisidir.
Küçültülmüş dosya neden aynı şekilde çalışır
Tarayıcının CSS ayrıştırıcısı, token'lar arasındaki boşluk ve satır sonlarını tamamen görmezden gelir — bunlar yalnızca insanın kodu daha rahat okuması için vardır. Bu yüzden bu karakterlerin silinmesi hesaplanan stilleri hiç değiştirmez, dosyayı sadece daha derli toplu hale getirir.
Bu neden gerekli
- Bir siteyi canlıya almadan önce CSS dosyasının boyutunu küçültmek.
- Aktarılan veri miktarını azaltarak sayfa yüklenmesini hızlandırmak.
- Kaynak koda üstünkörü bakıldığında stil yapısını daha az anlaşılır kılmak.
Mobil öncelikli kullanımda küçültmenin gerçek karşılığı
Türkiye'de internete erişim uzun süredir büyük ölçüde mobil cihazlar ve 4G üzerinden gerçekleşiyor; birçok kullanıcı için sabit geniş bant yerine mobil veri paketleri hâlâ birincil bağlantı yöntemi. Böyle bir kullanıcı kitlesi için CSS dosyasından kırpılan birkaç kilobayt, soyut bir performans metriği olmaktan çıkıp doğrudan daha hızlı açılan bir sayfa ve daha az tüketilen veri paketi anlamına gelir. Uygulaması ucuz bir optimizasyon olduğu için, mobil ağırlıklı bir kitlesi olan siteler için atlanacak bir adım değildir.