Türkçe
العربية
Deutsch
English
Español
Français
Italiano
Português
Русский
Tiếng Việt
CSS Minifier
Gereksiz boşlukları ve yorumları temizleyerek stil dosyalarını küçült.
CSS kodları sayfa çizimini doğrudan engeller. Tarayıcı tüm stil dosyalarını indirip ayrıştırmadan ekrana hiçbir içerik yansıtmaz; bu yüzden stil dosyalarındaki her kilobayt diğer içeriklere kıyasla performansı çok daha kritik biçimde etkiler.
CSS minifier ile stil dosyalarını küçültme adımları
- CSS kodunu yukarıdaki metin alanına yapıştır.
- Sıkıştırma butonuna tıkla.
- Üretilen sıkıştırılmış CSS çıktısını kopyala.
- Çıktıyı ayrı bir dosya olarak kaydet ve okunabilir kaynak kodunu mutlaka sakla.
- Küçültülen sürümü canlı ortamda çalıştırıp görsel sonuçları dikkatle incele.
CSS minifier işlemi neleri temizler?
Ayrıştırıcının ihtiyaç duymadığı tüm boşlukları, sekmeleri ve satır sonlarını kaldırır. Tüm açıklama satırlarını siler. Kural bloklarının sonundaki noktalı virgülleri eler. Birimsiz sıfırları sadeleştirerek 0px değerini 0 yapar. Uzun onaltılık renk kodlarını kısaltarak #ffffff yerine #fff yazar.
Bu temizliklerin hiçbiri stil kurallarının işlevini değiştirmez. Elle yazılmış 90 KB boyutundaki bir dosya çoğunlukla 65 KB civarına iner ve taranacak karakter miktarı azaldığı için tarayıcı tarafından biraz daha seri işlenir.
CSS minifier dışında stil optimizasyonu için gerekenler
- Kullanılmayan kurallar: Çoğu site koca bir çerçeve kütüphanesini sayfaya ekleyip çok ufak bir kısmını kullanır; asıl ağırlık burada gizlidir.
- Birden fazla harici stil dosyası: Her biri render işlemini geciktiren ayrı bir sunucu isteği oluşturur.
- Kritik CSS yaklaşımı: Ekranın üst kısmında hemen görünen kuralları doğrudan sayfaya göm, kalan bölümü ertele.
- @import tanımları: İndirme işlemlerini paralel yürütmek yerine sıraya dizerek gecikme yaratır.
- Gereksiz web yazı tipi kalınlıkları: Denetlenmeden sayfaya çağrılan font varyasyonları fazladan yük bindirir.
CSS minifier kullanımını derleme sürecine entegre et
Sıkıştırılmış CSS üzerinde doğrudan değişiklik yapmak zahmetli ve hatalara açıktır. Okunabilir kodlarını her zaman sürüm kontrol sisteminde sakla, CSS minifier aracını derleme veya dağıtım aşamalarının bir parçası yap ve olası bir sorunda tarayıcı geliştirici araçlarında kaynak satırları görebilmek için source map dosyalarını üretmeyi unutma.
CSS minifier hakkında sık sorulan sorular
CSS kodlarım ne oranda küçülür?
Gzip öncesinde genellikle %20–30 arası bir küçülme elde edilir. Gzip zaten tekrarlanan boşlukları iyi sıkıştırdığı için sonrasındaki marjinal fark azalsa da derleme hattında bu temizliği yapmak her zaman kazandırır.
CSS minifier kodun çalışmasını bozar mı?
Standartlara uygun yazılmış kurallar sorunsuz sıkışır. Yaşanan problemler genelde tarayıcının görmezden geldiği fakat küçültme aracının tolere etmediği mevcut sözdizimi hatalarından kaynaklanır. İşlem sonrası sayfayı test et.
Tüm stil dosyalarını tek bir dosyada birleştirmeli miyim?
HTTP/2 ve HTTP/3 protokolleri sayesinde ek isteklerin getirdiği maliyet geçmişe göre düşüktür. Dolayısıyla her şeyi agresif biçimde tek dosyada toplamak yerine, sayfaları bölerek her görünümün sadece ihtiyaç duyduğu stilleri çekmesini sağlamak daha geçerli bir yoldur.
Kritik CSS ne anlama gelir?
Kullanıcının sayfayı kaydırmadan ilk gördüğü alanı çizmek için gereken en temel kurallar bütünüdür. Bu çekirdek bölümü doğrudan belge başlığına yerleştirip geri kalanı asenkron yüklemek, sayfa çizim gecikmesini ortadan kaldırarak hızı fark edilir derecede artırır.
Yüklediğim CSS kodları sunucuda saklanır mı?
Stil dosyan küçültme işleminin tamamlanması için sunucuya iletilir, ancak hiçbir şekilde sunucuda saklanmaz ve kaydedilmez.
