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.
Cara Mudah Minify HTML, Javascript dan CSS tanpa Plugin
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 dibanding dengan pakai plugin seperti WP Minify atau WP Total Cache, hasilnya berbeda atau tidak gan?
hasilnya saja sama, justru ini lebih ringan karena tidak pakai plugin
saya pakai script nya gan, terbukti berhasil. Thanks sudah berbagi
sama-sama, semoga bermanfaat sob… ๐
mas, mau tanya..
cara ini gak bisa di gabung dengan cloudflare ya?
saya kan pakai cloudflare, nah setelah pasang script dari mas, kok buka webnya lemot banget ya?
setelah saya hapus scriptnya, web kembali normal..
ada cara gak supaya dapat jalan dan gak crash dengan cloudflare?
thanks
Wah gagal paham nih ๐ script dr saya itu untuk memperkecil menghilangkan white space. Klo mau kecilin dulu secara manual, baru simpen di CDN cloudflarenya. Ga seharusnya bikin lemot deh, heheh…
sip, berhasil mas..
oia saya hapus tulisan yang ini:
Gak apa2 ya?
thanks tipsnya
Sip! ya boleh aja, silahkan diotak atik lagi aja ๐
Kalau di blogspot gimana????
Untuk blogger belum bisa, tapi masih bisa diakali dengan menghilangkan white spaces secara manual