CSS, JS ve gorselleri optimize etme
Tum statik dosyalari optimize ettik. CSS ve JavaScript dosyalari minify edildi, gereksiz bosluklar silindi.
Gorseller WebP formatina donusturuldu. JPG'ye gore %30 daha kucuk, ayni kalite. Ayrica responsive gorseller eklendi - mobilde kucuk, masaustunde buyuk gorsel yukleniyor.
Sonuc: Toplam sayfa boyutu 2.8 MB'den 890 KB'ye dustu. %68 kuculme!
Ayarlar > Build > CSS/JS Rebuild
Ayarlar > Medya > Optimize
Dashboard > Performans > Assets
Ayarlar > Performans > Gzip
Build süreci sırasında Vite/Webpack asset'leri işler. CSS ve JS dosyaları minify edilir, görseller optimize edilir ve versiyonlanır.
PostCSS Tailwind'i işler, cssnano minify eder. Kullanılmayan sınıflar PurgeCSS ile silinir.
Terser JavaScript'i minify eder. Değişken isimleri kısaltılır, dead code elimine edilir.
sharp kütüphanesi JPG/PNG'leri WebP'ye çevirir. Kalite %80, boyut %30 küçülür.
Vite dosya içeriğinden hash oluşturur: app.abc123.js. Değişince hash değişir, tarayıcı yeni dosyayı indirir.
Nginx gzip_static on ile önceden sıkıştırılmış .gz dosyalarını sunar. CPU tasarrufu sağlar.
srcset attribute'u ile farklı boyutlar tanımlanır. Tarayıcı viewport'a göre uygun görseli seçer.
Kod küçültme. Boşluk, yorum satırlarını silme.
Google'ın görsel formatı. JPG'den %30 küçük.
Dosya sıkıştırma. Transfer sırasında küçültme.
Gzip'ten iyi sıkıştırma. Modern tarayıcılar destekler.