Ra mắt thử nghiệm plugin Foxtool miễn phí dành cho WordPress
Nén HTML trên WordPress tăng tốc độ tải trang cho website
  1. Home
  2. Blog
  3. Nén HTML trên WordPress tăng tốc độ tải trang cho website
admin 1 năm trước

Nén HTML trên WordPress tăng tốc độ tải trang cho website

Nén HTML là phương pháp giúp bạn xóa bớt các khoảng trống, ký tự, chú thích dư thừa khi hiển thị nội dung (html, css, js) tới người dùng, nén HTML giúp code của bạn sạch sẽ hơn, tối ưu hơn, giảm được kha khá những thứ không cần thiết giúp tối ưu tốc độ khi người dùng tải trang.

Cách sử dụng nén HTML trên WordPress

Trong bài viết này mình sẽ hướng dẫn chi tiết cho các bạn cách để nén code HTML khi sử dụng WordPress.
– Thực hiện thêm vào trực tiếp ở theme mà bạn đang sử dụng.
– Sử dụng plugin đã được Foxtheme viết sẵn.

Nén HTML trên WordPress tăng tốc độ tải trang cho website

Ảnh minh họa, code html sau khi nén sẽ giảm được khá nhiều lưu lượng khi tải trang, và code này được nén thành 1 dòng duy nhất trong rất chuyên nghiệp.

Thêm code vào functions trực tiếp ở theme

Đầu tiên bạn cần copy toàn bộ code bên dưới và dán vào file functions.php trong thư mục theme mà bạn đang sử dụng.

class WP_HTML_Compression{
protected $wp_compress_css = true;
protected $wp_compress_js = true;
protected $wp_info_comment = true;
protected $wp_remove_comments = true;
protected $html;
public function __construct($html)
{
if (!empty($html)) {
$this->wp_parseHTML($html);
}
}
public function __toString()
{
return $this->html;
}
protected function wp_bottomComment($raw, $compressed)
{
$raw = strlen($raw);
$compressed = strlen($compressed);
$savings = ($raw - $compressed) / $raw * 100;
$savings = round($savings, 2);
return '<!-- Nén HTML, giảm được ' . $savings . '%. từ ' . $raw . ' bytes, còn lại ' . $compressed . ' bytes. (Ném HTML, CSS, JS với code Foxtheme) -->';
}
protected function wp_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;
$html = '';
foreach ($matches as $token) {
$tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
$content = $token[0];
$strip = true;
if (is_null($tag)) {
if (!empty($token['script'])) {
require_once(get_template_directory() . '/minify-js.php');
if ($this->wp_compress_js) {
$content = \JShrink\Minifier::minify($content);
}
$strip = false; // loai bo ham wp_removeWhiteSpace() cho <script>
} else if (!empty($token['style'])) {
$strip = $this->wp_compress_css;
} else if ($content == '<!--wp-html-compression no compression-->') {
$overriding = !$overriding;
continue;
} else if ($this->wp_remove_comments) {
if (!$overriding && $raw_tag != 'textarea') {
$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;
$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
$content = str_replace(' />', '/>', $content);
}
}
}
if ($strip) {
$content = $this->wp_removeWhiteSpace($content);
}
$html .= $content;
}
return $html;
}

public function wp_parseHTML($html)
{
$this->html = $this->wp_minifyHTML($html);
if ($this->wp_info_comment) {
$this->html .= "\n" . $this->wp_bottomComment($html, $this->html);
}
}
protected function wp_removeWhiteSpace($str)
{
$str = str_replace("\t", ' ', $str);
$str = str_replace("\n", '', $str);
$str = str_replace("\r", '', $str);
$str = str_replace(" This function requires postMessage and CORS (if the site is cross domain).", '', $str);
while (stristr($str, ' ')) {
$str = str_replace(' ', ' ', $str);
}
return $str;
}
}
function wp_html_compression_finish($html)
{
return new WP_HTML_Compression($html);
}
function wp_wp_html_compression_start()
{
ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_wp_html_compression_start');

 

Tiếp theo bạn tải về file minify-js.php mà mình đã đính kèm bên dưới bài viết này, sau khi tải về xong thì quăng nó vào thư mục theme mà bạn đang sử dụng là xong.
ví dụ: bạn sử dụng theme twentytwentyone thì bạn chỉ cần copy file đó và dán vào thư mục đó là xong.

Sử dụng plugin được viết bởi Foxtheme

Bạn chỉ cần tải về plugin mà mình đã viết và đính kèm ở bên dưới, sau khi tải xong bạn kích hoạt plugin, ra trang chủ views source lên để xem kết quả nhé.

Tìm hiểu thêm

Chú ý: Ở trên mình sử dụng thư viện JShrink dùng để nén code Javascript có trong Html để tránh lỗi cho code và thư viện này đã được đổi tên thành minify-js.php.
Tìm hiểu như viện JShrink tại đây https://github.com/tedious/JShrink

Mua Foxtheme ngay nào
Chia sẻ tập tin
1289 lượt xem | 9 bình luận
Lên ý tưởng và thực hiện đam mê
Hãy mua Foxtheme nếu bạn cảm thấy thích hoặc hợp với gu thẩm mỹ của chính mình :)
  1. Ánh Dương

    Fatal error: Cannot redeclare wp_html_compression_finish() (previously declared in /home/vietni/public_html/wp-content/themes/v9-child/functions.php:114) in /home/vietni/public_html/wp-content/plugins/nen-html/nen-html.php on line 106

    1. admin
      @Ánh Dương
      Fatal error: Cannot redeclare wp_html_compression_finish() (previously declared in /home/vietni/public_html/wp-content/themes/v9-child/functions.php:114) in /home/vietni/public_html/wp-content/plugins/nen-html/nen-html.php on line 106

      Nếu bạn sử dụng plugin thì không sử dụng code functions, ở bài này mình hướng dẫn 2 cách để các bạn có thể tìm hiểu thôi.

    1. admin
      @Nông Tiến Dũng
      bài viết thật hữu ích - hướng dẫn chi tiết mà lại có cả 2 phương án cho mọi người tự chọn lựa. thật tuyệt vời.

      cảm ơn bạn đã quan tâm, chủ yếu mình chia sẻ code cho anh em quan tâm về tối ưu thôi

    1. admin
      @Chí Phèo
      Nếu đã sử dụng plugin cache thì cần dùng cách này k nữa ad

      ko cần đâu bạn, vì nén html này cũng ko tăng được bao nhiêu đâu. mình chia sẻ code để anh em có thể áp dụng vào nghiên cứu thôi

Chức năng bình luận hiện chỉ có thể hoạt động sau khi bạn đăng nhập!

Cloud
Trò chuyện
Tác giả Fox Theme