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

MỤC LỤC BÀI VIẾT

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');

100

101

102

103

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 '';

}

protected function wp_minifyHTML($html)

{

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 == '') {

$overriding = !$overriding;

continue;

} else if ($this->wp_remove_comments) {

if (!$overriding && $raw_tag != 'textarea') {

$content = preg_replace('/).)*-->/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