Lighthouse raporunuzun Fırsatlar bölümünde küçültülmüş tüm CSS dosyaları, ve kibibayt (KiB) cinsinden potansiyel tasarruflar Bu dosyalar küçültüldüğünde:
CSS dosyalarını küçültmek performansı nasıl artırabilir?
CSS dosyalarının küçültülmesi, sayfa yükleme performansınızı iyileştirebilir. CSS dosyaları genellikle olması gerekenden daha büyük olur. Örneğin:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
Şu değere düşürülebilir:
h1,
h2 {
background-color: #000000;
}
Tarayıcı açısından, bu 2 kod örneği işlevsel olarak eşdeğerdir. ancak ikinci örnek daha az bayt kullanmaktadır. Küçültücüler, boşlukları kaldırarak bayt verimliliğini daha da artırabilir:
h1,
h2 {
background-color: #000000;
}
Bazı küçültücüler, baytları en aza indirmek için zekice tekniklerden yararlanır.
Örneğin, #000000 renk değeri #000 değerine daha da düşürülebilir,
ve bu da onun kısaltılmış eşdeğeridir.
Lighthouse, konuya dayalı olarak tahmini bir potansiyel tasarruf sağlar.
ve boşluk karakterlerini koda eklemeniz gerekir.
Bu, konservatif bir tahmindir.
Daha önce belirtildiği gibi,
Küçültücüler akıllıca optimizasyonlar yapabilir (ör. #000000 değerini #000 değerine düşürmek)
dosya boyutunu daha da küçültmek için kullanabilirsiniz.
Bu nedenle, sadeleştirici kullanıyorsanız
Lighthouse'un bildirdiğinden daha fazla tasarruf görebilirsiniz.
CSS kodunuzu küçültmek için CSS küçültücü kullanma
Sık güncellemediğiniz küçük sitelerde dosyalarınızı manuel olarak küçültmek için çevrimiçi bir hizmet kullanabilirsiniz. CSS'nizi hizmetin kullanıcı arayüzüne yapıştırdığınızda kodun küçültülmüş bir sürümünü döndürürsünüz.
Profesyonel geliştiriciler, CSS'nizi otomatik olarak küçülten otomatik bir iş akışı oluşturmak isteyebilirsiniz inceleyin. Bu işlem genellikle Gulp veya Webpack gibi bir derleme aracıyla gerçekleştirilir.
CSS'yi küçültme bölümünde CSS kodunuzu nasıl küçülteceğinizi öğrenin.
Gruba özel yönergeler
Drupal
Yönetim > CSS dosyalarını topla seçeneğini etkinleştirin. Yapılandırma > Geliştirme. Daha gelişmiş toplama seçenekleri de yapılandırabilirsiniz. ek modüller aracılığıyla kullanarak, CSS'nizi birleştirerek, küçülterek ve sıkıştırarak sitenizi hızlandırmak stillerini ayarlayın.
Joomla
Çeşitli Joomla uzantıları css'nizi birleştirerek, küçülterek ve sıkıştırarak sitenizi hızlandırabilir stillerini ayarlayın. Bu işlevi sağlayan şablonlar da vardır.
Magento
CSS Dosyalarını Küçült seçeneğini etkinleştirin. Mağazanızın Geliştirici Ayarları'nı tıklayın.
React
Derleme sisteminiz CSS dosyalarını otomatik olarak küçültüyorsa üretim derlemesini dağıtma en iyi yoludur. Bunu React Geliştirici Araçları ile kontrol edebilirsiniz uzantısına sahip olur.
WordPress
Çeşitli WordPress eklentileri, bir araya getirerek, küçülterek ve sıkıştırarak sitenize ekleyin. Şunları da isteyebilirsiniz: en baştan yapmak için bir derleme işlemi kullanın.