Không phải lúc nào sử dụng plugin trong cũng blog wordpress cũng là tốt, mà ngược lại chúng ta chỉ nên sử dụng plugin khi mà chúng ta có thể viết ra chức năng cho website của mình. Vì vậy càng hạn chế được việc cài đặt plugin thì càng tốt, nếu không làm thế bạn sẽ nhìn thấy một danh sách dài plugin trong bảng điều khiển và mình cũng như các bạn thôi, luôn luôn muốn tối ưu website một cách nhanh nhất, gọn và nhẹ nhất chứ không thích cồng kềnh. Bài viết sau đây chúng tôi sẽ hướng dẫn Minify HTML trang web để tăng tốc độ tải trang của website lên, xóa hết các khoảng trắng trong HTML.
hướng dẫn Minify HTML
Các bạn có thể sử dụng 2 plugin tốt nhất sau nếu không muốn động chạm vào code:
WP-Minify: Nén các tập tin Js, Css vào một, minify website.
W3 Total Cache: Plugin cache tăng tốc website toàn diện.
Tiếp tục, nếu bạn chọn cách sử dụng code thì ngay bây giờ thêm đoạn mã ngày vào trong file functions.php của theme 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;
// 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);
$savings = ($raw-$compressed) / $raw * 100;
$savings = round($savings, 2);
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;
$content = $token[0];
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;
// 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;
// Remove any empty attributes, except:
// action, alt, content, src
$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
// Remove any space before the end of self-closing XHTML tags
// JavaScript excluded
$content = str_replace(' />', '/>', $content);
}
}
}
if ($strip)
{
$content = $this->removeWhiteSpace($content);
}
$html .= $content;
}
return $html;
}
public function parseHTML($html)
{
$this->html = $this->minifyHTML($html);
if ($this->info_comment)
{
$this->html .= "\n" . $this->bottomComment($html, $this->html);
}
}
protected function removeWhiteSpace($str)
{
$str = str_replace("\t", ' ', $str);
$str = str_replace("\n", '', $str);
$str = str_replace("\r", '', $str);
while (stristr($str, ' '))
{
$str = str_replace(' ', ' ', $str);
}
return $str;
}
}
function wp_html_compression_finish($html)
{
return new WP_HTML_Compression($html);
}
function wp_html_compression_start()
{
ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');
Tiếp đến bạn sẽ thấy được sự khác biệt bằng cách nhấn tổ hợp phím Ctrl + U
Đây là đoạn code trước khi chưa thêm code:
<head> <meta charset="UTF-8" /> <title>Thủ Thuật WordPress - Themes và Plugins - Học Làm SEO| Blogger AZ</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head>
Còn đây là sau khi thêm code vào file functions.php
<head> <meta charset="UTF-8"/> <title>Thủ Thuật WordPress - Themes & Plugins - Học Làm SEO| Blogger AZ</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/></head>
Bạn có thể thấy là các khoảng trắng bị mất đi hết đúng không nào, điều này cũng giúp bạn tăng tốc website một chút, còn việc tải trang chậm thì còn do nhiều yếu tố khác nữa.
Chức năng mà thiết kế wp vừa giới thiệu tới độc giả ở trên không chỉ làm cho các đoạn code html được tối ưu mà còn không Minify sẵn các tập tin trong file css, js. Và đây cũng là một cách xóa bỏ bản quyền plugin SEO tốt nhất cho WordPress – WordPress SEO by Yoast.
Chúc các bạn thành công!
functions.php
