Home » Optimasi Wordpress » Menghemat Quota Bandwidth dengan HTTP Compression

Menghemat Quota Bandwidth dengan HTTP Compression

9 Dec. 2009 Alwi 222 comments

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

Artikel Yang Mungkin Berkaitan :

Comments (59)

Fauzie
9-12-2009 at 12:22 | #1
mantap infonya gan….
Reply
KangBoed Reply:12-12-2009 at 20:27
@Fauzie, ma kasih boooooosssss
Reply
Dangstars Reply:24-12-2009 at 17:44
top marketop
Reply
arkasala
9-12-2009 at 19:36 | #2
Supaya tidak terburu-buru bacanya, saya ijin print saja dulu Mas. Trims banget atas artikelnya ini yang tentunya ada hubungannya dengan kasus saya kemarin.
Reply
Alwi Reply:9-12-2009 at 21:11
@arkasala, Monggo Kang Yayat ntar hasil investigasinya bisa dishare yaaaa biar kita tambah pengalaman dg beberapa kejadian blog disuspen dg berbagai penyebabnya.
Reply
KangBoed Reply:12-12-2009 at 20:27
@Alwi, saya bagian terima hasil jadinya aja yaaa :lol:
Reply
Batavusqu
9-12-2009 at 21:11 | #3
Salam Takzim
mau laporan link sudah saya pasang atas nama Alwi dicek ya
Salam Takzim batavusqu
Reply
Alwi Reply:9-12-2009 at 21:20
@Batavusqu, Siap Gan ….
Reply
cah ndeso Reply:10-12-2009 at 01:50
@Alwi, mangkacih Kang Zipoer .
Reply
Amink Reply:10-12-2009 at 16:04
@cah ndeso, sama2 kang….
KangBoed Reply:12-12-2009 at 20:28
@Amink, sami sami
Pecinta Kuliner Reply:10-12-2009 at 18:51
@cah ndeso, kembali kascih mas adi…
cah ndeso Reply:11-12-2009 at 09:18
@Pecinta Kuliner, yang terakhir ….. keciaann deh saiya. hahahaaa
RifkyMedia™
9-12-2009 at 21:20 | #4
aduh salah masuk room,maaf gan……….:ngacir: <—-icon nya hilang
Reply
cah ndeso Reply:10-12-2009 at 01:50
@RifkyMedia™, hahhahhaa….terlanjur kebawa KasKus yak?
Reply
RifkyMedia™ Reply:10-12-2009 at 18:05
@cah ndeso, io gan..ini pasti gara gara pesta icon di thread sebelumnya huahahahahah!
Reply
KangBoed Reply:12-12-2009 at 20:28
@RifkyMedia™, piiiiiiiiiiiiissssssssss
ruang hati
9-12-2009 at 22:58 | #5
great trick, nice share ingin coba deh, thanks ya inpona
Reply
Amink Reply:10-12-2009 at 16:09
@ruang hati, you’r welcome…
Reply
KangBoed Reply:12-12-2009 at 20:28
@Amink, welcome
Reply
Tomi
10-12-2009 at 01:31 | #6
Semenjak ganti themes, saya jg pk mod_gzip dan sdkt kompress CSSnya serta upload gmbr di file hostingan.. Emg jd lebih ringan dan gak nyedowt BW hehehe..
Reply
cah ndeso Reply:10-12-2009 at 01:51
@Tomi, tuuhh khan…bener kan .
Reply
Pecinta Kuliner Reply:10-12-2009 at 18:59
@Tomi, makasih om Tomi, udah tukar pengalaman… :thumbsup:
Reply
KangBoed Reply:12-12-2009 at 20:29
@Pecinta Kuliner, iya sekalian dunk blog saya *mukka ngarep*
Reply
Nanang
10-12-2009 at 05:49 | #7
Walaupun ilmunya belum nyampe, saya coba pelajari sedikit2
Reply
Alwi Reply:10-12-2009 at 10:54
@Nanang, server tempat mas Nanang hosting sudah diset ke mode_gzip dan umumnya hostingan yg free rata2 sudah diset ke http kompression mode_gzip di server apachenya
Reply
KangBoed Reply:12-12-2009 at 20:29
@Alwi, kalau saya moed apa nyaaaak
Reply
Saung Web
10-12-2009 at 07:26 | #8
Wah tipsnya boleh nih.. cuman untuk blogspot. bisa gak yah
Reply
Alwi Reply:10-12-2009 at 10:52
@Saung Web, Untuk blogspot sudah otomatis aktif mod gzip yg ada diserver apachenya
Reply
KangBoed Reply:12-12-2009 at 20:30
@Alwi, siiiiiiiip
Reply
H
10-12-2009 at 12:23 | #9
kalo tampilan gambar kita matiin gimana? jadi cuma tampilan teks saja?
Reply
Alwi Reply:10-12-2009 at 16:55
@H, Itu malah lebih irit bandwidth dan loading super ngacir tapi tampilan jadi apa adanya …. bisa aja sih theme kita edit tampilan backround, frame, box dll dg unsur colour, border, dll dg kode2 CSS atau HTML tanpa gambar
Reply
Pecinta Kuliner Reply:10-12-2009 at 18:53
@Alwi, nah lho… jurus baru neh..
Reply
KangBoed Reply:12-12-2009 at 20:30
@Pecinta Kuliner, ngacir sampe kabuuuuuuuuuuurrrrrrrrrr
Amink
10-12-2009 at 16:58 | #10
Semangat sore…
siap2 mau pulang….
Reply
Alwi Reply:10-12-2009 at 17:13
@Amink, Hati2 di jalan yaaa……
Reply
KangBoed Reply:12-12-2009 at 20:31
@Alwi, jangan meleng yaaaaaaaa
Reply