WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
hosting-tot-nhat-danh-cho-wordpress

Minify HTML, JS và CSS trong WordPress không cần plugin

Trung Hiếu 47 Bình luận

Mục lục Hiện

Minify HTML, JavaScript và CSS trong WordPress mà không cần plugin.

minify-html-javascript-css-trong-wordpress-khong-can-plugin

Sử dụng quá nhiều plugin trên blog/ website WordPress không bao giờ là một ý tưởng tốt. Bởi vì chúng ta đều biết rằng các hacker có thể dễ dàng tấn công blog/ website WordPress của bạn thông qua việc khai thác lỗ hổng từ plugin. Tại sao không cố gắng để giảm bớt sự phụ thuộc vào các plugin? Một số tính năng hữu ích có thể được bổ sung dễ dàng bằng cách thêm code snippets vào file function.php của theme mà bạn đang sử dụng. Bao gồm cả thủ thuật độc đáo sau đây để minify HTML, CSS và JavaScript.

Tham khảo thêm:

Giảm bớt hay minify HTML, JavaScript và CSS về cơ bản là giảm kích thước của các tập tin. Từ đó, chúng sẽ nhỏ hơn, nhẹ hơn và load nhanh hơn, giúp cải thiện tốc độ hiển thị nội dung trên trình duyệt web. Việc minify dữ liệu về cơ bản là khá đơn giản. Bạn chỉ cần tìm cách loại bỏ các vùng không gian trống, tham số và comments của JavaScript, CSS, HTML là được. Chức năng minify có thể được tìm thấy trong một số plugin như WP-Minify hay Autoptimize. Nếu đang sử dụng plugin W3 Total Cache, bạn cũng chỉ cần vài thao tác đơn giản để kích hoạt tính năng này. Nhưng chúng ta đang cố gắng hạn chế sự phụ thuộc vào plugin. Vậy nên, điều chúng ta cần là một phương pháp để thay thế.

Minify HTML, JavaScript và CSS trong WordPress

Trên thực tế, các bạn có thể làm điều này một cách dễ dàng mà không cần đến plugin. Tất cả những gì bạn cần làm là copy và paste đoạn code sau đây vào file functions.php của theme mà bạn đang sử dụng.

class WP_HTML_Compression
{
	// Settings
	protected $compress_css = true;
	protected $compress_js = true;
	protected $info_comment = true;
	protected $remove_comments = true;</p>
<p>	// 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);</p>
<p>		$savings = ($raw-$compressed) / $raw * 100;</p>
<p>		$savings = round($savings, 2);</p>
<p>		return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$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;</p>
<p>			$content = $token[0];</p>
<p>			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;</p>
<p>					// 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;</p>
<p>						// Remove any empty attributes, except:
						// action, alt, content, src
						$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);</p>
<p>						// Remove any space before the end of self-closing XHTML tags
						// JavaScript excluded
						$content = str_replace(' />', '/>', $content);
					}
				}
			}</p>
<p>			if ($strip)
			{
				$content = $this->removeWhiteSpace($content);
			}</p>
<p>			$html .= $content;
		}</p>
<p>		return $html;
	}</p>
<p>	public function parseHTML($html)
	{
		$this->html = $this->minifyHTML($html);</p>
<p>		if ($this->info_comment)
		{
			$this->html .= "\n" . $this->bottomComment($html, $this->html);
		}
	}</p>
<p>	protected function removeWhiteSpace($str)
	{
		$str = str_replace("\t", ' ', $str);
		$str = str_replace("\n",  '', $str);
		$str = str_replace("\r",  '', $str);</p>
<p>		while (stristr($str, '  '))
		{
			$str = str_replace('  ', ' ', $str);
		}</p>
<p>		return $str;
	}
}</p>
<p>function wp_html_compression_finish($html)
{
	return new WP_HTML_Compression($html);
}</p>
<p>function wp_html_compression_start()
{
	ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');

Nếu code bị lỗi, các bạn có thể download file text tại đây về máy tính để xem chi tiết.

Để kiểm tra xem liệu các chức năng minify có thực sự hoạt động hay không, các bạn chỉ cần view source (Ctrl + U) của blog/ website. Ở cuối mã nguồn, các bạn sẽ thấy thông báo trông như thế này:

<!–-HTML compressed, size saved …%. From …bytes, now …bytes-–>

Đơn giản vậy thôi. Chúc các bạn thành công!

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)

Bài viết liên quan

Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Tính năng Crawl Optimization của plugin Yoast SEO
Tính năng Crawl Optimization của plugin Yoast SEO
Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Vô hiệu hóa WooCommerce Brands để tăng tốc độ

Reader Interactions

Bình luận

    Để lại một bình luận

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. Sau khi chèn code vào funciton.php check mã nguồn không thấy đoạn “” này ở cuối thì là mã không hoạt động đúng ko anh? hay là vẫn minify được.?

    Bình luận

    • Web của bạn có đang sử dụng plugin nào có tính năng nén HTML (chẳng hạn như Autoptimize, WP Rocket, LiteSpeed Cache…) hay CloudFlare CDN không? Nếu không dùng mà không thấy dòng kia thì xem giữa các dòng code HTML có còn khoảng trắng không. Nếu các khoảng trắng đã bị xóa hết thì code vẫn hoạt động nhé.

      Bình luận

      • trước khi chèn code e có dùng wp super cache, mà view source code html vẫn có khoảng trắng? ko biết lỗi do đâu ạ

        Bình luận

          • ok anh nhé! đọc các bài chia sẻ của anh rất hay.

          • Trong trường hợp sử dụng WP ROCKET nhưng khi test google speed insight vẫn không hết và vẫn báo: loại bỏ các tài nguyên chặn hiển thị, giảm css không dùng đến,…thì mình có cách nào hay có code gì để tối ưu triệt để ko anh?

          • Thêm nữa là khi cài WP Rocket thì phần bài sản phẩm của woocommerce lại bị mất ko hiển thị nội dung bài và album ảnh. Vậy là do xung đột plugin phải ko anh, gỡ wp rocket ra thì lại bình thường.

          • Đúng rồi bạn. Có thể là xung đột với các tính năng tối ưu JS, CSS hoặc là tính năng lazyload hình ảnh. Bạn có thể tắt bật từng tính năng để xác định xem nó xung đột với tính năng nào.

          • đúng là nó bị xung đột tính năng “Delay JavaScript Execution” thật. tắt đi là ok luôn bác :))

  3. Hàm này có xử lý lỗi khi trong code html có note dạng // không Hiếu. Mình có cái hàm cứ trong code dùng // để ghi chú là sẽ bị lỗi còn /**/ thì lại bình thường. Regex điều chỉnh mãi vẫn lỗi chả hiểu :(

    Bình luận

  6. Xin chào Trung Hiếu.

    Xin được hỏi hiện mình đang dùng The Fastest Cache rồi nhưng thấy phần trăm minify của plugin này vẫn chưa hết tính năng (bản free ==!) thì mình thêm đoạn mã này có ảnh hưởng gì đến site không bạn ?

    Bình luận

  7. cái mục Files optimisation: (Minification & Concatenation) ở plugin WP rocket (có HTML, CSS, JS, Google Fonts) cũng là cái này hả a. thấy dưới có dòng chữ đỏ nên không dám nghịch linh tinh @@

    Bình luận

      • e bật cái html (tích cả 2 mục nhỏ bên trong Inline CSS và Inline JS). nhưng khi test pagespeed insight nó vẫn báo giảm bớt html với đường dẫn là trang chủ luôn. ko có gạch chéo / cái mục gì cả. vậy nếu e muốn nén thủ công thì e phải lấy html từ file nào ra nén đây a (e đã nén thành công js và css rồi nhưng nó chỉ rõ file đấy là file nào chứ ko đưa mỗi cái link trang chủ như ở html). theo e nghĩ là file index.php ở trong mục theme. nhưng mà view xem thử toàn thấy php không có mỗi tí html @@

        Bình luận

        • HTML của WordPress không nén thủ công được vậy đâu nha. 1 là dùng code. 2 là dùng plugin. Không nén bằng tay được, dễ lỗi lắm. :P

          Bình luận
1 2

Footer

Bài viết mới nhất

Bình luận mới nhất

Thống kê WP Căn bản

9 Chuyên mục - 1.005 Bài viết - 35.545 Bình luận