Mempercepat Loading WordPress dengan HTTP Compression

Submitted by rismaka on June 27, 2009 – 7:00 am44 Comments
This entry was writen by Rismaka, The Admin, Biochemist (sometimes) and Data Management Staff of PT. Ex-WF. [Contact: rismaka[at]rismaka.net]

file compressorPada pembahasan yang telah lalu telah dijelaskan sedikit mengenai dua macam kompresi HTTP (HTTP compression) yang bisa dilakukan pada file Cascading StyleSheets (CSS) . Di situ dijelaskan mengenai cara mengkompres file CSS menjadi lebih kecil ukuran file-nya. Jika file CSS dapat kita mampatkan ukuran file-nya, maka file html pun dapat juga kita kompress dengan metode yang sama. Di pembahasan ini akan dijelaskan mengenai dua metode kompresi HTTP yang umum digunakan. Namun sebelumnya mari kita mengulas sedikit mengenai pentingnya kompresi terkait performa atau kecepatan loading suatu situs/blog.

Saat kita mengakses sebuah halaman website/blog, maka browser (peramban) akan mengirimkan permintaan kepada server tempat web tersebut berada. Server kemudian akan merespon permintaan browser dan mulai mencari file-file yang dibutuhkan. Jika file-file yang dibutuhkan telah ketemu, maka server akan mengirimkan file-file tersebut ke browser untuk ditampilkan pada kita.

HTTP request dan respon server pada file yang tidak terkompresi

Gambar 1. HTTP request dan Response tanpa kompresi

Katakanlah file tersebut berupa file HTML yang berukuran 100 KB. Setiap kali file html tersebut dicari oleh server dan kemudian dikirim ke browser, di situ terdapat jeda waktu menunggu bagi browser untuk dapat menerima file HTML itu. Semakin besar ukuran file HTML yang diunduh, maka semakin lama pula jeda waktu menunggu bagi browser agar dapat mengunduh file HTML tersebut. Belum lagi waktu yang dibutuhkan untuk mengunduh file sebesar 100 KB, tentunya itu bukanlah hal yang efektif dan efisien.

HTTP request dan respon server pada file yang terkompresi

Gambar 2. HTTP request dan Response dengan menggunakan kompresi

Berbeda halnya jika file HTML tersebut dikompres terlebih dahulu oleh server sebelum dikirim ke browser. Browser hanya akan menunggu sebentar saja sebelum mengunduh file HTML tersebut. Di samping itu karena file HTML-nya sudah dikompress oleh server, maka browser pun tak perlu berlama-lama dalam mengunduhnya. Hasilnya? Kita dapat berselancar dengan nyaman menggunakan provider terlemot sekalipun semacam IM2 broom dan Smart :D (kenyamanan di sisi pengguna), dan menghemat bandwidth di sisi pemilik website/blog.

Beberapa macam metode kompresi yang umum digunakan

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.

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 sniplet berikut:

1
2
3
<?php
phpinfo();
?>

Kemudian save. Uploadlah file tersebut ke server yang kita gunakan. Terserah dimanapun direktorinya. Kemudian panggil-lah melalui browser yang kita gunakan. Contoh: http://nama-domain.com/direktori/info.php

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

Kompresi HTTP menggunakan mod_deflate

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

1
2
3
4
5
6
7
# kompress semua text dan html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# atau kompress berdasarkan ekstensi file:
<files *.html *.php *.css>
SetOutputFilter DEFLATE
</files>

Kompresi HTTP menggunakan mod_gzip

Caranya adalah dengan menambahkan kode sniplet berikut:

1
2
3
<?php
ob_start( 'ob_gzhandler' );
?>

atau

1
2
3
4
5
6
7
8
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
  ob_start("ob_gzhandler");
}
else {
 ob_start();
}
?>

Tambahkan/sisipkan salah satu kode tersebut di atas file HTML. Untuk pengguna WordPress, kode di atas bisa diletakkan di bagian paling atas header.php. Contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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>

Perlu diperhatikan, bahwasanya penggunaan kode mod_gzip di atas YANG DISISIPKAN DI BAGIAN ATAS HEADER.PHP adalah khusus bagi pengguna theme yang sederhana (tanpa template halaman). Saya sudah pernah mengulas tentang cara membuat template halaman.

Jika kita memakai template halaman (page template), maka tidak direkomendasikan untuk menyisipkan kode mod_gzip di bagian header.php. Karena akan merusak kompresi. Solusinya 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:

1
2
3
4
5
6
7
8
9
10
11
12
<?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
  ob_start("ob_gzhandler");
}
else {
 ob_start();
}

/*
Template Name: Nama Template halaman
*/

?>

Kesimpulan

Sangat direkomendasikan untuk mengompres halaman website/blog kita demi kenyamanan pengunjung. Tentunya kita senang seandainya blog kita terasa cepat jika diakses, bukan?! Cara yang terbaik dan termudah untuk mengompress adalah dengan menggunakan mod_gzip. Mungkin anda ingin tahu perbandingan ukuran halaman sebelum dan sesudah dikompres. Untuk mengeceknya, silahkan cek situs/blog anda di online gzip test, atau dengan menggunakan addons firefox seperti Web Developer Toolbar dan Live HTTP Headers. Semoga bermanfaat.

Referensi:

http://www.desilva.biz/php/zlib.html
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.ibloomstudios.com/articles/php_css_compressor/

Artikel yang berhubungan:

  1. HTTP Request, Faktor Paling Utama Penentu Performa Web
  2. Cascading StyleSheet (CSS) dan 8 Tips Optimasinya
  3. Tingkatkan Kecepatan Website dengan Memilih Server yang Tepat
  4. Mempercepat Browsing Internet Explorer, Mozilla Firefox, dan Opera
  5. 6 Tips Memaksimalkan Kecepatan Loading Blog WordPress.Com
  6. Meredirect RSS feed WordPress ke Feedburner
  7. Optimasi JavaScript (1) : Pendahuluan

Berlangganan Artikel

Dengan berlangganan, anda akan dikirim artikel terbaru blog ini secara lengkap. Masukkan alamat email anda, kemudian tekan tombol subscribe:

Cari Artikel

Jika tidak mendapatkan informasi yang diinginkan, anda bisa manfaatkan mode pencarian berikut ini:
Next Post: »
« :Prev Post

44 Comments »

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.