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! 😀
Kalo sudah pake plugin, apakah bakalan bentrok ?
kalo ada update, mohon update untuk taun 2021 ini dong kak
Ya ga bakalan, kan tiap plugin beda fungsi, kecuali klo kode ini dibentrokin dgn plugin yg sama fungsinya. Kan ceritanya hindari penggunaan plugin
Thanks gan, tapi apa ini tidak bentrok dgn pliugin yang sudah di ada, seperti Lite Speed Chace ?
Saya kurang tau apakah ada fitur minify html di plugin itu? klo ada pilih aja salah satu biar ga bentrok, gampang kan?
keknya itu cuma buat WordPress deh
Istilah plugin itu di wordpress bro, jd sejak awal emg utk wordpress
yang saya bingung itu
add_action(‘get_header’, ‘wp_html_compression_start’);
saya ubah getnya ke coding seperti mulai nya di sblm dan selesainya di setelah
kan karena saya buat cmsnya ndak saya pisah seperti header.php klw footer saya pisah di lain tempat..
maaf ngrepotin mas hehe