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.Minify CSS

Ç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;

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:

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.