Memperkecil Ukuran HTML, Javascript dan CSS tanpa Plugin

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! 😀