Mempercepat Loading WordPress dengan HTTP Compression

Submitted by rismaka on June 27, 2009 at 7:00 am Tags: , , , , , ,
64 Comments

file compressor

Pada pembahasan yang telah lalu telah dijelaskan sedikit mengenai dua macam kompresi HTTP (HTTP compression) yang bisa dilakukan pada file 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 peramban akan mengirimkan permintaan kepada server tempat web tersebut berada. Server kemudian akan merespon permintaan peramban dan mulai mencari file-file yang dibutuhkan. Jika file-file yang dibutuhkan telah ketemu, maka server akan mengirimkan file-file tersebut ke peramban untuk ditampilkan pada pengguna.

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 peramban, di situ terdapat jeda waktu menunggu bagi peramban untuk dapat menerima file HTML itu. Semakin besar ukuran file HTML yang diunduh, maka semakin lama pula jeda waktu menunggu bagi peramban 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 peramban. Peramban hanya akan menunggu sebentar saja sebelum mengunduh file HTML tersebut. Di samping itu karena file HTML-nya sudah dikompress oleh server, maka peramban 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.

Saat ini terdapat dua macam metode kompresi HTTP yang umum digunakan, yaitu (1) mod_deflate dan (2) 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 peramban 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 snippet berikut:

<?php
phpinfo();
?>

Kemudian save. Uploadlah file tersebut ke server yang kita gunakan. Terserah dimanapun direktorinya. Kemudian panggil-lah melalui peramban 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.

Beberapa macam metode kompresi yang umum digunakan

  1. Kompresi HTTP menggunakan mod_deflate

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

    # 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>

  2. Kompresi HTTP menggunakan mod_gzip

    Caranya adalah dengan menambahkan kode snippet berikut di bagian paling atas file html:

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

    atau:

    < ?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:

    < ?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:

    < ?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
*/ 

?>

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

Referensi:

This entry was writen by rismaka, The Admin, A part time blogger, Biochemist, and Energy Consultant in PT. BKA. More profile on Contact.

Search For:

64 Comments | Leave a respond | Back To Top

Leave a comment!