CSS Küçültücü

CSS küçültmenin eksiksiz rehberi

CSS'in her kilobaytı sayfanızın ilk boyamasını geciktirir — ve küçültülmemiş stil sayfaları yalnızca insanlar için olan yorumlar, girintiler ve boşluklarla gönderilir. Küçültme tüm bunları saniyenin bölümlerinde, ücretsiz ve görsel değişiklik olmadan siler. Bu rehber perde arkasında ne olduğunu, küçültmenin performans stratejisine nasıl uyduğunu ve hangi hatalardan kaçınılacağını anlatır.

Küçültme neyi değiştirir (ve neyi değiştirmez)

Küçültme güvenli, mekanik bir dönüşümdür: yorumları kaldırır, boşlukları birleştirir, her kural bloğundaki son noktalı virgülü siler, sıfır değerlerinden birimleri atar, renkleri kısaltır ve bitişik aynı seçicileri birleştirebilir. Kuralları, basamağı değiştirecek şekilde asla yeniden sıralamaz, sınıflarınızın adını asla değiştirmez ve gösterilen tek bir pikseli bile değiştirmez. Küçültülmüş CSS tarayıcıda farklı görünüyorsa küçültücüde bir hata vardır — veya orijinal CSS, biçimlendirmenin gizlediği eksik bir noktalı virgül gibi kırılgan bir şeye dayanıyordu.

Web performansında küçültme nereye uyar

CSS oluşturmayı engeller: tarayıcılar, stil sayfalarını indirip ayrıştırmadan içeriği boyamaz. Yavaş bir mobil bağlantıda, 200 kilobaytlık küçültülmemiş bir stil sayfası tam bir saniye alabilir. Küçültme genellikle %20–40 tasarruf sağlar ve Brotli sıkıştırmayla toplam azalma %70–85'e ulaşır. Bu, web geliştirmedeki en kazançlı iyileştirmelerden biridir çünkü tamamen otomatiktir — derlemenizde bir kez ayarlayın ve unutun. Bununla birlikte gelen diğer CSS performans kazançları: kullanılmayan CSS'yi kaldırmak, ekran üstü kritik CSS'yi satır içi yapmak ve önemsiz stil sayfalarını ertelemek.

Küçültme, güzelleştirme ve kaynak haritaları karşılaştırması

İş akışınızda üç ürün olmalıdır: Kaynak (okunabilir, yorumlarla ve sürüm denetiminde) veKüçültülmüş derleme (kullanıcıların indirdiği) ve isteğe bağlı olarak Kaynak haritası (.css.map) tarayıcı geliştirici araçlarının küçültülmüş dosyada hata ayıklarken orijinal kaynağı göstermesini sağlar. Bu araç küçültülmüş çıktı üretir; devam eden projeler için her dağıtımda elle küçültmek yerine küçültmeyi derlemenize entegre edin (Vite, webpack ve PostCSS bunu bir eklentiyle yapar).

Yaygın hatalar

Onaltılık ve filtreler: Eski IE hileleri basit küçültücüleri şaşırtabilir — hedef tarayıcılarda test edin. Önemli yorumlar: Lisans başlıkları (ör. /*! ... */) geleneksel olarak korunur; yasal olarak gerekliyse küçültücünüzün onları koruduğunu kontrol edin. Karakter kümesi: CSS'de ASCII dışı karakterler varsa (içerik dizeleri ve yazı tipi adları), @charset "UTF-8" bildiriminin tam olarak ilk baytlar olarak kaldığından emin olun. İki kez küçültmeyin — zararsızdır ama yararsızdır ve çift işlem bazen uç durumları bozar.

Gizlilik notu

Stil sayfalarınızda açıklayıcı sınıf adları veya duyurulmamış özellikler hakkında yorumlar olabilir. Burada küçültme %100 tarayıcınızda çalışır — kodunuz asla bir sunucuya dokunmaz.