💻 Bilgisayar

Gzip Sıkıştırması ile Sitenizi Hızlandırın

Gzip bir çeşit sıkıştırma algoritmasıdır. Web açısından baktığımızda gzip, özellikle HTML, CSS ve JS gibi metin tabanlı dosyalarda çok ciddi derecede sıkıştırma sağlayan bir sıkıştırma yöntemidir. Birçok web sunucusu ve güncel tüm tarayıcılar (ile web robotları) gzip sıkıştırmasını desteklemektedir.

Sıkıştırma Konusunda Anlaşmak

Siz bir web sayfasını açmak üzere tarayıcınıza tıkladığınızda, arkada bir çok şey olur. Bunlardan biri de, isteğin hangi formatta olacağına karar verilmesidir. Bir web sayfası açmaya çalıştığınızda tarayıcınız sizin için aşağıdakine benzer bir bilgi gönderir:

(Request Header)

sample-request-header

Burada gönderdiğiniz bilgilerden Accept: */* ve Accept-Encoding: gzip,deflate satırlarına dikkatinizi çekmek istiyorum. Accept, istemcinin (yani tarayıcınızın) kabul ettiği MIME (Multipurpose Internet Mail Extensions) tiplerini, Accept-Encoding ise kabul ettiği kodlama biçimlerini gösterir.

Tarayıcınız sizin adınıza gzip ve deflate algoritmaları ile sıkıştırılmış verileri kabul ettiğini gönderiyor. Karşıdaki sunucu da (eğer bu sıkıştırmayı destekliyorsa) size verileri sıkıştırarak gönderebilir. Sunucu, veri aktarımından önce aşağıdakine benzer bir bilgi gönderir:

(Response Header)

sample-response-header

Burada Content-Type ve Content-Encoding satırlarına dikkat etmenizi istiyorum. Content-Type ile dönen verinin MIME tipinin text/html olduğu ve bu dosyanın UTF-8 ile kodlandığı belirtilmiş ve ardından Content-Encoding ile de gelen verinin hangi algoritmayla sıkıştırıldığı gönderilmiştir.

Anlaştık Sanırım

Yukarıdaki kısımda görülebileceği üzere, tarayıcı hangi tipleri algılayabildiğini göndermiş, sunucu destekliyorsa cevabını bu algoritmalardan biriyle sıkıştırarak göndermiş ve fiber optik kablolar daha az veri taşıdığı için mutlu olmuşlardır. Siteniz daha hızlı açıldığından okurlarınızda kocaman bir gülümseme oluşurken, siz de ay sonunda bandwidth kullanımınızın azaldığını görünce onlara katılırsınız.

Ne Kadar Sıkıştırıyor?

Gzip, özellikle metinlerde etkili bir algoritmadır. Aynı zamanda sıkıştırma/açma hızı yüksek bir algoritma olduğundan sıkça tercih edilir. Ben veritabanı yedeklerimi sunucumdan gzip ile sıkıştırılmış olarak çekiyorum. 30 Megabaytlık bir veri tabanını (SQL, metin formatında) 7 MB’a sıkıştırdığını kendim biliyorum. Web’de CSS, HTML ve JavaScript dosyalarında bu kadar sık kullanışmasının nedeni de tam olarak bu performans. =)

Nasıl Aktifleştiririm?

Sunucunuzda gzip sıkıştırması kullanmak için pek çok yöntem vardır. Bu yazıda Apache ve uyumlu sunucular (mesela Litespeed) için, .htaccess dosyaları ile bu özelliği açmak anlatılacak.

Sitenizin kök klasöründeki .htaccess dosyasını açın. (Yoksa kendiniz yaratın.) Daha sonra gzip sıkıştırmasını açmak için bu dosyanın en üstüne aşağıdaki kodu kopyalayın ve dosyayı kaydedin.


SetOutputFilter DEFLATE

Bu kod, sitenizdeki js ve css uzantılı dosyalar için gzip sıkıştırmasını açacaktır. Yukarıdaki kodda neden php uzantısının neden olmadığını merak etmişsinizdir muhtemelen. Bu dosyaların çıktısı PHP ile dinamik olarak oluşturulduğu için, sıkıştırılması PHP da ile ayarlanır. Bununla ilgili bilgi almak için şuraya ışınlanabilirsiniz. PHP’de ob_gzhandler kullanımı artık tavsiye edilmemektedir.

Yukarıdaki kodu .htaccess dosyanıza ekledikten sonra 500 Internal Server Error hatası alıyorsanız ya da bir gariplik olduysa sunucnuzda mod_deflate veya
mod_ext_filter eklentisi yüklü olmayabilir. Bu durumda sıkıştırmayı (en azından benim anlattığım yöntemle) yapamazsınız. Hosting şirketinizin başının etini yemeniz şiddetle önerilir.

Daha da Gelmem

Dilerseniz aşağıdaki .htaccess kodlarını da ekleyerek sitenizde ufak birkaç iyileştirme daha yapabilirsiniz:


ExpiresActive On
ExpiresDefault A604800
Header append Cache-Control "public"

Bu kod, aksi belirtilmediği halde gönderilen bilginin tarayıcı tarafından ön belleğe atılmasını ve bir hafta geçerli olmasını sağlar. (Böylece fotoğraflar ve görseller her seferinde sunucunuzdan yüklenmek zorunda kalmaz.)


AddDefaultCharset UTF-8
DefaultLanguage tr-TR

Bu kod, belirtilen uzantılı dosyalar için aksi belirtilmediği halde varsayılan dilin Türkçe ve karakter kodlamasının UTF-8 olmasını sağlar. (Bunlar HTTP Header bilgileridir, HTML Head meta taglarını siz ayarlamalısınız. Tarayıcılar HTML Meta Charset ile HTTP Header Charset uyuşmadığı takdirde hangisini kullanacakları konusunda farklı tepkiler verirler.)

Bitirirken

Bugünlük bu kadar. İyi geceler efendim.

Gzip Sıkıştırması ile Sitenizi Hızlandırın 66 yorum aldı.

  1. gzip’e bayılırım, o kadar ki her kahvaltıdan önce en az iki gzip işlemi gerçekleştiremezsem o gün rahat edemem. En çokta serverdan servera koca siteleri taşırken bayılırım kendisine, tadından yiyemem. Ona istinaden zip’i de pek severim, bir host üzerinde yapmaktan en çok hoşlandığım işlemlerden biri tir. Ayrıca gecenin bir yarısı UB’nin sitesine girip akıl ve mantık süzgecinden geçmemiş yorumlar yapmakta en çok hoşlandıklarım arasındadır 🙂

  2. Peki bu “ExpiresActive On…” işlemini mesela birçok dosyanın bulunduğu bir klasörde, o dosylardan sadece birine nasıl uygulayabilirim. Örn: klasörde a.gif, b.gif, c.gif var ben sadece b.gif’e uygulamak istiyorum. Şimdiden teşekkürler…

    1. @Soul:

      SetOutputFilter DEFLATE

      kısmındaki FilesMathc kısmına, sadece sıkıştırılmasını istediğiniz dosyalarını yazmalısınız. Ancak syntax olarak yazılımı nasıl bilmiyorum. Apache ve .htacess FilesMatch olarak Google’da aratarak yazımına bakmak gerekiyor.

      1. dediklerinizi tek tek yaptım fakat chrome deki eklentiden baktığımda gzip sıkıştırmasının hala etkin olmadığını gördüm wordpress eklentisi ile sorunu aştım. win sunucularda bunlar yapılıyor mu

      2. Windows üzerindeki Apache'de yapılıyor. Ancak diğer sunucular konusunda bir bilgi sahibi değilim.

  3. anlatım güzel ben kullanıyorum ama seo analizlerden baktıgımda kullanılmıyor gözüküyor sitemde nedenini anlamadım

  4. Dostum çok teşekkürler, wordpress kullanıyorum ve bu aralar kafamı kurcalayan bir meseleydi. Çok teşekkür ederim.

  5. Hocam super cache eklentisi ile gzip hakkında da bir bilginiz varmıdır? Ben eklentiyi kurup ayarlarından gzip seçtiğimde performans artıyor (pagespeed skoru 99) fakat chrome ve firefox'da sorun olmazken IE tarayıcısı sayfa yerine gzip içeriği olan harf ve rakamlardan başka bir şey göstermiyor. Ziyaretçilerin en az %40'ı IE kullandığı içinde eklentinin bu özelliğini kapatmak zorunda kaldım.

    1. Buna benzer bir sorun ben de yaşamıştım ama işin kötüsü nasıl çözdüğümü hatırlamıyorum. Ancak size fikir olması açısından kontrol edilecek şeyleri söyleyeyim:

      1. Sayfa iki defa gziplenmeye çalışılıyor olabilir. Yani aslında sayfa hatalı kodlanmış, ancak tarayıcıların başarısı dolayısıyla doğru görüntüleniyor olabilir IE diğerlerine göre daha nazik.
      2. Daha olası bir ihtimal, sıkıştırma doğru ancak bilgisi yanlış olabilir. HTTP Headerlarında gelen bilginin sıkışık olduğunun ve tipinin text/html olduğunun doğru bir şekilde belirtilmesi çok önemli. Internet explorer çok büyük bir ihtimalle eksik bir headerdan dolayı gelen veriyi sıkıştırılmış ve açılıp gösterilmesi gereken web sayfasından çok, doğrudan gösterilecek bir şey gibi anlıyor.

  6. Derli toplu ve net anlatımlar her zaman hoşuma gitmiştir. Paylaşımlarınız için teşekkürler.

  7. Benim bir komb şatış sitem var. Burada Gzipi aktif yapmak istiyorum ancak bu Gzip olayını windows hostinglerde yapmak mümkün müdür? Sadece linux hostlar için mi geçerlidir?

  8. İlgili kodları ekledim ama sıkıştırma yapmamış. Seo analizi yaptığımda javascript dosyasının sıkıştırılmadığını görüyorum.

  9. ALLAH sizlerden razı olsun, bana 1 harf öğretenin kırk yıl kölesi olurum buyuruyor hz. ali r.anha. teşekkür ederim kardeşim…

  10. vallahi de çok güzel bir anlatım. Çok özgün ve ilgi çekici. Google amca bana siteni biraz sıkıştır istersen diyor. Ben biraz araştırınca sizin site ile karşılaştım. Fakat daha çok acemi olduğum için fazla bir şey anlamadım. Yine de çok teşekkür ediyorum.

  11. Merhaba Umut 🙂 öncelikle sitene bayıldım desem yeridir, senelerce siteyi aktif tutmuşsun tebrik ederim.Konuyla alakalı soruma gelecek olursak benim serverım .htaccess dosyasına izin vermiyor veya şöyle diyeyim ne yazarsam yazayım etkisi olmuyor.Ben gziple sıkıştırma yapıp iyi pagespeed ve yslow puanı için bana yardım etmeni istiyorum.Neler yapabilirim? site hızlandırma, seo, eklentiler hakkında iyi bilgiye sahip olduğumu düşünüyorum.Ona göre cevap verebilirsin.Teşekkürler şimdiden 🙂

    1. Merhaba Süha,

      Uzun süredir Apache'nin web sunucusunu kullanmadığımdan yardımcı olabileceğimi sanmıyorum. Şu an bu site için nginx ve php5-fpm kullanıyorum. Gzip ve şeylerin tamamı nginx için ayarlı halde.

      Ancak aklıma gelen genel sorun, hosting firmanızın o özelliği/.htaccess dosyalarına izin vermemesi. Bunun için kendilerine danışıp bilgi alma şansınız varsa deneyebilirsiniz.

      1. Kendilerine danıştım ve böyle bir özelliğimiz yok dediler 😀 çok yardımcı oldular açıkçası.Peki beni yönlendirebileceğin bir makale veya bir kişi var mıdır? Çünkü alternatif yollar arıyorum bu cevabı aldıktan sonra ve henüz bulamadım.

  12. Hocam iyi geceler öncelikle paylaşımlar için teşşekkür ederiz acaba oluşturduğumuz htacess dosyasına bu komutları ekledikten sonra serverin içine atmamız yeterlimi yada özel biryer varmı atmamız gereken

    1. Sitenin sunulduğu en üstteki dizine atmalısınız veya orada bulunan dosyanın içine ilave etmelisiniz. (www, public_html veya benzer bir ismi olur genelde)

  13. Merhaba,

    IIS 7 kullanan ve windows 2008 server üzerinde çalışan .net tabanlı bir web sitesinde .htaccess ile bu denileni yapma şansımız maalesef olamıyor. .Net tabanlı bir site için gzip olayını nasıl çalıştırabiliriz. Yardımcı olabilirseniz çok sevinirim.

  14. hocam nasıl teşekkür etsem az, bu kadar net anlatılır! 2 aydır çözemediğim sorunu basit anlatımın sayesinde çözdüm, teşekkürler. Bir hata daha var düzeltilmesi gereken, bununla ilgili de internette pek kaynak mevcut değil. '' Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın '' diye bir hata.

  15. eyvallah saolun ama ben wordpress kullanıyorum bunun eklentisini indirip kurdum direk bir ayar gerektirmedi yani test ettim ama çalışmıyor. yüklü eklentide

  16. elinize sağlık harika oldu gtmetrix ilk ölçümümde D-C olan sonuç bu uygulamadan sonra A-B oldu SÜPER.

  17. Merhabalar,

    Öncelikle ellerine sağlık. PHP Ticaret sitemde kullandım vermiş olduğun GZİP için olan kodu. Gözle görülür bir değişim hissettim sayfa açılışı vb. ancak analiz yaptığımda yine GZİP kullanılmıyor diyor. .htaccess içerisine ekledim. Hata almadım sunucumda bahsettiğiniz eklentiler yüklü sanırım. Ancak belirttiğim gibi halen seo analizinde kullanılmıyor yazıyor :/

  18. nerede yanlis yaptigimi bilmiyorum gzipi aktif edemedim bir turlu benim .htaccess dosyam su sekilde;

    <ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_include handler ^cgi-script$
    </ifModule>

    ## Apache2 deflate support if available
    ##
    ## Important note: mod_headers is required for correct functioning across proxies.
    ##
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/opentype

    # For Olders Browsers Which Can't Handle Compression
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    </IfModule>

    # Configure ETags
    <FilesMatch "\.(jpg|jpeg|gif|png|mp3|flv|mov|avi|3pg|html|htm|swf|js|ico)$">
    FileETag MTime Size
    </FilesMatch>

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir