Site Hızı 5.Bölüm – Minify CSS
Firefox PageSpeed eklentisini ile site içindeki CSS’leri düzenleyerek site hızımızı arttırabiliriz. Bu bölümde; Page Speed site analizinde karşımıza çıkan “Minify CSS” hatasının ne anlama geldiğini ve nasıl giderileceğini inceleyeceğiz. CSS dosyalarımızı minimize ettiğimizde, CSS’ler browser tarafından daha hızlı okunacak ve dolayısı ile sayfa yükleme hızı ve site performansı artacaktır.
XAMPP localhost üzerinde kurduğum wordpress temamı “Twenty Ten” olarak ayarladım. Page Speed eklentisi ile locadeki sitemi analiz ettiğimde aşağıdaki resimde görüldüğü gibi Minify CSS uyarısı aldım. Minify CSS, dosya içindeki gereksiz kodların ayıklanarak dosya boyutunun küçültümesi anlamına gelmektedir. CSS dosyasını hazırlarken, kendimiz ya da dosyayı kullanan insanlar için açıklama notları yazarız. İşte browser tarafından kullanılmayan bu açıklama notları CSS dosyasını şişirmekte ve download süresini uzatmaktadır.
Çok basit bir örnek vermek gerekirse; CSS dosyası içinde hiç bir şey yazmadan sadece bir kere “Enter” tuşuna basmak dosya boyutunu 2Byte arttırmaktadır. Aralarda verilen boşluklar, kullanıcılar için yapılan açıklamalar, enter tuşu vb. uygulamaları alt alta topladığınızda lüzumsuz bir data transferi oluşturulduğunu görebilirsiniz.
Site Hızı ve Minify CSS
Yukarıdaki hatayı aldıktan sonra eklentinin size 2 seçenek sunduğunu göreceksiniz;
- “See optimized version” ile CSS dosyasının optimize edilmiş halini görebilirsiniz
- “Save As“ seçeneği ile dosyayı kaydedip, tema dosyanıza yükleyebilirsiniz.
Herhangi bir işlem yapmadan önce orjinal style.css dosyasının yedeğini almayı unutmayın. Aşağıda CSS dosyasının minimize edilmeden önceki ve sonraki dosya boyutlarını ve yükleme sürelerini karşılaştırmalı olarak gösterdim. Bir çok insan ne gerek var buna diyebilir ama site hızınız ziyaretçilerinizin sitenizde kalma sürelerini ve ziyeret sıklıklarını doğrudan etkilemektedir.
Minify CSS öncesi Minify CSS Sonrası Dosya Boyutu Yükleme Hızı Dosya Boyutu Yükleme Hızı 21.4 KB 47 ms 16.1KB 32ms
Yukarıdaki tabloda da görüldüğü gibi Minify CSS opsiyonunu kullanarak yaklaşık %25’lik bir kazanım elde ettik. Tek bir dosya üzerinden baktığınızda kazanılan süre sizi tatmin etmeyebilir hatta gereksiz bir işlemmiş gibi gözükebilir. Ancak; uygulanabilir tüm dosyalarınızı düşündüğünüzde elde edeceğiniz süre size tahmininizden çok daha fazla avantaj sağlayacaktır.
Benzer konular:
peki dışarıdan çağırılan dosyalar için ne yapıcaz ?bu konuda bilginiz var mı
Merhaba Barin, dışarıdan çağırılan dosyalarla hangilerini kast ettiniz? js küthüphanesini google CDN üzerinden alabilrisiniz. Bunun için “Use Google Libraries” eklentsini kurmanız yeterli olacaktır… saygılarımla
mesela gtmetrix ile taradığımda bu şekilde bir dosya url si çıkıyor (
http://s7.addthis.com/js/300/addthis_widget.js
http://platform.twitter.com/widgets.js
http://cdn.tynt.com/tc.js )
bunlar tema içerisinde url olarak mı var ben bunları sıkıştırma işlemini nasıl yapıcam?
Minify ile dışarıdan js sıkıştır dediğimde ise site çok kasıyor ve bozulmalar oluyor.başka yolu yok mu bunun ?
Merhaba Barin, bu dosyalar farklı URL ve sunuculardan çekildiği için müdehale yetkiniz yok. Dolayısıyla sıkıştırma işlemini gerçekleştiremiyorsunuz… saygılarımla