Lighthouse raporunuzun Fırsatlar bölümünde, sıkıştırılmamış tüm CSS dosyalarının yanı sıra bu dosyalar sıkıştırıldığında elde edilebilecek kibibayt (KiB) cinsinden olası tasarruflar listelenir:
CSS dosyalarını küçültmek performansı nasıl artırabilir?
CSS dosyalarını küçültmek sayfa yükleme performansınızı artırabilir. CSS dosyaları genellikle olması gerekenden daha büyüktür. Örneğin:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
Şu değerlere 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 kullanır. Minify araçları, boşlukları kaldırarak bayt verimliliğini daha da artırabilir:
h1,
h2 {
background-color: #000000;
}
Bazı sıkıştırıcılar, bayt sayısını en aza indirmek için akıllıca hileler kullanır.
Örneğin, #000000 renk değeri, kısaltma eşdeğeri olan #000 değerine daha da düşürülebilir.
Lighthouse, CSS'nizde bulduğu yorumlara ve boşluk karakterlerine göre potansiyel tasarruf tahmini sunar.
Bu, ihtiyatlı bir tahmindir.
Daha önce de belirtildiği gibi, dosya boyutunuzu daha da küçültmek için dosya sıkıştırıcılar akıllı optimizasyonlar (ör. #000000'ü #000'e indirme) gerçekleştirebilir.
Bu nedenle, bir sıkıştırıcı kullanıyorsanız Lighthouse'un bildirdiğinden daha fazla tasarruf elde edebilirsiniz.
CSS kodunuzu küçültmek için bir CSS küçültücü kullanın
Sık güncellemediğiniz küçük sitelerde, dosyalarınızı manuel olarak küçültmek için muhtemelen ç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, güncellenen kodlarını dağıtmadan önce CSS'lerini otomatik olarak küçülten otomatik bir iş akışı oluşturmak isteyecektir. 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.
Pakete özel yönergeler
Drupal
"Administration (Yönetim) » Configuration (Yapılandırma) » Development (Geliştirme)" sayfasında "Aggregate CSS files (CSS dosyalarını topla)" ayarını etkinleştirdiğinizden emin olun.
Joomla
Çeşitli Joomla uzantıları CSS stillerinizi birleştirerek, küçülterek ve sıkıştırarak sitenizi hızlandırabilir. Bu işlevi sağlayan şablonlar da vardır.
Magento
Mağazanızın Geliştirici ayarlarında CSS Dosyalarını Küçült seçeneğini etkinleştirin.
React
Derleme sisteminiz CSS dosyalarını otomatik olarak küçültüyorsa uygulamanızın üretim derlemesini dağıttığınızdan emin olun. Bunu React Geliştirici Araçları uzantısıyla kontrol edebilirsiniz.
WordPress
Çeşitli WordPress eklentileri stillerinizi sıralayarak, küçülterek ve sıkıştırarak sitenizi hızlandırabilir. Ayrıca, mümkünse bu sadeleştirmeyi en başta yapmak için bir derleme işlemi kullanmak isteyebilirsiniz.