CSS Küçültücü – Online CSS Küçültme ve Optimizasyon

CSS Küçültücü nasıl kullanılır

1CSS kodunuzu Giriş kutusuna yapıştırın veya Örnek'e tıklayın.

2Küçültülmüş CSS sağ tarafta otomatik olarak görünür.

3Birçok lisansın gerektirdiği /*! … */ yorumlarını saklamak için Lisans yorumlarını koru seçeneğini işaretli bırakın.

4Sonucu kopyalayın veya minified.css olarak indirin.

CSS boyutunu küçültün

Bir sayfa oluşturulmadan önce CSS'in her baytının indirilip ayrıştırılması gerekir; bu yüzden daha küçük stil dosyaları, daha hızlı ilk yükleme (first paint), daha iyi Core Web Vitals ve daha az mobil veri kullanımı demektir. Bu CSS sıkıştırıcı; boşlukları ve yorumları temizler, yapısal optimizasyonlar (yinelenen kuralları birleştirme, renkleri kısaltma, gereksiz değerleri kaldırma) uygulayarak sayfanın görünümünü bozmadan stil dosyanızı olabildiğince küçültür.

Özellikler

Boşluk ve yorum temizleme.
Değer kısaltma: renkler, sıfırlar, birimler ve font kalınlıkları.
Yapısal optimizasyon: yinelenen seçicileri birleştirir ve ezilen bildirimleri kaldırır.
Lisans yorumları (/*! … */) isteğe bağlı olarak korunur.
Bayt ve yüzde cinsinden boyut karşılaştırması.
Gizlilik: tamamen tarayıcınızda çalışır.

Öncesi ve sonrası

.card .title {
  font-weight: bold;
  color: #333333;
}
.card .title {
  font-size: 1.25em;
}

şuna dönüşür:

.card .title{font-weight:700;color:#333;font-size:1.25em}

Ne zaman sıkıştırılmalı

CSS'i canlı ortam (production) derleme sürecinizin bir parçası olarak sıkıştırın ve okunabilir kaynak kodunu sürüm kontrolünde tutun. Çoğu framework ve paketleyici (bundler) bunu otomatik yapar; bu araç ise hızlı düzeltmeler, CMS temaları, e-posta şablonları, gömülü widget'lar ve derleme adımı olmayan projeler için oldukça pratiktir.

İlgili araçlar

JavaScript Sıkıştırıcı ile script'lerinizi küçültün, Box Shadow Oluşturucu ve CSS Gradyan Oluşturucu ile görsel olarak stiller yaratın veya JSON Biçimlendirici ile JSON verilerinizi düzenleyin.

Sıkça sorulan sorular

CSS küçültücü ne işe yarar?

Tarayıcıların ihtiyaç duymadığı her şeyi — boşluklar, satır sonları ve yorumlar — kaldırır ve değerleri en kısa haliyle yeniden yazar, örneğin #ffffff → #fff ve 0px → 0. Bu küçültücü (CSSO) ayrıca yinelenen seçicileri ve bildirimleri birleştirir ve üzerine yazılan özellikleri kaldırır.

Küçültülmüş CSS kullanmak güvenli mi?

Evet. Yapısal optimizasyonlar aynı görsel sonucu koruyacak şekilde tasarlanmıştır. Her derleme adımında olduğu gibi, özellikle sıra dışı hilelere veya geçersiz CSS'e dayanıyorsanız, yayına aldıktan sonra sayfalarınızı test edin.

CSS dosyam ne kadar küçülecek?

Sıkıştırmadan önce genellikle %15–40 oranında. Elle yazılmış, bol yorumlu stil dosyaları en çok küçülenlerdir. Sunucunuzun gzip veya Brotli sıkıştırması aktarım boyutunu daha da azaltır.

Lisans yorumları neden korunmalı?

Birçok açık kaynak lisansı, telif hakkı bildiriminin kodla birlikte kalmasını şart koşar. /*! ile başlayan yorumlar, küçültücülerin koruması gereken yorumlar için bir standarttır.

Kodum sunucuya yükleniyor mu?

Hayır. Küçültme işlemi tarayıcınızda gerçekleşir; kodunuz cihazınızdan asla ayrılmaz.