Trik minify kode HTML menggunakan PHP

PHP · 17/04/18

Saya adalah seorang yang sangat memperhatikan performa website. Contohnya adalah blog ini. Meskipun saya harus mengorbankan desain tetapi saya cukup puas dengan kecepatan blog ini.

Ya, blog ini memang super simple 😁

Hampir 80% pengunjung blog ini dari perangkat seluler yang lebih mengutamakan konten dibandingkan desain web.

Nah, karena mayoritas pengunjung blog ini dari perangkat seluler, maka halaman web harus di-optimasi agar dapat diakses dengan cepat. Sebab kecepatan loading website menjadi salah satu faktor peringkat website di halaman hasil pencarian Google.

Selain itu, apalah gunanya jika tampilan menarik namun loadingnya sangat lambat jika di akses oleh pengguna seluler, bahkan lebih lambat dari siput berjalan. 😄

Blog ini telah saya optimasi secara maksimal dengan berbagai cara, salah satunya adalah memperkecil ukuran HTML. Meskipun tidak begitu terasa efeknya tapi paling tidak dapat membantu mengurangi ukuran halaman web sehingga TTFB (time to first byte) blog ini menjadi lebih kecil.

Berikut adalah kode PHP yang saya gunakan untuk me-minify kode HTML pada blog ini:

<?php
function minify($buffer)
{
    $protected_parts = array('<pre>,</pre>','<,>'); //Bagian yang tidak di-minify
    $extracted_values = array();
    $i = 0;

    foreach ($protected_parts as $part) {
        $finished = false;
        $search_offset = $first_offset = 0;
        $end_offset = 1;
        $startend = explode(',', $part);

        if (count($startend) === 1) $startend[1] = $startend[0];
        $len0 = strlen($startend[0]); $len1 = strlen($startend[1]);

        while ($finished === false) {
            $first_offset = strpos($buffer, $startend[0], $search_offset);

            if ($first_offset === false) $finished = true;
            else {
                $search_offset = strpos($buffer, $startend[1], $first_offset + $len0);
                $extracted_values[$i] = substr($buffer, $first_offset + $len0, $search_offset - $first_offset - $len0);
                $buffer = substr($buffer, 0, $first_offset + $len0).'$$#'.$i.'$$'.substr($buffer, $search_offset);
                $search_offset += $len1 + strlen((string)$i) + 5 - strlen($extracted_values[$i]);
                ++$i;
            }
        }
    }

    $buffer = preg_replace("/s/", " ", $buffer);
    $buffer = preg_replace("/s{2,}/", " ", $buffer);
    $replace = array('> <'=>'><', ' >'=>'>','< '=>'<','</ '=>'</');
    $buffer = str_replace(array_keys($replace), array_values($replace), $buffer);

    for ($d = 0; $d < $i; ++$d)
        $buffer = str_replace('$$#'.$d.'$$', $extracted_values[$d], $buffer);

    return $buffer;
}
?>

<?php ob_start("minify") ?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Minified HTML Page</title>
    </head>
    <body>
        Content Web
    </body>
</html>
<?php ob_end_flush() ?>

Perhatikan bagian kode pada baris ke empat. Itu adalah elemen tag HTML yang tidak di-minify. Jika tag <pre> dan </pre> ikut di-minify, maka kode yang tampil tidak akan rapi dan menjadi terkompres.

Cara menggunakannya kode PHP di atas adalah dengan memanggil fungsi minify:

<?php ob_start("minify"); ?>

dan meletakkannya di atas kode deklarasi dokumen <html> serta meletakkan kode: php

<?php ob_end_flush(); ?>

di bawah tag penutup </html> (perhatikan kode di atas secara menyeluruh).

Fungsi ini hanya untuk me-minify kode HTML, meskipun juga bisa untuk CSS namun tidak efektif. Untuk hasilnya silakan lihat kode sumber blog ini.