Melengkapi postingan saya sebelumnya Cara Membuat Page Navigation tanpa Plugin, kali ini saya akan mengulas tentang cara memperkecil file html, inline javascript dan CSS tanpa plugin. Masih berkaitan dengan optimasi dan peningkatan performa wordpress, selain kita dapat meminimalisir http request atau menyatukan image dalam CSS Sprite yang pernah saya tulis sebelumnya, pengurangan plugin juga memiliki pengaruh yang cukup signifikan.
Minify HTML, Javascript dan CSS pada dasarnya adalah memperkecil output file-file tersebut sehingga lebih cepat didownload dan ditampilkan pada browser. Implementasinya pada file-file itu sendiri pada dasarnya sederhana dengan menghilangkan white space, argument atau comment yang ada pada html, javascript ataupun CSS tersebut. Fungsi minify ini sendiri sebetulnya ada pada plugin WP-Minify atau jika sobat menggunakan plugin WP Total Cache, sobat juga dapat mengaktifkan fitur minify ini. Namun sekarang kita dapat memanfaatkan fungsi minify yang sama tanpa plugin dan caranyapun sangat sangat sangat mudah sekali banget! 😆
<?php
class WP_HTML_Compression
{
// Settings
protected $compress_css = true;
protected $compress_js = true;
protected $info_comment = true;
protected $remove_comments = true;
// Variables
protected $html;
public function __construct($html)
{
if (!empty($html))
{
$this->parseHTML($html);
}
}
public function __toString()
{
return $this->html;
}
protected function bottomComment($raw, $compressed)
{
$raw = strlen($raw);
$compressed = strlen($compressed);
$savings = ($raw-$compressed) / $raw * 100;
$savings = round($savings, 2);
return '<!--HTML udah dikompress, lumayan tuh berkurang '.$savings.'%. Tadinya '.$raw.' bytes, sekarang cuma '.$compressed.' bytes-->';
}
protected function minifyHTML($html)
{
$pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
$overriding = false;
$raw_tag = false;
// Variable reused for output
$html = '';
foreach ($matches as $token)
{
$tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
$content = $token[0];
if (is_null($tag))
{
if ( !empty($token['script']) )
{
$strip = $this->compress_js;
}
else if ( !empty($token['style']) )
{
$strip = $this->compress_css;
}
else if ($content == '<!--wp-html-compression no compression-->')
{
$overriding = !$overriding;
// Don't print the comment
continue;
}
else if ($this->remove_comments)
{
if (!$overriding && $raw_tag != 'textarea')
{
// Remove any HTML comments, except MSIE conditional comments
$content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content);
}
}
}
else
{
if ($tag == 'pre' || $tag == 'textarea')
{
$raw_tag = $tag;
}
else if ($tag == '/pre' || $tag == '/textarea')
{
$raw_tag = false;
}
else
{
if ($raw_tag || $overriding)
{
$strip = false;
}
else
{
$strip = true;
// Remove any empty attributes, except:
// action, alt, content, src
$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
// Remove any space before the end of self-closing XHTML tags
// JavaScript excluded
$content = str_replace(' />', '/>', $content);
}
}
}
if ($strip)
{
$content = $this->removeWhiteSpace($content);
}
$html .= $content;
}
return $html;
}
public function parseHTML($html)
{
$this->html = $this->minifyHTML($html);
if ($this->info_comment)
{
$this->html .= "\n" . $this->bottomComment($html, $this->html);
}
}
protected function removeWhiteSpace($str)
{
$str = str_replace("\t", ' ', $str);
$str = str_replace("\n", '', $str);
$str = str_replace("\r", '', $str);
while (stristr($str, ' '))
{
$str = str_replace(' ', ' ', $str);
}
return $str;
}
}
function wp_html_compression_finish($html)
{
return new WP_HTML_Compression($html);
}
function wp_html_compression_start()
{
ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');
?>
Cukup hanya dengan satu langkah yaitu: Copy script di atas atau download Script pada link ini Kode Minify, tambahkan pada file functions.php di directory tema yang digunakan dan… selesai deh! Dengan menambahkan fungsi minify ini, kini source file html, inline javascript dan css sudah dikompress sehingga ukurannyapun menjadi lebih kecil. Lumayan’kan untuk semakin meminimalisir filesize dan mempercepat loading blog kita. Untuk melihat apakah Minify tanpa plugin ini berhasil, silahkan view source blog sobat dan scroll sampai akhir. Pada ujung halaman akan tertulis:
<!–HTML udah dikompress, lumayan tuh berkurang …%. Tadinya …bytes, sekarang cuma … bytes–>.
Nah segitu saja, benar-benar mudah bukan? Silahkan dicoba dan mulailah mengurangi plugin untuk meningkatkan performa blog sobat. Coba juga Membuat Page Navigation dan Related Post, artikel berkaitan tanpa menggunakan plugin atau untuk plugin cukup keren buatanku sendiri, coba dong Random Post, Mp3 Player, + Tombol Share 3 in 1 deh pokoknya. OK deh.., mudah-mudahan bermanfaat dan Happy Blogging! 😀
itu kan buat wordpress mas, gimana kalau kita yang buat CMS sendiri murni dari PHP+MySQL adakah saran artikel cara compressnya?
kebetulan saya lagi belajar buat CMS sendiri referensi dari algoritmanya wordpress saya ambil inti jalannya program hehe
Sebenarnya sama saja prinsip kerjanya kok, itu kan sama2 pake PHP. Jadi tinggal adaptasikan saja kodenya dengan CMS yang lagi dibikin
bang itu untuk blogspot atau WordPress?
Untuk wordpress ini gan…
maaf gan sudah saya coba error sih tidak, tapi tetap tidak ada perubahan ,nilai css dan js nya tetap sama
jumlah js jg bisa mempengaruhi, termasuk js eksternal dan yang berupa file
Saya sudah coba terapkan mas tapi ko malah jadi error yah saya mohon pencerahan gan !!
Tolong lebih jelas erornya spt apa? klo dipasang sesuai petunjuk seharusnya tak da masalah
MAS NARUH KODENYA DI BAGIAN MANA MAS. ATAS ATAU BAWAH MAS. MAKASIH
Di file functions.php bagian bawah saja, hanya menambah yg sudah ada