• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

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
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Minify HTML, JS và CSS trong WordPress không cần plugin
hosting-tot-nhat-danh-cho-wordpress

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

Cập nhật: 19/06/2022 Trung Hiếu 47 Bình luận

Mục lục Hiện
  • 1. Minify HTML, JavaScript và CSS trong WordPress

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:

  • Top 4 plugins minify dữ liệu tốt nhất cho WordPress
  • Làm thế nào để giảm bớt HTTP requests cho WordPress?

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. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

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 độ

Chuyên mục: Thủ thuật WordPress Thẻ: Tăng tốc WordPress

wpcanban-com-facebook-group

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Bảng xếp hạng AdSense CPC theo từng quốc gia
Bài viết sau Tại sao Google Panda 4.0 khiến eBay giảm 80% rank? »

Reader Interactions

Bình luận

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

    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. nguyenhai 9 bình luậnviết

    25/04/2023 lúc 16:45

    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
    • Trung Hiếu Quản lýviết

      25/04/2023 lúc 17:49

      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
      • nguyenhai 9 bình luậnviết

        26/04/2023 lúc 11:21

        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
        • Trung Hiếu Quản lýviết

          26/04/2023 lúc 11:28

          Nếu bạn dùng plugin WP Super Cache để cache dữ liệu thì nên kết hợp với plugin Autoptimize để tối ưu dữ liệu tĩnh nhé. Hai cái này bổ trợ cho nhau rất tốt, tội gì phải dùng code? :P

          Bình luận
          • nguyenhai 9 bình luậnviết

            27/04/2023 lúc 11:35

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

          • nguyenhai 9 bình luậnviết

            12/05/2023 lúc 11:23

            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?

          • Trung Hiếu Quản lýviết

            12/05/2023 lúc 11:28

            Bạn phải kiểm tra xem tài nguyên chặn hiển thị đó là CSS hay JS? Là tài nguyên tải từ host của bạn hay từ server bên ngoài? Tham khảo một số bài viết sau:
            – Ngăn JS và CSS tải trên những trang nhất định của WordPress
            – Trì hoãn tải script của bên thứ ba trong WordPress

          • nguyenhai 9 bình luậnviết

            25/05/2023 lúc 11:44

            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.

          • Trung Hiếu Quản lýviết

            25/05/2023 lúc 12:05

            Đú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.

          • nguyenhai 9 bình luậnviết

            26/05/2023 lúc 14:32

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

          • Trung Hiếu Quản lýviết

            26/05/2023 lúc 15:23

            Delay JS chỉ nên áp dụng với script của bên thứ ba thôi. :D

  2. Huệ Gems 1 bình luậnviết

    20/08/2020 lúc 14:11

    Cảm ơn admin đã chia sẻ

    Bình luận
  3. Ngọc 1 bình luậnviết

    24/04/2020 lúc 14:34

    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
  4. Lưu Nhã 1 bình luậnviết

    23/04/2020 lúc 19:45

    Tay ngang như mình khó hiểu thật sự

    Bình luận
    • Trung Hiếu Quản lýviết

      23/04/2020 lúc 19:53

      Tay ngang thì nên sử dụng plugin đi bạn ạ. :D

      Bình luận
  5. Đỗ Huệ 8 bình luậnviết

    13/09/2018 lúc 00:11

    Anh cho em hỏi, là Minify HTML thì có ảnh hưởng gì tới SEO không ak
    Mong anh giải đáp giúp em ạ.
    Tks anh

    Bình luận
    • Trung Hiếu Quản lýviết

      13/09/2018 lúc 08:02

      Trên thực tế dù bạn có minify HTML hay không minify HTML thì các bots tìm kiếm vẫn đọc hiểu dữ liệu website giống nhau. Minify giúp page-size nhẹ hơn => web load nhanh hơn => có lợi cho SEO.

      Bình luận
      • Đỗ Huệ 8 bình luậnviết

        15/09/2018 lúc 11:18

        Dạ e cảm ơn anh nhiều ak

        Bình luận
  6. mrleezoo 20 bình luậnviết

    02/11/2017 lúc 11:45

    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
    • Trung Hiếu Quản lýviết

      02/11/2017 lúc 12:17

      Không nên dùng chung code với các tính năng tương tự của plugin bạn nhé, rất dễ bị xung đột. :P

      Bình luận
      • mrleezoo 20 bình luậnviết

        02/11/2017 lúc 14:19

        Vậy theo bạn đánh giá nên sử dụng code hiệu quả hơn hay dùng plugin ?

        Bình luận
        • Trung Hiếu Quản lýviết

          02/11/2017 lúc 19:30

          Nếu plugin tạo cache đã tích hợp sẵn tính năng minify thì sao phải dùng thêm code nhỉ. :P

          Bình luận
          • mrleezoo 20 bình luậnviết

            03/11/2017 lúc 08:09

            ok cảm ơn bạn đã dành thời gian tư vấn :D :D

  7. Soju 243 bình luậnviết

    23/03/2017 lúc 23:31

    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
    • Trung Hiếu Quản lýviết

      24/03/2017 lúc 08:43

      Chính xác. Nhưng không phải site nào cũng áp dụng được, vì có thể sẽ gây lỗi giao diện. :P

      Bình luận
      • Soju 243 bình luậnviết

        04/04/2017 lúc 21:41

        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
        • Trung Hiếu Quản lýviết

          05/04/2017 lúc 07:51

          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

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới. Tặng miễn phí ebook "Bảo mật WordPress toàn tập" do WP Căn bản biên soạn!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-chat-luong-cao

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Sửa lỗi WordPress

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật CloudFlare

Thủ thuật LiteSpeed

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

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

  • Monarx Security được tích hợp vào dịch vụ WordPress Hosting 15/06/2025
  • Hiển thị code trong bài viết của WordPress 07/06/2025
  • Plugin SMTP siêu nhẹ dành cho WordPress 26/05/2025
  • Plugin contact form siêu nhẹ cho WordPress 23/05/2025

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

  • Trung Hiếu trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • TITAN VINA trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • Trung Hiếu trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • TITAN VINA trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

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

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting