Kısa cevap
Küçültme, boşluk ve yorum temizliğidir. Her özelliği ayrı satırda, yorumlu ve dört boşluk girintili yazılmış bir stil dosyası tek ve sık bir satıra dönüşür; tarayıcı onu aynen aynı şekilde okur. Ekranda görünen hiçbir şey değişmez, sadece ağdan gelen bayt sayısı azalır.
Aşağıdaki araç HTML, CSS ve JavaScript ile çalışır. Dili seç, İşlem'i Küçült yap, kodu yapıştır ya da Dosya aç ile aç; sonuç sağda, önceki ve sonraki boyutla ve ne kadar küçüldüğüyle birlikte görünür. Kopyala ile al ya da İndir ile dosya olarak kaydet. Kodun tarayıcında işlenir, hiçbir yere yüklenmez.
Burada dene: CSS küçültücü
Aracın tam sayfasını açKüçültme neyi siler, neye dokunmamalı
Bir küçültücü ancak dili, hangi karakterin anlam taşıdığını bilecek kadar iyi tanıyorsa güvenlidir. Yanlış boşluğu silmek kodu sessizce bozar, bu yüzden kurallar her dilde farklıdır.
Bazı araçlar boşluğun ötesine geçer. Terser ya da esbuild gibi JavaScript araçları yerel değişkenleri tek harfe indirir ve hiç çalışmayan kodu atar; cssnano ya da Lightning CSS gibi CSS araçları renkleri kısaltır (#ffffff yerine #fff) ve kuralları birleştirir. Bu daha çok kazandırır ama artık sadece temizlik değil, kodunu dönüştürmektir ve test edilen bir build sürecine aittir. Bu sayfadaki küçültücü bilerek yorum ve boşlukta durur; bu yüzden test altyapısı olmayan herhangi bir kod parçasında gönül rahatlığıyla kullanabilirsin.
- CSS: yorumlar ve satır sonları gider, ama .menu a gibi alt seçicideki boşluk kalmalı; calc(1px + 2px) içindeki artı ve eksinin etrafındaki boşluklar da şart. /*! ile başlayan lisans yorumları genelde korunur.
- JavaScript: yorumlar ve girintiler gider, ama metinlere, template literal'lara ve düzenli ifadelere dokunulmamalı. Noktalı virgülsüz kodda satır sonu komutu bitirebilir, bu yüzden bazı satır sonları kalmak zorunda.
- HTML: blok öğeler arasındaki boşluklar gider, art arda boşluklar teke iner; ama bir cümle içindeki iki link arasındaki tek boşluk sayfada görünür, silinmemeli. pre ve textarea içeriği aynen kalır.
Küçültme ne kadar kazandırır?
Kazanç, dosyanın nasıl yazıldığına bağlı. Bol yorumlu, geniş girintili dosyalar en çok küçülür. Elle yazılmış kodda, sunucu sıkıştırmasından önceki tipik oranlar şöyle:
| Dosya türü | Küçültmeyle tipik kazanç | Farkı yaratan |
|---|---|---|
| CSS | Yüzde 15 ile 30 | Yorumlar, girinti, her özelliğin ayrı satırda olması |
| JavaScript (sadece boşluk) | Yüzde 20 ile 40 | Yorumlar ve girinti; uzun adlar kalır |
| JavaScript (ad kısaltmalı) | Yüzde 40 ile 70 | Build aracının yerel değişkenleri kısaltması |
| HTML | Yüzde 10 ile 25 | Öğeler arasındaki girinti ve yorumlar |
Minify mı gzip mi? İkisi birden
Sunucular ve CDN'ler metin dosyalarını göndermeden önce genelde gzip ya da Brotli ile sıkıştırır; bu tek başına CSS ve JavaScript'i yaklaşık yüzde 60 ile 80 küçültür. Sıkıştırma tekrar eden boşlukları çok iyi ezdiği için, sıkıştırmadan sonra küçültmenin ek kazancı daha az görünür; çoğu zaman sıkıştırılmış boyutun yüzde 5 ile 20'si kadardır.
Yine de değer. Küçültülmüş dosya biraz daha hızlı ayrıştırılır, iç notlar içeren yorumlar dışarı çıkmaz ve kazanç her sayfa açılışında birikir. Lighthouse ve PageSpeed Insights küçültülmemiş CSS ve JavaScript'i uzun süredir tam da bu yüzden uyarı olarak gösterir. Sıkıştırmanın gerçekten açık olduğunu da kontrol et: tarayıcının geliştirici araçlarında Ağ (Network) panelini aç, bir CSS dosyasına tıkla ve yanıt başlıklarında gzip ya da br değerli content-encoding satırını ara.
Tek dosyadan bütün siteye küçültme yolları
Hangi yöntemin uygun olduğu kodun ne sıklıkla değiştiğine bağlı.
- Tek dosya ya da kod parçası: yukarıdaki araca yapıştır. Bir CMS'teki satır içi script, e-posta şablonu için stil dosyası, müşteriye verdiğin bir widget ya da bir dosyanın ne kazanacağını görmek için ideal.
- Build adımı olan site: işi paketleyiciye bırak. Vite, webpack, Parcel ve esbuild üretim (production) derlemesinde varsayılan olarak küçültür; genelde production build komutunu çalıştırmak dışında ek ayar gerekmez.
- Build adımı olmayan site: birçok CMS ve önbellek eklentisinde küçültme seçeneği var, bazı CDN'ler de otomatik küçültme sunar. Açtıktan sonra sayfaları test et; agresif HTML ya da JavaScript küçültmesi, böyle bir ayardan sonra bozulan tasarımın ya da çalışmayan scriptin en sık sebebidir.
- Sunucu taraflı framework'ler: ASP.NET, Django ve Rails'in yayın sırasında küçülten asset pipeline'ları ya da paketleri vardır.
Küçültülen kod bozulursa ne yapmalı
Bozulmaların çoğu, asıl kodun küçültücünün değiştirdiği bir şeye dayanmasından ya da küçültücünün fazla agresif olmasından gelir. Olağan şüpheliler:
- Eksik noktalı virgül ve agresif bir JavaScript küçültücü: ( ya da [ ile başlayan satır bir önceki satıra yapışır. Satır sonlarını koru (bu araç korur) ya da noktalı virgülleri ekle.
- Küçültmeden sonra iki dosyayı uç uca eklemek: ilk dosya noktalı virgülle bitmiyorsa ikincisi fonksiyon çağrısı gibi okunabilir. Her dosyayı düzgün bitir ya da birleştirmeyi paketleyiciye bırak.
- CSS hack'leri ve alışılmadık yazımlar: eski tarayıcılar için tam boşluk düzenine dayanan hack'ler çalışmayabilir. Artık gerekmeyen hack'leri kaldır.
- Kendi metnini ya da fonksiyon adlarını okuyan kod: ad kısaltan küçültücüler bunu bozar, sadece boşluk silenler bozmaz.
- Kaynakta sözdizimi hatası: küçültücü bunu düzeltemez. Bu sayfadaki araç kapanmamış metin, yorum ve etiketleri satır ve sütunuyla gösterir; önce asıl dosyayı düzelt.
İyi alışkanlıklar
Küçültülmüş dosyayı asla doğrudan düzenleme. Okunur kaynağı sürüm kontrolünde tut, küçültülmüş kopyayı her an yeniden üretilebilecek bir çıktı olarak gör. Başkasının küçültülmüş dosyasını okuman gerekirse aynı araçta İşlem'i Düzenle yap, girintiler geri gelir.
Build aracı kullanıyorsan üretim için source map de üret. Hata ayıklarken geliştirici araçları asıl satırları gösterir, kullanıcılar ise yine küçük dosyayı indirir.