CSS küçültmek mi, okunur tutmak mı? Ölçerek karar verin

Bir stil dosyasını yayına alırken şu soru gelir: küçültmek gerçekten işe yarar mı, yoksa okunur bırakmak mı daha iyi? Cevap çoğunlukla "küçültün" olur, ama kaç bayt kazandığınızı nadiren ölçeriz.

Bu yazıda 144 satırlık kurgusal bir stil dosyasını CSS Biçimlendirici'ye yapıştırdık, üç halinin boyutunu ham ve gzip sonrası ölçtük. Sonra küçük bir dosyaya bilerek dört hata koyup aracın bunları nasıl bulduğuna baktık.

Küçültme, boşlukları, satır sonlarını ve gereksiz noktalı virgülleri silerek dosyayı kısaltır. Bir bavulu hazırlarken katlamak gibi: içindekiler aynı, ama bavul daha az yer kaplıyor. Ancak sunucuların çoğu dosyayı sıkıştırarak gönderiyor (gzip ya da benzeri) ve sıkıştırma, tekrar eden boşlukları küçültmenin yaptığı işin bir kısmını kendisi yapıyor.

Yani küçültmenin kazancını ham boyuta bakarak ölçmek yanıltıcı. Kullanıcıya giden boyut çoğunlukla sıkıştırılmış olan boyuttur. Bu yüzden ölçümü iki sütunla yaptık: bayt ve gzip sonrası bayt.

Dosyada renk ve boşluk değişkenleri, @layer ile iki katman, düğme, kart (iç içe kurallarla), ızgara, form alanı ve iki medya sorgusu var; başında da bir lisans yorumu duruyor. Toplam 22 kural ve 68 bildirim. Dosya zaten düzgün girintili olduğu için Biçimlendir seçeneği içeriği değiştirmedi; ilk hali ile biçimlendirilmiş hali aynı boyutta çıktı.

Boyutları tarayıcıda hesapladık: ham boyut için metnin bayt uzunluğunu, gzip için tarayıcının kendi sıkıştırma arayüzünü kullandık.

Tablodaki en dikkat çekici satır sıkıştırma: küçültme yapmadan, yalnız gzip ile dosya 2.453 bayttan 923 bayta indi, yani yaklaşık %62 küçüldü. Küçültme bunun üzerine 80 bayt daha kazandırdı. Yani ilk kazancı sıkıştırma sağlıyor, küçültme onu bir miktar iyileştiriyor.

Kazancı şu formülle hesapladık: K kazanç, B_k küçültülmüş boyut, B_i ilk boyut.

Ham boyutta K = 1 - 1821 / 2453, yani yaklaşık %26. Gzip sonrasında K = 1 - 843 / 923, yani yaklaşık %9. Küçültmenin kazancı sıkıştırmadan sonra üçte birine düştü. Bayt olarak bakarsak ham boyutta 632 bayt, gzip sonrasında 80 bayt kazandık.

Küçültülmüş çıktının başı şöyle görünüyor:

Lisans yorumu ve katman bildirimi yerinde, kurallar arasındaki boşluklar ve satır sonları gitti. Özet satırı da aynı şeyi söylüyor: 22 kural, 68 bildirim, girdi 2.448 karakter, çıktı 1.816 karakter, yüzde 26 küçüldü.

Araç küçültmede 68 bildirimin hepsinin korunduğunu, 1 lisans yorumunun kaldığını yazdı: "CSS sağlam, 68 bildirimin hepsi korundu". Değişken tanımlarındaki iki nokta sonrası boşluk (örneğin --renk-ana: #2563eb) küçültülmüş çıktıda da yerinde kaldı.

CSS'te calc() içinde artı ve eksi işaretinin iki yanında boşluk olması gerekir. Boşluksuz yazılırsa tarayıcı bildirimin tamamını geçersiz sayar ve atar; konsola bir şey yazmaz. Küçük bir dosya yazıp bilerek şu hataları koyduk:

Araç 2 hata ve 2 uyarı buldu. Birincisi 3. satır, 19. sütunda: "calc() içinde artı veya eksi işaretinin iki yanında boşluk olmalı, yoksa tarayıcı bildirimi tümden atar". Bu tür bir hatanın tarayıcıda bir belirti vermemesi, aracın işe yaradığı yer.

Küçült'ü de denedik. Çıktıda calc(100% -2rem) çıktı; yani araç bozuk yazımı düzeltmedi, yalnızca kendi ayrıştırmasına göre yazdı. Hata raporda yine listelendi. Küçültme bir hatayı gizlemiyor ama onarmıyor da.

Aynı dosyada var(--renk-ana) kullandık ama --renk-ana hiç tanımlamadık. Araç bunu uyarı olarak gösterdi: "Tanımlanmamış özel özellik, yedek değer de yok: --renk-ana". İkinci uyarı, padding özelliğinin aynı kuralda iki kez yazılmasıydı: "sonuncusu geçerli".

Son hata colr: red idi. Araç "7. satır, 3. sütun: Bilinmeyen özellik: colr" diyerek bunu hata sınıfında listeledi. Yazım hatası bir renk özelliğinin sessizce çalışmamasına yol açar, bu yüzden hata düzeyinde olması yerinde.

Sonra düzeltilmiş hali yapıştırdık:

Sonuç: "CSS sağlam, 4 bildirimin hepsi korundu" ve "Geçersiz özellik, tanımsız değişken veya bozuk calc() bulunmadı".

Bu küçük dosyada lisans yorumu (/*! ile başlayan) hem biçimlendirilmiş hem küçültülmüş çıktıda yerinde kaldı: "1 lisans yorumu bulundu, 1 tanesi korundu".

Büyük dosyada araç üç bilgi satırı da verdi: aynı seçici birden fazla kez yazılmıştı (.izgara ve .ust-serit, medya sorgularında yeniden tanımlanmıştı). Bunlar bizim dosyada kasıtlıydı; bilgi düzeyi de bu yüzden uygun, hata değil.

Ölçümümüz tek bir dosyaya ait; sonuçları kural gibi almayın. Farklı bir dosyada, örneğin çok yorumlu ya da çok girintili bir dosyada, oranlar değişir. Ama yön belli: sıkıştırmadan sonra kazanç, ham kazancın çok altında kalıyor.

Aracın sınırları: gzip ölçümünü biz tarayıcıda yaptık; sunucunuz farklı sıkıştırma kullanıyorsa (örneğin Brotli) sayılar değişir. Sayfa hiçbir şeyi sunucuya göndermiyor, siteyi hızlandırdığını da iddia etmiyor. Bu yazıda @container ve @scope gibi ileri sözdizimlerini denemedik.

Kendi stil dosyanızla CSS Biçimlendirici'yi ücretsiz deneyebilirsiniz.

Bu denemeyi 29 Eylül 2026'da Chrome'da yaptık. Stil dosyası kurgusaldır.