Minify ile Web sitelerinizi Hızlandırın

Web tasarım, Web Programlama ve script dilleri konuları buraya
Cevapla
Kullanıcı avatarı
mavigece
Megabyte1
Megabyte1
Mesajlar: 951
Kayıt: 16 Mar 2006, 08:55
cinsiyet: Erkek
İletişim:

Minify ile Web sitelerinizi Hızlandırın

Mesaj gönderen 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
Resim

Kullandıktan Sonra
Resim

ö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.
http://www.devasabilisim.com.tr - http://www.sefaaydin.net
Kullanıcı avatarı
velociraptor
Yottabyte4
Yottabyte4
Mesajlar: 34163
Kayıt: 14 Mar 2006, 02:33
cinsiyet: Erkek

Re: Minify ile Web sitelerinizi Hızlandırın

Mesaj gönderen velociraptor »

teşekkürler , oldukça faydalı görünüyor
Knowledge determines destiny, And ye shall know the Truth and the Truth shall make you free
byte
Bit
Bit
Mesajlar: 1
Kayıt: 26 Şub 2019, 02:26

Re: Minify ile Web sitelerinizi Hızlandırın

Mesaj gönderen 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ı...
Cevapla