CSS, JavaScript ve HTML küçültme neden önemli?
Web sayfalarının yüklenme hızı hem kullanıcı deneyimini hem de Google sıralamalarını doğrudan etkiler. Geliştirme sırasında okunabilirlik için eklenen yorumlar, girintiler ve satır sonları tarayıcı için gereksizdir ama her ziyaretçiye tekrar tekrar indirilir. Kod küçültücü (minifier), bu fazlalıkları temizleyerek CSS, JavaScript ve HTML dosyalarınızın boyutunu genellikle %20 ile %60 arasında azaltır. Küçük dosyalar daha hızlı indirilir, daha hızlı ayrıştırılır ve Core Web Vitals puanlarınızı iyileştirir.
CSS minify
CSS küçültücü yorumları ve gereksiz boşlukları siler, seçicilerin ve özelliklerin etrafındaki boşlukları kaldırır, her kural bloğundaki son noktalı virgülü atar. Ayrıca 0px, 0em gibi birimli sıfırları 0'a, #ffffff gibi tekrarlayan altı haneli renk kodlarını #fff'e, 0.5 gibi değerleri .5'e kısaltır. Tırnak içindeki içerikler (content, url, font adları) olduğu gibi korunur. /*! ile başlayan lisans ve telif yorumları da silinmez.
JavaScript minify
JavaScript küçültme, CSS'e göre daha hassas bir iştir; basit bir boşluk silme işlemi kodu bozabilir. Bu nedenle araç, modern build araçlarının da kullandığı Terser motorunu kullanır. Terser kodu ayrıştırır, kullanılmayan kodu temizler, ifadeleri sadeleştirir ve yerel değişken adlarını tek harfe indirir. Söz dizimi hatası olan kodda nerede hata olduğu mesaj olarak gösterilir. ES2015 ve sonrası modern JavaScript söz dizimi desteklenir.
HTML minify ve kullanım ipuçları
HTML küçültücü yorumları (koşullu IE yorumları hariç), etiketler arasındaki boşlukları ve tekrarlanan boşlukları kaldırır. Küçültülmüş çıktıyı kopyalayabilir veya .min uzantılı dosya olarak indirebilirsiniz. Her zaman orijinal, okunabilir kaynak dosyanızı saklayın ve canlı sitede yalnızca küçültülmüş sürümü kullanın. Sunucunuzda gzip veya Brotli sıkıştırması da açıksa küçültme ile birlikte en iyi sonucu alırsınız. Kodunuz tarayıcıda işlenir ve hiçbir yere gönderilmez.
Adım adım kullanım
Kod türünü CSS, JavaScript veya HTML olarak seçin ve kaynak kodunuzu kutuya yapıştırın. "Küçült" butonuna bastığınızda küçültülmüş kod alttaki kutuda belirir; üstte orijinal ve yeni boyut ile yüzde kaç tasarruf sağlandığı gösterilir. Sonucu kopyalayabilir veya kod.min.css, kod.min.js gibi bir dosya olarak indirebilirsiniz. Küçültülmüş dosyayı sitenize yükledikten sonra sayfanızı mutlaka test edin. WordPress temaları, açılış sayfaları ve küçük projeler için build aracı kurmadan hızlı bir optimizasyon sağlar.