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

banner home FINAL 1050x121 1
huong dan su dung wordpress 2

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 bằng plugin

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.

Tải plugin tại đây:  https://drive.google.com/file/d/10uTuemDXE-TaZtPAYYv_ZTarLvatcCJg/view?usp=sharing

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.

Tải file minify-js.php tại đây: https://drive.google.com/file/d/1OCLg6dbqXIDQwUQTzvmct8m_kydOhAej/view?usp=sharing

Nén HTML trên WordPress
Nén HTML trên WordPress

 

 

5/5 (1 Review)

Theo dõi và cập nhật tin tức AZ9s thông qua các kênh truyền thông:

- Zalo Channel

- Facebook Channel

- Youtube Channel

banner home FINAL 1050x121 1
0 0 votes
Article Rating
Nhận thông báo qua Email
Nhận thông báo cho
guest

0 Comments
Inline Feedbacks
View all comments
0
Hãy để lại bình luận của bạn!x
()
x