JS , CSS ve HTML içeriğin Sıkıştırılması ile Web projelerinde performans artışı sağlama.

Genelde performansı ile övündüğümüz web sitelerinin herhangi bir sayfasında kullanılan scriptlerin ekran görüntüsünü sizlerle paylaşmak istedim Aşağıda Google ve Facebook’un script dosyalarının ekran görüntülerini bulunmaktadır ve iki siteninde script kodlarının iç içe olduğunu ve hiç bir şey anlaşılmadığını farketmişsinizdir.Bunu yapmalarının amacı normalde düzenli şekilde yazılan script dosyalarının server’da daha fazla yer kaplaması ve dolayısıyla daha uzun yüklenme sürelerinin olmasıdır.Bu boyutları azaltabilmek için çeşitli sıkıştırma araçları kullanılmaktadır.Bu araçları kullanarak script , css ve benzeri kullanıcının içeriğini göremediği dosyaları sıkıştırarak server’ın kullanıcıya daha kısa sürede yanıt vermesi sağlanmaktadır.Çünkü kullanıcı bir sayfa için browser aracılığıyla serverdan bir talep'de bulunduğunda server bu sayfanın HTML içeriği ve bunun yanında sayfada kullanılan .JS , .CSS vb dosyaları da kullanıcının bilgisayarına yüklemekte bundan dolayı bu harici dosyaların boyutu ne kadar fazla olursa sayfa daha yavaş yüklenecektir.



Sıkıştırma işlemi dosya içerisinde bulunan boşlukların , yorumların , gereksiz parantezlerin , değişken isimlerinin kısaltılması vb kodun çalışmasına etkisi olmayan şeylerin kaldırılmasından oluşmaktadır.

Örneğin : Boyutu 25 kb olan bir dosya bu şekilde sıkıştırarak dosya boyutu 15 kb'ye veya dahada aşağı bir boyuta çekilebilmekte.Biz örneğimiz için dosya boyutunun 25 kb'den 15 kb ye düştüğünü yani 10 kb'lik bir tasarruf olduğunu düşenelim.

Her bir kullanıcıyı sayfayı görüntüleyebilmek için exstra 10 kb daha indirme zorunluluğundan kurtarmış olduk.Bu sistemi çok fazla sayıda kullanıcısı olan sistemler için düşündüğümüzde ufak bir değişiklik ile çok büyük oranlarda tasarruf ve performans sağlayabilmekteyiz.

Sekizyüz milyon(800.000.000) kullanıcısı olan facebook için bu sistemi örneklemek gerekirse.Yani 25 kb'li bir dosyayı sıkıştırma yöntemi ile 15 kb'ye düşürdüğümüzü düşünelim.

800.000.000 * 10 kb = 8.000.000.000 KB
                                       7.812.500 MB
                                              7.629 GB
                                                7,45 TB lık bir tasarruf sağlamış olduk gerçekten çok güzel bir rakam.

Bu rakamın sadece scriptin bulunduğu bir sayfanın bir kez görüntülenmesi sonucu oluşan rakam olduğunu unutmayalım.Bir sayfada birden fazla script , css vb dosyanın olduğunu ve bu sayfayı içeren Web projelerinde  çok sayıda sayfa olduğu düşünüşürsek bu rakamın çok daha büyük rakamlara ulaştığını görebilirsiniz.

Google anasayfasından kullanılan script dosyalarının birinde alınan ekran görüntüsü.

Google anasayfası tarafından kullanılan bir script dosyası

Facebook'dan tarafından kullanılan script dosyalarının birinde alınan ekran görüntüsü.

Facebook tarafından kullanılan bir script dosyası

Yukarıda bahsettiğim sıkıştırma işlemini yapan birden fazla araç bulunmakta ben'de bu araçlardan biri olan ve Microsoft tarafından sunulan Ajax Minifier ile ilgili bir makale parçasını da sizlerle paylaşmak istiyorum.

Ajax Minifier, Microsoft tarafından sunulmuş, css ve js uzantılı dosyalarımızın boyutunu küçültmeye yarayan bir programdır. Sadece boyut küçültmekle kalmıyor, yazmış olduğunuz kodu analiz etmeye de yarıyor. Ajax Minifier'ın yaptığı işlem aslında çok basit ancak bizler için büyük bir zaman kaybı ve hata yapma payı yüksek bir işlem. Yapılan işlemin kısa açıklaması : gereksiz boşlukları, yorumları, ulaşılamaz kodları, fazla noktalı virgülleri, fazla parantezleri silmek ve değişkenlere kısa isim vermek.

O halde örnek olması amacıyla bir tane javascript dosyasının boyutunu küçültelim. Öncelikle yapmanız gereken ilk ve tek şey Ajax Minifier 4.55 (en güncel versiyonu) programını buradan indirmek. Programı indirip kurduktan sonra eğer bilgisayarınızın işletim sistemi 64 bit ise "C:\Program Files (x86)\Microsoft \Microsoft Ajax Minifier" bu dosya yoluna, eğer 32 bit ise "C:\Program Files\Microsoft\Microsoft Ajax Minifier" bu dosya yoluna gidin. Gidin diyorum çünkü program bir komut girişinden (Command Prompt) ibaret.

Küçültmek istediğiniz dosyaları yukarıda belirttiğim dosya yoluna atıp, işlemi orada gerçekleştirirseniz komut girişine sadece dosya ismini yazarsınız. Ancak masaüstündeki bir dosyayı küçültmek isterseniz dosyanın yolunu da belirtmeniz gerekiyor (C:\Users\[kullanıcı ismi]\Desktop gibi). Elimde Nivo Slider adlı jquery ile hazırlanmış bir slider var ve küçültülmemiş hali 24,6 KB. Küçültme işlemi için komut girişine yazmanız gereken cümle "ajaxmin [küçültülecek dosyanın adını girin] -o [küçültülmüş dosyanın adını girin]". 

NOT : Sakın uzantıyı girmeyi unutmayın! (.js veya .css). Elimdeki javascript dosyasının küçültme işleminde kullanacağım cümle aşağıdaki gibidir.

İşlemin gerçekleşmesi için Enter'a bastığımızda işlem gerçekleşecek ve bize şöyle bir rapor sunacak

Yukarıdaki görüntü bize şunu açıklıyor : jquery.nivo.slider isimli javascript dosyası %53.7 oranla küçültüldü ve 25.283 KB'tan 11.695 KB'a düştü. Yenibirdosya isimli küçültülmüş dosya ise aynı dizine çıkartılıyor. Çıkartmak istediğiniz yer farklı ise dosya yolunu başına eklerseniz istediğiniz yere dosyayı çıkaracaktır. Gelin bir de dosyalarımızın içeriğini görelim. Soldaki küçültülmemiş hali, sağdaki ise yeni, küçültülmüş hali. Sağ taraftakilerin boşluk olduğunu düşünmeyin, onlar alt satıra kayan cümlenin devamıdır.

CSS dosyası küçültmenin, javascript dosyası küçültmekten farkı olmadığı için css dosyası için küçültme örneği yapmayacağım. Ajax Minifier'ın tüm komutlarına ulaşmak için "ajaxmin" yazmanız yeterli. Küçültmekten başka işlemlerin de olduğunu göreceksiniz.