Minify ile Javascript ve Css Sıkıştırma

Minify ile Javascript ve Css Sıkıştırma

İnternet sitelerinde Ajax, dolayısıyla Javascript kütüphanelerinin kullanımının artmasıyla sayfaların yüklenme zamanı bir hayli artıyor.  Buna birde tablosuz tasarımın yaygınlaşmasıyla artan css kodlarınında eklenmesiyle performans iyice düşüyor. Yeri geliyor 25-30 kb’lık bir html dosyası için 80-90 kb javascript ve css dosyası kullanılıyor. En basitinden örnek vermek gerekirse Jquery kütühanesine herhangi bir sıkıştırma işlemi uygulamadığımız zaman boyutu 56 kb oluyor.

Açılış performansını düşüren bir başka etken ise birden fazla javascript veya css dosyasının kullanılmasıyla sunucuya yapılan istek sayısının artması.

Peki bu durumu düzeltmek için ne yapabiliriz?

  1. Css ve Javascript dosyalarımızdaki boşluk ve yorum satırlarını temizleyerek dosya boyutlarını düşürebiliriz. 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. Eburhan bu sitelerin bir listesini yapmış, buradan ulaşabilirsiniz.
  2. Sunucu taraflı sıkıştırma yapabiliriz. Gzip kullanarak %70-80’lere varan sıkıştırma oranlarına ulaşabiliriz.

Minify

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 grafiktende görüleceği üzere dosyaları %70 oranında sıkıştırarak sunucuya yapılan istek sayısını 2’ye indiriyor.Yaptığım ilk testte 56 kb’lık Jquery kütüphanesini 19 kb’a, 19 Kb’lık bir css dosyasını ise 3.6 kb’a sıkıştırmayı başardı. Ortalamasını aldığımız zaman yukarıdaki grafiktele aynı sonucu verdi ; %70 sıkıştırma oranı.

Uygulamayı mevcut site yapınızı bozmadan sitenizin ana dizinine yükleyerek (zip dosyası içerisindeki min klasörünü) kullanabilirsiniz. Gerekli ayarları yaptıktan sonra siteadi.com/min adresine girerek gerekli url adresini üretebileceğiniz arayüze ulaşabilirsiniz. Sayfamıza eklemek istediğimiz dosyaları girerek eklememiz gereken css ve javascript adreslerini aldıktan sonra tek yapmanız gereken eski css ve javascript ekleme kodlarını silerek arayüzden ürettiğimiz adresleri kullanarak yeni kodları eklemek. Söylemeden edemeyeceğim, bu adresler oldukça uzun ve çirkin görünüyor.

Wp-Minify

Uygulama için hazılanan wp-minify adlı bir wordpress eklentisi bulunuyor. Wordpress kullanan bir siteniz varsa bu eklentiyi kurarak Minify uygulamasının nimetlerinden faydalanabilirsiniz.

Wp-Minify eklentisine buraya tıklarak ulaşabilirsiniz.

Sonuç olarak;

Minify uygulamasını kullanarak Javascript ve Css dosyalarınızı %70’lere varan oranda sıkıştırabilir, sitenizin daha hızlı yüklenmesini sağlayarak kullanıcılarınızı rahat ettirebilirsiniz. Yüksek trafikli bir siteniz varsa bant genişliğinden elde  edeceğiniz kazançta cabası smile

Minify uygulamasına buradan ulaşabilirsiniz.

Bu yazı en son 28 Kasım 2010 tarihinde düzenlenmiştir ve güncelliğini yitirmiş olabilir.
Benzer Yazılar

blog comments powered by Disqus

© Mustafa Navruz 2011 0.0172 sn.

^ Başa Dön