Web Sitelerinde Sıkıştırma Yapmak

Yazılım dünyasında var olan terimlerden birisi hakkında ufak bir yazı yazmak istedim. “Sıkıştırma ( Output Compress )“.

Compress yani sıkıştırma işlemi aslında tüm genelinde uygulanan bir protokol haline gelse internet hızımız daha da artacak. Aslında artmayacak, daha rahat kullanıcaz. Bu ne demek ? İnternet trafığınız aslında daha da rahatlamış olacak. Çünkü daha küçük boyutlarda haberleşme gerçekleşecek.

Sıkıştırma olayını aslında bir yol üzerindeki araçlara benzetebiliriz. Toplu taşıma kullanmadan herkes kendi aracı ile yola koyulursa mükemmel bir trafik oluşur. Yol üzerinde o kadar kalabalık, o kadar fazla araç olacaktır ki işlerin ilerlemesi zor olacaktır. Toplu taşıma kullanıldığında ise 1 araç birden fazla aracın kullanılmasını engellemiş olup, trafik oluşmamısına neden olacatır.

Yazılım, web sitelerinde sıkıştırma olayı ise yukarıda verdiğim örnekten yola çıkıldığında birebir benzer diyebiliriz. Herkesin bildiği gibi basit şöyle diyebiliriz; web siteleri HTML, CSS, JavaScript dosyalarından oluşuyor. Yani kullanıcı tarafına gönderilen dosyalar bunlar diyebiliriz. Bu dosyalar haricinde birde Medya‘lar vardır ( image, video, sound vb. ). Şimdi bir kullanıcı web sitesine istek yaptığında bu dosyaları kendi tarayıcısına indirmiş olduğunu düşünürsek – ki öyle – dosya boyutları ne kadar yüksekse trafik o kadar fazla artacak. Artan trafiğin sonucu olacak yolun genişlemesi gerekiyor. Yani sonuç : İnternet yavaş, daha hızlı internet istiyoruz !!!!

Hal böyle olunca web site araçlarının, motorlarının ( Apache, Nginx, PHP, ASP vs. ) output compressing diye bir özellikleri bulunmaktadır. Bu özellik ile birlikte çıktı dosyalarınızı kullanıcıya göndermeden önce sıkıştırılmış olması daha hızlı sayfa açılışı sağlayacaktır. Bu durum şuna da denk gelir; Web siteniz ne kadar hızlı olursa olsun, dosya çıktılarınız büyükse internet trafiğinizden dolayı yavaş açılacağı için, alacağınız cevap : Site çok yavaş. Ölüyor..

Site açılış hızlandırmaları için birçok yöntem mevcuttur. Bu yöntemlerden birisi olan sıkıştırma hakkında elimden geldiğince bilgi vermeye çalışıyor olacağım.

  • HTML çıktılarınızı kullanmış olduğunuz yazılım dili, derleyici, server tarafındaki eklentileri kullanarak gerçekleştirebilirsiniz. Gzip sık kullanılan yöntemdir. Fakat Dil, Derleyici, Server üçlemesinde ki yapıya dikkat etmeniz gerekmektedir. Dil üzerindeki sıkıştırma algoritması, Derleyici üzerindeki sıkıştırma algoritması ve Server’ın sağlamış olduğu sıkıştırma algoritmalarının birbirine uyumlu olduğundan emin olun. İstenmeyen sonuçlar alabilirsiniz.
  • CSS ve Javascript dosyalarınızı mümkün olduğunca azaltmak, kullanılmayan dosyaları kaldırmak, ara da bir kullanılan dosyaları ise o sayfalarda çağırıp her seferinde istek yapılmamasını sağlamak da bir yöntemdir. CSS ve JS dosyaları tarayıcılar üzerinde CACHE dediğimiz sistemle birlikte yer edinirken ( CACHE var ne gerek var demeyin ) sayfa içerisinde derlenmesi, hafızaya alınması gerektiğini unutmayın. CSS ve JS dosyalarınızı standart geliştirme ortamlarınızda alt alt yazdığımız doğrudur. Bunun için yayınlama, canlıya alma dediğimiz ( publishing ) ana kadar geliştirme ortamında olacaktır. Canlıya alırken ise dosyalarınızı sıkıştırmanız tavsiyem olacaktır. Dosya boyutları arasındaki farkı görüyor olacaksınız.
  • Medya dosyalarında ise özellikle de iconlar, image’lar hakkında da şunlardan bahsedebiliriz. Örneğin; Altı üstü icon diyip 16X16 olacak iconu 512×512 olarak sitenize koyarsanız, o icon size önce 512×512 olarak yüklenip sonrasında 16×16 olarak derlenecektir diyebilirim. Bunun için dosya boyutlarını düşürmeniz, çözünürlüklerinizi iyi ayarlamanız gerekir. Bu size büyük bir avantaj sağlayacaktır.
  • Web sitesinin arka planındaki yazılım dilinde de yapılan sıkıştırma önemlidir. Bu sıkıştırma aslında yazarken dikkat edilmesi gereken bir konu. Clean Code / Temiz Kod dediğimiz olay burada devreye giriyor. Çünkü site server tarafında derlenme aşamasında iken gereksiz kodlarınız CPU / İşlemci sırasında tek tek okunacak ve işlenecek. Gereksiz kodlarınız bu süreyi mini, mili, mikro artık ne derseniz saniyeler içerisinde gerçekleşirken bu süreyi uzatacaktır.
  • Fotoğraf gibi yüksek boyutlu medyalar için ise sonradan yüklenme ( LazyLoad vb ) eklentilerini kullanmanız sayfa açılış hızlarınızı değiştirecektir. İlk istek sonrasında dosyaların internet hızlarına bağlı olarak kullanıcı tarafına aktarılması uzun sürebilir. Sonradan yükleme olayı ile birlikte sayfa açılışını hızlandırıp, medya dosyalarını sayfa açıldıktan sonra çekmeniz tavsiyem olacaktır.

CSS, JS, İmage dosyalarınızı aşağıdaki linklerden sıkıştırma işlemlerini yapabilirsiniz. Kendim de kullanıyorum, oldukça da memnunum. Farklı uygulamalar da var tabiki.

Hazır web siteleri kullanıyorsanız bu uygulamaların ücretli / ücretsiz sıkıştırma eklentileri de var. Örneğin WordPress, Opencart, Prestashop, Joomla ( Kaldı mı artık bilmiyorum 🙂 ) hazır site tasarlayıcıları, içerik yönetim sistemlerinin sıkıştırma eklentilerini kullanmanız sitenizdeki değişikliğin farkına varmanızı sağlar. Bu eklentiler tarayıcı tarafına veriler aktarılmadan önce Output Compress işlemini yapıyor. Böylece trafik yani internet üzerindeki paketlerin boyutları küçülüyor ve aynı anda daha fazla verinin gitmesini sağlıyor.

Sıfr bu yüzden dev büyükler ( Netflix, Google, Facebook vb. ) medya ve çıktılar için üstün teknolojiler kullanıyor diyebilirim. Örneğin Youtube ve Netflix size önce düşük kalitede yayın veriyor sonrasında siz düşük kalitede 5-10sn izlemeye devam ederken arka planda ise yüksek kalitede olan kısımlar yükleniyor. Siz izlemeye devam ettikçe görüntü bir anda Full HD kalitesine kadar çıkıyor. Basit bir düşünce büyük iş diyebiliriz.

İşin sonuna, sonucuna gelecek olursak herşeyi optimizeli olarak düşünmek ve uygulamak gerekir. Yapılan isteğin ne kadar zamanda gerçekleşmesi gerektiğinin hesaplamasını yapın. İnternet hızı birim / saniye olduğundan taşınan verinin internet hızına ne kadar ihtiyaç olduğuna ve minimum seviyede tutulmasını sağlayın. İşe yaradığını fark edeceksiniz.

İlerleyen zamanda temiz kod ile alakalı da yazmayı düşünüyorum. Her ne kadar temiz kodlayamasak da birşeyler karalarım sanırım. 🙂

“Yazılıma Yeni Başlayanlar İçin Birkaç Cümle” yazımı okudunuz mu ?

“Web Sitelerinde Sıkıştırma Yapmak” üzerine 16 yorum

  1. Wow, this piece of writing is nice, my sister is analyzing these kinds of things, therefore
    I am going to inform her.

    Cevapla
  2. The article is really excellent. Every time I read it, I get information again.
    The best article I’ve read in a long time….

    Cevapla
  3. I want to convey my admiration for your generosity giving support to visitors who really want help with your area. Your real commitment to passing the message all-around had become especially helpful and have really permitted somebody much like me to realize their aims. Your personal helpful guidelines can mean much a person like me and even further to my fellow workers. Warm regards; from each one of us.

    Cevapla
  4. Uygulama çok iyi herkese tavsiye ederim takipçim ve izlenmem arttı çok eğlenceli bir uygulama bayıldım yapanlara helal olsun

    Cevapla
  5. Thanks a lot for providing individuals with a very marvellous possiblity to read from this site. It is always so pleasurable and as well , full of fun for me personally and my office colleagues to visit your web site at the least 3 times in a week to find out the new tips you will have. And of course, I’m just always amazed considering the superb ideas you give. Certain two ideas in this posting are particularly the most effective we’ve ever had.

    Cevapla
  6. Hello there, just became aware of your blog through Google,
    and found that it is truly informative.
    I’m gonna watch out for brussels. I will
    be grateful if you continue this in future.
    A lot of people will be benefited from your writing.

    Cheers!

    Cevapla
  7. I wanted to post you this very small note to be able to say thanks a lot the moment again with the superb principles you’ve contributed above. It’s certainly shockingly generous with you to present freely just what many individuals might have advertised for an ebook to get some bucks for themselves, most notably seeing that you might have tried it if you wanted. Those techniques as well served to be a easy way to fully grasp that many people have the identical passion the same as my own to learn significantly more when it comes to this problem. I’m sure there are lots of more pleasurable occasions ahead for many who look into your blog.

    Cevapla
  8. I’ve learn a few excellent stuff here.
    Certainly value bookmarking for
    revisiting. I wonder how so much effort you put to create this
    kind of fantastic informative site.

    Cevapla
  9. Thank you a lot for giving everyone an extremely breathtaking chance to read in detail from here. It’s always so fantastic and full of fun for me and my office fellow workers to search your website not less than thrice in 7 days to read through the newest stuff you have. And of course, we are usually fulfilled considering the gorgeous inspiring ideas you give. Some 4 facts in this post are ultimately the most suitable we have all ever had.

    Cevapla
  10. When someone writes an piece of writing he/she retains the image of
    a user in his/her mind that how a user can be aware of it.
    So that’s why this post is great. Thanks!

    Cevapla
  11. Heya i am for the first time here. I came across this board and I find It truly useful & it helped me out much. I hope to give something back and help others like you helped me.

    Cevapla
  12. I revel in checking out your blog website. You are certainly good and also create so effectively. Cheers concerning striving on this particular website.

    Cevapla

Yorum yapın