Home » Optimasi Wordpress » Menghemat Quota Bandwidth dengan HTTP Compression

Menghemat Quota Bandwidth dengan HTTP Compression

9 Des. 2009234 comments
Menghemat Quota Bandwidth dengan HTTP Compression

Seperti janji saya pada postingan sebelumnya Tips Menghemat Quota Bandwidth, maka kali ini kita akan membahas HTTP Compression untuk mempercepat loading wordpress sekaligus untuk menghemat quota atau jatah bandwidth. Untuk para master mohon masukannya, kalau ada yang salah.

Saat ini terdapat dua macam metode kompresi HTTP yang umum digunakan, yaitu mod_deflate dan mod_gzip. Keduanya bekerja pada server apache. Dibandingkan dengan mod_deflate, mod_gzip memberikan rasio kompresi HTTP yang lebih besar. Artinya mod_gzip lebih baik daripada mod_deflate.

Beberapa penyedia jasa web hosting terutama yang gratisan malah sudah mengaktifkan mod_gzip secara otomatis pada server apache-nya.  Mod_gzip mengirit bandwidth dengan cara mengkompresi bodi respon HTTP sebelum dikirimkan ke klien/browser. Rata-rata browser modern sudah dapat membaca respon yang terkompresi. Karena perbandingan jumlah request teks (HTML, txt, js, css) dan gambar (gif, jpg, swf) untuk sebuah situs tipikal adalah 1:1 hingga 1:3, dan gzip dapat mengkompresi teks hingga 50%-80%, maka pengiritan trafik outgoing web yang diperoleh rata-rata bisa berkisar antara 10%–35%. Dan pengiritan total bandwidth yang diperoleh antara 4%–15%. Jumlah yang lumayan.

Sebenarnya kita bisa memasang mod_gzip pada Apache server tempat kita hosting, yaitu dengan cara membuat sebuah source code kemudian kita install di apache. Tapi untuk cara ini tidak akan dibahas di sini, karena saya sendiri belum cukup mahir tentang setting apache, takut malah eror heeee……

Syarat-syarat untuk dapat menggunakan metode kompresi HTTP di atas adalah browser dan server harus mendukung. Khusus untuk mod_gzip, PHP yang digunakan harus versi 4.0.6 hingga terbaru. Untuk dapat mengetahui versi PHP pada server yang kita gunakan, buatlah sebuah file php (contoh: info.php), kemudian ketikkan kode berikut:

<?php
phpinfo ();
?>

Kemudian simpan dan uploadlah file tersebut ke root direktori wordpress. Kemudian buka file tersebut melalui browser yang kita gunakan. Contoh: http://nama-domain.com/info.php

Di situ akan terlihat informasi lengkap PHP yang ada di server. Kita bisa mencari fitur-fitur yang terintegrasi di dalamnya.

Kompresi  menggunakan mod_deflate :

Caranya adalah, dengan menambahkan kode berikut pada file .htaccess di direktori root domain kita.

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# atau kompress berdasarkan ekstensi file: <files *.html *.php *.css> SetOutputFilter DEFLATE </files>

Kompresi  menggunakan mod_gzip :

Caranya adalah dengan menambahkan kode berikut:

<?php
ob_start( 'ob_gzhandler' );
?>

atau

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>

Tambahkan kode tersebut di bagian paling atas header.php. Contoh:

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')
{ob_start("ob_gzhandler");}
else {ob_start();}
?>
<!-- bagian paling atas header.php -->
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
</html>

Jika theme wordpress kita memakai template halaman (page template), maka tidak direkomendasikan untuk menyisipkan kode mod_gzip di bagian header.php. Karena akan merusak kompresi. Caranya adalah dengan menyisipkan kode mod_gzip tersebut pada file index.php, single.php, page.php, archive.php, 404.php, dan search.php, dan jangan sisipkan pada header.php. Contohnya:

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
<!-- Bagian atas file single.php --><?php get_header(); ?>

Jika kita memakai template halaman, maka kode mod_gzip disisipkan dengan cara sebagai berikut:

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
/*Template Name: Nama Template halaman*/?>

Jika cara di atas tidak berfungsi silahkan kombinasikan dengan plugin wp super cache yang bisa di download di sini. Kemudian upload dan aktifkan. Pastikan dalam file .htaccess yang ada di root direktori terdapat kode ini :

# BEGIN WPSuperCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
AddDefaultCharset UTF-8
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP_USER_AGENT} !^.*(Android|2.0\ MMP|240x320|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|hiptop|IEMobile|iPhone|iPod|KYOCERA/WX310K|LG/U990|MIDP-2.0|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|Playstation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|Windows\ CE|WinWAP).*
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz [L]

RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP_USER_AGENT} !^.*(Android|2.0\ MMP|240x320|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|hiptop|IEMobile|iPhone|iPod|KYOCERA/WX310K|LG/U990|MIDP-2.0|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|Playstation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|Windows\ CE|WinWAP).*
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html [L]
</IfModule>
# END WPSuperCache

Dan pastikan juga dalam file .htaccess yang ada di folder /wp-content/cache terdapat kode ini :

# BEGIN supercache
<IfModule mod_mime.c>
<FilesMatch "\.html\.gz$">
ForceType text/html
FileETag None
</FilesMatch>
AddEncoding gzip .gz
AddType text/html .gz
</IfModule>
<IfModule mod_deflate.c>
SetEnvIfNoCase Request_URI \.gz$ no-gzip
</IfModule>
<IfModule mod_headers.c>
Header set Vary "Accept-Encoding, Cookie"
Header set Cache-Control 'max-age=300, must-revalidate'
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html A300
</IfModule>
# END supercache

Kebetulan saya memakai cara yang terakhir yaitu menggunakan plugin wp super cache dan menyisipkan kode mod_gzip pada file index.php, single.php, page.php, archive.php, 404.php, dan search.php, dan alhamdulillah bisa berfungsi. Rata-rata halaman blog ini terkompress antara 70-80%. Di samping itu karena sudah terkompres ternyata cukup signifikan terhadap kecepatan loading blog ini. Untuk mengetahui apakah halaman web/blog kita sudah terkompress atau belum silahkan kunjungi situs ini online gzip test atau http_compression test.

Buat sobat-sobat yang punya cara lain tentang HTTP Compression monggo silahkan dishare disini biar kita bisa belajar bersama.

Update :

Alternatif lainnya untuk kompressi halaman jika server yang digunakan tidak mengaktifkan module mod_deflate atau mod_gzip anda bisa memakai teknik Zlib Compression, caranya silahkan baca postingan berikut ini : Mempercepat Loading WordPress dengan Zlib Compression.

Sumber referensi :

http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression
http://www.ethanandjamie.com/blog/43-web-dev-freebies/85-php-gzip-css-files
http://www.rismaka.net/2009/06/mempercepat-loading-wordpress-dengan-http-compression.html
http://www.ibloomstudios.com/articles/php_css_compressor/
http://www.linuxjournal.com/article/6802
http://www.whatsmyip.org/http_compression/phpgzip/
http://www.http-compression.com/#about_http_compression

Mudah-mudahan artikel tentang Menghemat Quota Bandwidth dengan HTTP Compression ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Customisasi Tampilan Tag Cloud
  2. Cara Mengganti Sebagian Isi Postingan Dengan SQL
  3. Cara Menghapus Post Revision Dari Database
  4. Optimasi File wp-config.php
  5. Cara Mengoptimasi Gambar Theme
  6. Cara Setting Permalink WordPress Untuk SEO, Performa dan Usability
  7. Cara Menggabungkan File CSS WordPress
  8. Cara Membuat Breadcrumb Di WordPress
  9. Mempercepat Loading WordPress Dengan DB Cache Reloaded
  10. Cara Mudah Menuliskan Karakter Khusus
  1. 9-12-2009 at 06:53 | #1

    waduh mas, kok saya tetep gak ngerti….

    gatek banget saya, padahal blog saya hosting berbayar….

    duh.. duh… mohon pengajarannya terus ya mas,, saya bakal sering2 mampir kesini…

    Reply

    cah ndeso Reply:

    @macan putih mungil, harus itu Mas/Mbak/Pak/Bu/Pakdhe/Budhe/Eyang Kakung/Eyang Putri.

    Harus sering2 maen kesini biar bisa nyuusss kayak Om Alwi. Tul ndak Om? .

    Reply

    Pecinta Kuliner Reply:

    @cah ndeso, Om dan tante-nya belom kesebut, Mas Adi .

    Reply

    KangBoed Reply:

    @Pecinta Kuliner, waaaaaaaaaakakakakakkak

    cah ndeso Reply:

    @KangBoed, hehhehehe….. .

    Batavusqu Reply:

    @cah ndeso, ncang/ncng/nyak/babe/abang/none aye belum disebut juga tuh

    KangBoed Reply:

    @KangBoed, RAIHLAH “JATI DIRI MANUSIA”.. untuk

    MENGEMBALIKAN JATI DIRI BANGSA INDONESIA

    Salam Cinta Damai dan Kasih Sayang ‘tuk Sahabatku terchayaaaaaank
    I Love U fullllllllllllllllllllllllllllllll

    KangBoed Reply:

    @Pecinta Kuliner, Kemana neh emoticoon nyeeeeee

    cah ndeso Reply:

    @KangBoed, diumpetin dulu kayaknya Kang :(

    Batavusqu Reply:

    @Pecinta Kuliner, em nya lagi ee

    KangBoed Reply:

    @KangBoed, waaakakakakkk tingkatannya jadi TURUN

    KangBoed Reply:

    @Pecinta Kuliner, hehehehe emoticonnya hilang

    Pecinta Kuliner Reply:

    @KangBoed, dalam rangka ngirit bandwith keknya seh hihihi .

    KangBoed Reply:

    @Pecinta Kuliner, pertamaaaaaaaaaaaaxz

    Pecinta Kuliner Reply:

    @KangBoed, pertamaxxx darimana seh??

    KangBoed Reply:

    @KangBoed, pokokeee pertamaaaaaaaaaaaaaxxzz..

    cah ndeso Reply:

    @Kang Boed, iyuk dah Kang. Seng penting masih tetep muyuuusss buat ngomeng.

    tapi ngemeng2 ini ngomeng apa nyepam yak?

    Dangstars Reply:

    saya sebut nih

    Dangstars Reply:

    pasti ngilernih

    Reply

    Dangstars Reply:

    ngilwr apaan

    Reply

    Dangstars Reply:

    rame iki

    Reply

    Dangstars Reply:

    duh sukses

    Reply

  2. 9-12-2009 at 08:44 | #2

    ijin mengamankan keduaaaxxsss nyuplik dikit dari Mas Alamendah .

    Reply

    Amink Reply:

    @cah ndeso,
    nyempil dikit akhh…

    Reply

    KangBoed Reply:

    @Amink, ikutam nyempil

    Reply

    cah ndeso Reply:

    @KangBoed, woookksssss

    Batavusqu Reply:

    @cah ndeso, bonceng

    KangBoed Reply:

    @cah ndeso, nebeng juga

    Dangstars Reply:

    aman dong

    Reply

  3. 9-12-2009 at 08:44 | #3

    ijin mengamankan yang ketigaaaaxxxxss

    Reply

    Amink Reply:

    @cah ndeso, sekali lagi…nebeng dikit akhh….

    Reply

    KangBoed Reply:

    @Amink, kacugaaaaaaaaaaaxz

    Reply

    cah ndeso Reply:

    @KangBoed, klo disini kabarapaxxss yak?

    Pecinta Kuliner Reply:

    @cah ndeso, koxxz padaxz zenegxznya teriaxxzz ??

    KangBoed Reply:

    @cah ndeso, pokoke tarik maaaaaaaaaang

    Dangstars Reply:

    jangan sakit

    Dangstars Reply:

    kaugak sakitt

    Dangstars Reply:

    sakit pisan kacugak

    Dangstars Reply:

    aman pastinya

    Reply

  4. 9-12-2009 at 08:44 | #4

    keempaaaxxsss

    Reply

    Amink Reply:

    @cah ndeso, masih bisa kan….geser dikit dung Om…

    Reply

    KangBoed Reply:

    @Amink, kaopaaaaaaxz

    Reply

    Pecinta Kuliner Reply:

    @Amink, atuh jadinya kaopaaxxz satengaaxxzz dongxxz..

    Reply

    KangBoed Reply:

    @Pecinta Kuliner, kelimaaaaaaaaaaaaxxzzzzz

    Dangstars Reply:

    wah ada satyongah

    Dangstars Reply:

    setengah

    Dangstars Reply:

    lagi yah

    Dangstars Reply:

    mantap

    Reply

    Dangstars Reply:

    mantep tenan

    Reply

  5. 9-12-2009 at 08:45 | #5

    trus kelimaaaxxssss

    Reply

    cah ndeso Reply:

    @cah ndeso, abis kelimaaxxss trus crut crut cruttt…..lemes dah .

    kuomplit banget dah trik-e. Makasih Om dah dishare disini. maju terus pantat eh..pantang munduuuurrr. Biar bisa tetep elegan dan maknyuuussss dah blog-e.

    Reply

    Pecinta Kuliner Reply:

    @cah ndeso, hihihi… .

    Reply

    KangBoed Reply:

    @Pecinta Kuliner, weleh weleh enda ikutan ah

    cah ndeso Reply:

    @KangBoed, wisduh…tumben Kang Boed ndak ikutan. Biasane nomor atu .

    Pecinta Kuliner Reply:

    @KangBoed, lagi JA’IM [red-jaga iman] xixixixi .

    KangBoed Reply:

    @KangBoed, Kelimaaaaaxxxzzz nomer SATU..

    KangBoed Reply:

    @KangBoed, ncrut,, ncruuutnya engga tega.. weeekekekekkk

    Dangstars Reply:

    he he he

    Dangstars Reply:

    walah walah

  6. 9-12-2009 at 08:49 | #6

    Tapi ngemeng2 … KasKus emo-nya diilangin yak Om? skarang kok “plunthus” hehehheee .

    Justru dengan begini bisa lebih irit pertamaaxxsssnya buat mesin emo.

    mPISSS dah Om. Saluuuutt

    Reply

    Alwi Reply:

    @cah ndeso, Diselang seling lg trial setiap postingan dg 150 komentar dan masing menggunakan emot setelah di deactivate (sementara) terdapat pengurangan ukuran file kr 60 kb trus deactivate avatar pada thread comment, lumayan juga penyusutannya. jadi biar loading tetap cepat dan enak buat battle komenx……

    Reply

    KangBoed Reply:

    @Alwi, hehehe Mangstaaaaaaaab

    Reply

    cah ndeso Reply:

    @KangBoed, top markotop dah buat Om Alwi

    KangBoed Reply:

    @cah ndeso, Mangstaaab Maknyuuusss Suraantaaaab

    KangBoed Reply:

    @Alwi, sayangnya terlalu berat bagi saya.. :cry:

    Reply

    cah ndeso Reply:

    @KangBoed, beyat gimana Kang? :(

    KangBoed Reply:

    @cah ndeso, berat ngertiinnya tuh

    KangBoed Reply:

    @Alwi, nasib OON surOON

    Reply

    cah ndeso Reply:

    @KangBoed, ya nasiiiibbb…yaa…nasiiibbb.
    Betapaaaa…malang nasibku…..Kang Dadaaaangg…tak datang datang… ooooooo .

    KangBoed Reply:

    @cah ndeso, Kang DADANG nuju NYAWER

    KangBoed Reply:

    @Alwi, Gaptek Habies :cry:

    Reply

    cah ndeso Reply:

    @KangBoed, hiks…hikksssss…huuwaaaaaaaaa

    KangBoed Reply:

    @cah ndeso, waaaaakakakakakkk

    KangBoed Reply:

    @Alwi, Bahasa mesin wadow

    Reply

    cah ndeso Reply:

    @KangBoed, mesin cuci kali yak Kang. hihihihiiii

    KangBoed Reply:

    @cah ndeso, pokoknya jangan mesin mesin yaaak

    KangBoed Reply:

    @Alwi, btw MAKASIH BANYAK MAS ALWI :lol: :lol: :lol:

    Reply

    cah ndeso Reply:

    @KangBoed, sama-sama Kang Boed

    KangBoed Reply:

    @cah ndeso, HATUR NUHUN PISAAAANG

    cah ndeso Reply:

    @KangBoed, doohh…pisangnya kluar dah :roll:

    KangBoed Reply:

    @Alwi, :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:

    Reply

    Dangstars Reply:

    salut pisan

    Reply

  7. 9-12-2009 at 09:05 | #7

    wadaw…saya bingung…
    tapi kayaknya niat banget berbaginya…
    salut…
    salam mas…

    Reply

    cah ndeso Reply:

    @Berry Devanda, namanya berbagi ya memang harus full penuh niat. Jadi ndak cuman setengah2 sob .

    Tul ndak Om Alwi?

    Reply

    KangBoed Reply:

    @cah ndeso, :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:

    Reply

    Pecinta Kuliner Reply:

    @cah ndeso, nge-wakilin om alwi : BETUL mas adi….

    Reply

    cah ndeso Reply:

    @Pecinta Kuliner, nyundul up up mode =on .

    KangBoed Reply:

    @cah ndeso, ssssttt entu nyundul apaaan

    Dangstars Reply:

    Om Alwi tea

    Reply

  8. 9-12-2009 at 09:24 | #8

    Bahasa mesinnya kerennn…..
    kaga ngarti euy…..

    two thumbs up lah buat kang Alwi…

    Reply

    Alwi Reply:

    @Amink, Saya kadang jg pusing kalau ngoprek java, css, atau php tapi kalau berhasil legaaaaaaaaaaaaaa bangeeeeeeeeet

    Reply

    KangBoed Reply:

    @Alwi, SEPULUH JEMPOL :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:

    Reply

    cah ndeso Reply:

    @KangBoed, mengacungkan 21 jari buat Om Alwi . . .

    Amink Reply:

    @cah ndeso, wahh..lebih satu tuhh….

    cah ndeso Reply:

    @Amink, wkwkkwkwkwwkk ….. sensor mode=on .

    KangBoed Reply:

    @cah ndeso, jari dan jempol tangan di goyang

    Dangstars Reply:

    waw jangan ah

    Reply

  9. 9-12-2009 at 10:34 | #9

    Pecinta Kuliner mah mo ngirimin Kue ama Masakan aja ah, biar Mas Alwi nyang ntar otak-atik website punya PK xixixxi.. soale kalo aku yg musti otak-atik keknya gak iso… . padahal segitu guamblang nya Mas Alwi ngasih pencerahan…

    Reply

    Alwi Reply:

    @Pecinta Kuliner, Makasih kiriman kuenya … heeee.. gak papa sih diotak atik yg penting dibackup dulu baik databes/kode2 php-nya kalau eror bs dikembalikan ke semula

    Reply

    KangBoed Reply:

    @Alwi, :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:

    hihihihih ampuuuuuuuuuun

    Reply

    cah ndeso Reply:

    @KangBoed, lemes dah klo gini :(

    Pecinta Kuliner Reply:

    @cah ndeso, napa lemes mas adi??

    Pecinta Kuliner Reply:

    @Alwi, sudah dicoba dan hasilnya monggo diliat mas….
    SOS!

    Reply

    Pecinta Kuliner Reply:

    @Alwi, untung masih inget kode php-nya.. udah okeh lagi sekarang mah… .

    Reply

    KangBoed Reply:

    @Pecinta Kuliner, woookeeeeeeeeeeeh

    Dangstars Reply:

    terimakasih deh

    Reply

  10. 9-12-2009 at 10:49 | #10

    Mas Alwi, kalo di .htaccess-nya belom ada kode yg mas alwi posting di qoute ahir (meski udah make plugin wp-super-cache).. bisa kita copas secara manual gak??

    Reply

    Alwi Reply:

    @Pecinta Kuliner, Kalau pakai plugin wp-super-cache sebenarnya otomatis akan terbentuk kode2 itu pd .htaccess-nya tp harus di writable atau change permission diset ke 777 alternatif lain dg kopi kode scr manual

    Reply

    Pecinta Kuliner Reply:

    @Alwi, ooo gitu ya [mode on: oon = gak mudeng] … .

    Reply

    KangBoed Reply:

    @Pecinta Kuliner, hehehe apa lagi saya

    Dangstars Reply:

    pastinya

    Dangstars Reply:

    sudah eh

    Reply

Comment pages
1 2 3 9 1620
2+9=? (Wajib diisi)