CSS'yi küçültün

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:

Lighthouse Minify CSS denetiminin ekran görüntüsü

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.

Kaynaklar