Sayfa hızı hem ziyaretçi deneyimini hem de arama motoru performansını etkiler. Tarayıcının indirmesi ve işlemesi gereken CSS ve JavaScript dosyaları büyüdükçe sayfanın görünür hale gelmesi gecikir. Küçültme, bu dosyaların işlevini bozmadan boyutunu azaltmaya dayanır ve doğru yapıldığında ölçülebilir bir hız kazancı sağlar.
Minify işlemi ne yapar?
Minify, koddaki boşlukları, satır sonlarını, yorumları ve gereksiz karakterleri temizler. JavaScript tarafında ayrıca değişken ve fonksiyon adları kısaltılabilir. Sonuçta dosya boyutu genellikle yüzde 20 ile 60 arasında düşer. Bu işlemi elle yapmak yerine derleme aşamasında çalışan bir araçla otomatikleştirmek en güvenli yoldur. Orijinal dosyaları geliştirme ortamında okunabilir tutun, yayına yalnızca küçültülmüş sürümü gönderin. Hata ayıklamayı kolaylaştırmak için kaynak haritası (source map) üretmeyi unutmayın.
Kullanılmayan kodu temizleyin
Asıl büyük kazanç çoğu zaman minify’dan değil, hiç kullanılmayan kodu atmaktan gelir. Tarayıcı geliştirici araçlarındaki kapsam (coverage) sekmesi, sayfa yüklenirken hangi CSS ve JavaScript satırlarının çalıştığını gösterir. Kullanılmayan oranın yüksek olduğu dosyaları bölün veya sadeleştirin. Hazır arayüz kütüphanelerinin tamamını yüklemek yerine yalnızca ihtiyaç duyulan bileşenleri dahil edin. Modül yapısı kullanan projelerde ağaç sallama (tree shaking) kullanılmayan fonksiyonları otomatik olarak dışarıda bırakır.
Sıkıştırma, birleştirme ve önbellek
Küçültülmüş dosyayı sunucu tarafında Gzip veya Brotli ile sıkıştırmak boyutu bir kez daha belirgin şekilde azaltır. Brotli metin dosyalarında genellikle daha iyi sonuç verir. Dosya birleştirmenin etkisi HTTP/2 ve HTTP/3 ile azaldı; yüzlerce küçük dosya yerine makul sayıda paket tercih etmek yeterlidir. Sayfanın ilk görünümü için gereken kritik CSS’i satır içi verip kalanını geciktirerek yükleyin. JavaScript etiketlerine defer veya async ekleyerek sayfa oluşturmanın engellenmesini önleyin. Son olarak dosya adlarına sürüm veya içerik özeti ekleyip uzun süreli önbellek başlıkları tanımlayın; böylece geri dönen ziyaretçiler dosyaları yeniden indirmez.
Değişiklik sonrası kontrol
Her optimizasyondan sonra sayfayı gerçek cihazlarda test edin. Menüler, formlar ve sayaçlar gibi script’e bağlı bölümlerin çalıştığından emin olun. Hız ölçümünü değişiklikten önce ve sonra aynı araçla alıp karşılaştırın; özellikle ilk içerik görüntüleme süresine ve toplam engelleme süresine bakın.
Küçültme tek seferlik bir iş değildir. Siteye yeni eklenti veya kod eklendikçe süreci yeniden gözden geçirmek, hızı uzun vadede korumanın en kolay yoludur.