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 8 yorum

  1. You have made some decent points there. I checked on the internet to learn more about the issue and found most individuals will go along with your views on this website. Cate Chen Elladine

    Cevapla
  2. I was wondering if you ever thought of changing the layout of your website? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or 2 images. Maybe you could space it out better? Rubetta Burke Redvers

    Cevapla
  3. Way cool! Some very valid points! I appreciate you penning this post and also the rest of the website is very good. Lorne Alanson Baptista

    Cevapla

Yorum yapın