Lighthouse raporunuzun Fırsatlar bölümü, tüm küçültilmemiş CSS dosyalarını ve bu dosyalar küçültüldüğünde kibibayt (KiB) cinsinden muhtemel tasarrufları listeler:
CSS dosyalarının küçültülmesi 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ğ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 örnekte daha az bayt kullanılmıştı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 akıllı püf noktalarından yararlanır.
Örneğin, #000000 renk değeri, kısaltma karşılığı olan #000 değerine düşürülebilir.
Lighthouse, CSS'nizde bulduğu yorumlara ve boşluk karakterlerine göre potansiyel tasarruflara ilişkin bir tahmin sunar.
Bu, ihtiyatlı bir tahmindir.
Daha önce de belirtildiği gibi, küçültücüler dosyanızın boyutunu daha da küçültmek için akıllı optimizasyonlar (#000000 boyutunu #000 boyutuna küçültmek gibi) gerçekleştirebilir.
Bu nedenle, bir küçültücü kullanırsanız Lighthouse
raporuna göre daha fazla tasarruf elde edebilirsiniz.
CSS kodunuzu küçültmek için bir CSS küçültücü kullanma
Sık güncellemediğiniz küçük sitelerde, dosyalarınızı manuel olarak küçültmek için muhtemelen online bir hizmet kullanabilirsiniz. CSS'nizi hizmetin kullanıcı arayüzüne yapıştırdığınızda kodun küçültülmüş sürümünü döndürür.
Profesyonel geliştiriciler ise güncellenmiş kodlarını dağıtmadan önce CSS'lerini otomatik olarak küçülten otomatik bir iş akışı oluşturmak isterler. Bu 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.
Yığına özel rehberlik
Drupal
Yönetim > Yapılandırma > Geliştirme bölümünde CSS dosyalarını topla seçeneğini etkinleştirin. CSS stillerinizi birleştirerek, küçülterek ve sıkıştırarak sitenizi hızlandırmak için ek modüller aracılığıyla daha gelişmiş toplama seçeneklerini de yapılandırabilirsiniz.
Joomla
Bazı 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.
Tepki ver
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ı ile 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 baştan yapmak için bir derleme işlemi kullanmak isteyebilirsiniz.