Minify ile Web sitelerinizi Hızlandırın

[mavigece]

Arkadaşlar merhaba;

Büyük bir projeyi tamamlamak üzereyiz. Ve proje gayet iyi. tarihiolaylar.com. (Kategorisi itibari ile reklam olmayacağını düşünüyorum.)
Bu projede minify adında güzel bir eklenti kullandım. ve sonuçlarını fazlası ile aldım. size nasıl kullanacağını anlatmak istiyorum.

Büyük projelerde yüksek trafik olan sitelerde css ve js dosyası ileride sunucunuzu yorabilir.

• Css ve Javascript dosyalarımızdaki boşluk ve yorum satırlarını temizleyerek dosya boyutlarını düşürebiliriz sunucuyu rahatlatabiliriz. Dosyalarımızdaki bu fazlalıkları temizleyebileceğimiz bir çok çevrimiçi araç bulunuyor. Fakat daha sonra dosyalarımızda değişiklik yapmak istediğimiz zaman tekrar tekrar bu işlemi yapmamız gerekebilir.

• Sunucu taraflı sıkıştırma yapabiliriz. Gzip kullanarak %70-80’lere varan sıkıştırma oranlarına ulaşabiliriz.

fakat bunları bir arada yapabiliecek bir eklenti düşündüğümüzde Minify imdadımıza yetişiyor.

Minify Nedir?
Minify javascript ve css dosyalarınızı sıkıştırmaya yaramaktadır. Minify, Javascript ve Css dosyalarını yukarıdaki 2 yöntemi birden uygulayarak sıkıştıran bir Php 5 uygulaması. Birden fazla dosyayı tek bir dosyada birleştirmesi ve cache (önbellek) sisteminin de olması ayrı bir güzellik. Aşağıdaki resmilere bakarak bile ne işe yaradığını anlayabilirsiniz.

Kullanmadan Önce


Kullandıktan Sonra


öncelikle linki vereyim.

Kod: Tümünü seç

https://github.com/mrclay/minify

Şimdide nasıl kullanıldığına bakalım.

Öncelikle yukarıdaki adresten dosyalarımızı indiriyoruz. ve sunucuya atıyoruz.

head tagları arasındaki bütün CSS ve JS dosyalarını siliyoruz yerine sıra ile şu satırı ekliyoruz

CSS için standart link yapımız

Kod: Tümünü seç

<link type="text/css" rel="stylesheet" href="/min/g=css" />

JS için Standart link Yapımız

Kod: Tümünü seç

<script type="text/javascript" src="/min/g=js"></script>

Kodları açıklayayım. min = minify'nin bulunduğu klasörün adı, g= group yani css veya js dosyalarımızın array şeklinde tutulduğu yer.

Şimdi gelelim css ve js dosyalrımızı nerede tanımlayacağımıza?
min/groupConfig.php dosyasını açıyoruz. içerisine aşağıdaki örnek gibi dolduruyoruz.

Kod: Tümünü seç

return array(
               'js' => array('//assets/js/vendor/modernizr.js', '//assets/plugin/bxslider/jquery.bxslider.min.js'),
		'css' => array('//assets/css/normalize.css', '//assets/css/foundation.css'),
);

bu şekilde css ve js dosyalarımızı birleştirdikten sonra artık siz istediğiniz css veya js dosyasını güncelleyin otomatik olarak sıkıştırıp yayına alacaktır. böylece sunucunuza tek bir sorgulama göndermiş ve trafiğinizi azaltmış olacaksınız.

Takıldığınız bir yer olursa yardımcı olabilirim. Umarım anlatış şeklim düzgündür.

Kolay gelsin.

[velociraptor]

teşekkürler , oldukça faydalı görünüyor

[byte]

Tüm bunlardan bahseden kişinin bahsini ettiği projedeki site de " mentions.js " 'yi iki ayrı kaynaktan iki kere yüklüyor :)
Sırf bu cevabı vermek için üye oldum. Yani bir arkadaşa baktım çıkıyorum hesabı...