kompresi halaman html dengan php

Kompresi halaman html dengan php diperlukan untuk mempercepat loading website yang kalian buat, kenapa bisa? ya kompresi sangat diperlukan untuk memperkecil ukuran halaman yang diload oleh browser yang diakses oleh user. Dengan ukuran file yang lebih kecil secara otomatis website akan semakin cepat ditampilkan/load pada sebuah browser. Selain untuk meminimalkan ukuran website kompresi halaman html juga dapat untuk sedikit meminimalisir kode – kode html, mengapa? karena halaman html yang di tampilkan pada browser adalah file tanpa space/spasi, kenapa bisa? ya kompresi yang akan kita gunakan adalah untuk menghilangkan space/spasi, enter yang membuat halaman menjadi sedikit lebih besar.

Apakah kompresi pada halaman html tidak akan berdampak pada sisi scripting seperti javascript, css dll. tentu saja akan berdapak bila javascript dan css kalian buat didalam halaman html tersebut (ada kemungkinan crash). Lalu bagaimana solusinya? kalian harus memisahkan sendiri kode javascript pada sebuah file kemudian kalian panggil pada sisi html (itu rekomendasi saya).

untuk mencobanya kalian buat 1 file php seperti dibawah ini.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
    <head>
        <title>HTML Compress</title>
        <link href=”style.css” rel=”stylesheet” type=”text/css”/>
    </head>
    <body>
        <div id=”wrap”>
            <div id=”header” class=”clear”>
                <h1>HTML Compress</h1>
            </div>
            <div id=”left” class=”left”>
                <div id=”box” class=”box”>
                    <h2>Blok kiri</h2>
                    <div class=”box_content”>
                        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                    </div>
                </div>
            </div>
            <div id=”right” class=”right”>
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet  
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
            </div>
            <div class=”clear”></div>
            <div id=”footer” class=”footer”>
                &copy;2012 <a href=”#”>www.namawebsite.com</a> Alright reversed
            </div>
        </div>        
    </body>
</html>

Kemudian buat juga 1 file css, beri nama style.css

body{background-color:#F5F5F5;font:normal 11px Arial,Helvetica,Sans-serif;
                color:black;}
.clear{clear:both;}   
   
#wrap{margin:0 auto; width: 980px;}
#wrap .header h1{font-size: 16px;}
#wrap .left{float:left;width: 300px;margin-right:5px;}
.left .box{width:100%;border:1px solid #999;}
.box h2{font-size:12px;background-color:#CCC;margin:0;padding: 5px;}
.box .box_content{padding:5px 3px;}           
#wrap .right{float: left;width: 670px;margin-left:5px;}
#wrap .footer{text-align:right;font:normal 11px Arial, Helvetica, Sans-serif;}

Buat fungsi php untuk melakukan kompresi file html yang akan di tampilkan pada sisi browser

function compress($buffer){
        $search = array(‘/>[^S ]+/s’,’/[^S ]+</s’,’/(s)+/s’);  // regex untuk mencari karakter white space
        $replace = array(‘>’,'<‘,’\1’);
        $buffer = preg_replace($search, $replace, $buffer);  // untuk mereplace hasil dari regex
        return $buffer;
}

 

full code seperti berikut

<?php 
    function compress($buffer){
        $search = array(‘/>[^S ]+/s’,’/[^S ]+</s’,’/(s)+/s’);
        $replace = array(‘>’,'<‘,’\1’);
        $buffer = preg_replace($search, $replace, $buffer);
        return $buffer;
    }
     
    ob_start(“compress”);  // memanggil buffer header, sekaligus menjalankan fungsi compress
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
    <head>
        <title>HTML Compress</title>
        <link href=”style.css” rel=”stylesheet” type=”text/css”/>
    </head>
    <body>
        <div id=”wrap”>
            <div id=”header” class=”clear”>
                <h1>HTML Compress</h1>
            </div>
            <div id=”left” class=”left”>
                <div id=”box” class=”box”>
                    <h2>Blok kiri</h2>
                    <div class=”box_content”>
                        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                    </div>
                </div>
            </div>
            <div id=”right” class=”right”>
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
            </div>
            <div class=”clear”></div>
            <div id=”footer” class=”footer”>
                &copy;2012 <a href=”#”>www.namawebsite.com</a> Alright reversed
            </div>
        </div>         
    </body>
</html>
<?php ob_end_flush(); ?> // mengembalikan buffer ke posisi semula alias kosong

 

OK sekarang kalian dapat mengukur ukuran file sebelum dan sesudah di kompres dengan menggunakan Firebug, untuk yang tidak mau repot membuat fungsi sendiri php sebenarnya juga sudah menyediakan fungsi untuk melakukan kompresi dengan mengganti ob_start(“compress) menjadi ob_start(“ob_gzhandler”).

 

Semoga bermanfaat.

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!