HTTP Gzip Compression Untuk Mengoptimalkan Kecapatan Load Halaman Blog

By | May 4, 2010

Jika semua tips optimisasi pada postingan sebelumnya telah anda lakukan semua, maka langkah selanjutnya yang saya sarankan adalah dengan mengaktifkan HTTP Gzip Compression. HTTP Gzip Compression bekerja dengan konsep mengkompresi ukuran halaman web/blog sebelum dikirim (diunduh) ke browser, prosesnya bisa diskenariokan sebagai berikut:

Browser melakukan request ke server (misal saja request ke http://www.masedi.net/index.html), kemudian server me-response dengan memberikan response kode 200, yang artinya halaman yang diminta oleh browser ditemukan dan server siap untuk mengirim data-data pada halaman tersebut (text, HTML, image, etc). Umpamakan saja, semua data pada halaman tersebut yang akan dikirim ke browser memiliki total ukuran sebesar 100 KB, akibatnya proses pengiriman data akan berjalan lambat alias kecepatan load halamannya lambat (tergantung koneksi inet juga sich :D ).

Nah, untuk mengatasi hal tersebut kita bisa memanfaatkan HTTP Gzip Compression. Maka, skenario diatas akan sedikit berubah seperti ini:

Setelah server menemukan file yang diminta oleh browser, selanjutnya yang dilakukan adalah mengecek apakah browser tersebut mendukung kompresi Gzip (informasi ini dikirim oleh header browser dengan parameter, Accept-encoding: Gzip), jika IYA maka server akan mengkompresi (zip) halaman yang diminta tersebut baru kemudian mengirimnya ke browser, dan selanjutnya browser akan me-dekompres (unzip) halaman yang diterimanya dari server. Dengan adanya kompresi ini halaman yang sebelumnya berukuran 100 KB bisa turun hanya menjadi 10 KB saja, jadi proses load halamannya akan lebih cepat bukan? Artikel selengkapnya silakan baca di How To Optimize Your Site With GZIP Compression.

Penting: Optimisasi HTTP Gzip Compression hanya berjalan pada server (hosting) yang memiliki salah satu module (Apache server) berikut mod_deflate atau mod_gzip yang aktif. Untuk mengetahui apakah salah satu module tersebut aktif pada server anda, gunakan trick berikut:

1. Buka text editor favorit anda (Notepad++ recommended! :D )
2. Buatlah file baru kemudian simpan dengan nama serverinfo.php
3. Pada file tersebut tuliskan script Php berikut ini:

< ?php
phpinfo();
?>

4. Save, lalu upload ke root direktori hosting anda.
5. Akses file tersebut melalui web browser (domainanda/serverinfo.php)
6. Kemudian carilah kata “Zlib” (tanpa tanda kutip), jika anda menemukan seperti gambar dibawah, Selamat sob!!! kemungkinan besar server anda memiliki module mod_deflate yang telah aktif.

Zlib mod_deflate

Langkah selanjutnya, mengaktifkan Gzip compression pada web/blog anda. Kita bisa menggunakan dua cara, yaitu dengan menambahkan kode .htaccess atau dengan kode PHP.

1. Jika hosting anda mengizinkan file .htaccess, buatlah file dengan nama .htaccess, kemudian ketik kode berikut ini:

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml  application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml  application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript  application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf  application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifmodule>
# removes some bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent


# Other Compression (Gzip)
<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 handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifmodule>
# END Compression

Code courtesy of: Google Support Forum.

untuk pengguna WordPress, letakkan kode tersebut setelah baris # END WordPress.

2. Jika anda tidak dapat membuat file .htaccess, bisa mencoba dengan menggunakan kode PHP berikut ini:

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

Pasang kode php tersebut disetiap awal halaman website anda (dibagian paling atas sebelum <!DOCTYPE ...). untuk pengguna WordPress, kode tersebut cukup anda letakan di bagian atas halaman header.php themes saja, sebelum <!DOCTYPE ....

code courtesy of: BetterExplained.com.

Tricky: Bagi pengguna WordPress, anda gak perlu susah-susah mempersulit hidup dengan menambahkan kode-kode diatas secara manual. Plugin WP Super Cache akan menyelamatkan diri anda dari kesusahan yang mungkin bisa berlarut-larut ini :lol: Silakan download plugin WP-Super-Cache kemudian aktifkan! Untuk setingan Super Cache Compression: Enabled.

O ya, Apakah pekerjaan kita diatas sudah membuahkan hasil? untuk mengetahui hailnya anda bisa mengecek dengan Tools Gzip-Deflate Compression Test berikut ini:

- http://aruljohn.com/gziptest.php
- http://www.gidnetwork.com/tools/gzip-test.php
- http://www.whatsmyip.org/http_compression/

Contoh hasil test terlihat pada gambar berikut:

Halaman web tanpa HTTP Gzip Compression
Tanpa Gzip compression.
 
Halaman web dengan HTTP Gzip Compression
Dengan Gzip compression.

Dari hasil eksperimen saya setelah matimatian (karena gak mudeng biar jadi mudeng) menerapkan tips-tips yang telah saya sebutkan diatas, sedikit memberikan hasil yang lumayan. Kata mbah Google, page load speed halaman blog saya mengalami peningkatan, dari 15 detik menjadi 9 detik :lol: :mrgreen:

site speed sebelum optimisasi
Page load speed sebelum optimisasi.
site speed setelah optimisasi
Page load speed setelah optimisasi :D

Selamat mencoba dan bereksperimen, semoga hasilnya memuaskan sob :D

VN:F [1.9.13_1145]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.13_1145]
Rating: 0 (from 0 votes)

Similar Keywords:

cara compress php, cara gzip, cara mengaktifkan gzip, htaccess menambahkan gzip, web compression server

20 Comments

excalibur on April 18, 2011 at 14:41.

Artikel yg sangat lengkap dan mencantumkan Code Courtesy !!! Salut !! Keep sharing bro :)

VA:F [1.9.13_1145]
Rating: 0.0/5 (0 votes cast)
VA:F [1.9.13_1145]
Rating: 0 (from 0 votes)

Reply

Lukman on January 10, 2011 at 19:55.

kedua cara tersebut digunakan keduanya atau pilih salah satu?

VA:F [1.9.13_1145]
Rating: 0.0/5 (0 votes cast)
VA:F [1.9.13_1145]
Rating: 0 (from 0 votes)

Reply

MasEDI on January 11, 2011 at 21:29.

@Lukman: coba salah satu dulu bro

VN:F [1.9.13_1145]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.13_1145]
Rating: 0 (from 0 votes)

Reply


Leave Your Comment

Your email will not be published or shared. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge