Minification Nedir?

Sayılarla ne demek?

Kod küçültme, tarayıcıya gönderilen CSS, JavaScript ve HTML dosyalarından insanların okuması için eklenmiş ama makinenin ihtiyaç duymadığı her şeyin çıkarılmasıdır. Girintiler, satır sonları, açıklama satırları ve uzun değişken adları dosyayı büyütür. Küçültme bunları siler ya da kısaltır; kodun davranışı ise aynı kalır.

Kazanç dosyanın yapısına bağlıdır. Bol yorumlu ve düzenli yazılmış 180 KB'lık bir CSS dosyası küçültmeyle 120 KB civarına inebilir; sunucu bu dosyayı Brotli ile sıkıştırarak gönderdiğinde ağ üzerinden geçen boyut 25 KB'ın altına düşebilir. Küçültme ve sıkıştırma farklı işlerdir ve birlikte kullanıldığında en iyi sonucu verir.

Küçültmenin sınırını da bilmek gerekir. Kullanılmayan bir kütüphane küçültülse de hala indirilir ve çalıştırılır. Örneğin sayfada yalnızca bir tarih seçici için yüklenen 90 KB'lık bir kütüphane, küçültüldüğünde 60 KB olur ama asıl kazanç onu hiç yüklememekten gelir. Bu yüzden küçültme, kullanılmayan kodun kaldırılmasıyla birlikte düşünülmelidir.

Dosya boyutunu düşürme yöntemleri

Küçültme en kolay adımdır; ama genellikle en büyük kazanç değildir.

Kod küçültmeyi uygularken

1. Derleme sürecine ekle. Elle değil, otomatik.
2. Kaynak kodu ayrı tut. Geliştirme sürümü okunabilir kalsın.
3. Sunucu sıkıştırmasını kontrol et. Brotli ya da gzip açık mı?
4. Kullanılmayan kodu bul. Tarayıcı kapsama (coverage) aracı.
5. Yayından sonra test et. Küçültme bir hataya yol açtı mı?

Uygulamada ne oluyor?

En sık durum, küçültmenin yapılıp sıkıştırmanın unutulması. Dosyalar küçültülmüş ama sunucu sıkıştırmadan gönderiyor; asıl kazanç kaçıyor.

İkinci gözlem, eklentilerin birbirinin işini bozması. Önbellek eklentisi, tema ve CDN aynı dosyayı ayrı ayrı küçültmeye çalışıyor; bir noktada JavaScript çalışmıyor.

Üçüncüsü, küçültülmüş dosyanın doğrudan düzenlenmesi. Acil bir düzeltme tek satırlık küçük dosyaya yapılıyor; bir sonraki derlemede değişiklik kayboluyor.

Dördüncüsü, küçültmenin her sorunu çözeceği beklentisi. 1,5 MB'lık JavaScript küçültülüp 1 MB'a iniyor; sayfa hala ağır ve INP kötü.

Beşincisi, HTML küçültmenin gereksiz risk yaratması. Bazı küçültücüler satır içi betiklerdeki boşlukları yanlış siliyor; kazanç küçük, risk büyük.

Altıncısı, dosyaların tek pakette birleştirilmesi. Bütün sayfaların kodu tek bir büyük dosyada; blog yazısını açan kullanıcı ödeme sayfasının kodunu da indiriyor.

Yedincisi, kaynak haritalarının herkese açık bırakılması. Hata ayıklama için oluşturulan dosyalar canlı sitede duruyor; kaynak kod ve iç yapı görülebiliyor.

Sekizincisi, üçüncü taraf betiklerin küçültülemeyeceğinin unutulması. Sitenin kendi kodu optimize edilmiş ama yükün büyük kısmı dışarıdan gelen etiketlerde; kontrol sınırlı kalıyor.

Dokuzuncusu, kullanılmayan CSS'in otomatik temizlikte yanlış silinmesi. JavaScript ile sonradan eklenen sınıflar tanınmıyor; açılır menü ve modal pencereler stilsiz kalıyor.

Onuncusu, Lighthouse önerisinin tek hedef yapılması. "JavaScript'i küçült" uyarısı gidince iş bitmiş sayılıyor; asıl sorun olan uzun görevler kalıyor.

On birincisi, sürüm adı eklenmeden küçültme yapılması. Dosya içeriği değişiyor ama adı aynı; önbellekteki eski sürüm yeni HTML ile çakışıyor ve sayfa bozuluyor.

On ikincisi, kazancın ölçülmemesi. Küçültme öncesi ve sonrası aktarılan bayt karşılaştırılmıyor; adımın ne kadar işe yaradığı bilinmiyor.

Neyi çözmez?

Küçültme, gereksiz kodu gerekli hale getirmez. Kullanılmayan kütüphaneler ve ağır üçüncü taraf betikler küçültülse de yük olmaya devam eder.

Sıkça sorulan sorular

Küçültme ile sıkıştırma aynı şey mi?

Hayır; küçültme kodu kalıcı olarak kısaltır, sıkıştırma ise dosyayı yalnızca ağ aktarımı sırasında küçültür.

Küçültme SEO'yu etkiler mi?

Doğrudan değil; sayfa ağırlığını azaltarak hıza ve kullanıcı deneyimine katkı sağlar.

HTML de küçültülmeli mi?

Kazanç genellikle küçüktür; sıkıştırma açıksa önceliği CSS ve JavaScript'e vermek daha verimlidir.

Bu kavramın bütün resim içindeki yerini SEO Danışmanlığı Rehberi içinde ayrıntılı anlattım.