Hotline : 0908.103.092

Hướng dẫn minify HTML, Javascript và CSS trong WordPress

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 các bạn Minify 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.

Minify HTML WordPress

Minify HTML WordPress

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 &amp; 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

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

WEBSITE WORDPRESS CHUYÊN NGHIỆP
VỚI ĐẦY ĐỦ TÍNH NĂNG ƯU VIỆT
lam web wordpress

Tính sẵn sàng & tùy biến cao

thiet ke web ban hang

Giỏ hàng, thanh toán tiện lợi

bao gia thiet ke website wordpress

Kho giao diện đa dạng

web wordpress chuan seo

Công cụ Marketing hiệu quả

ZoomWorld giới thiệu tới khách hàng dịch vụ thiết kế website bán hàng chuyên nghiệp với tính sẵn sàng luôn đáp ứng yêu cầu của khách hàng mọi lúc mọi nơi một cách nhanh chóng nhất kết hợp với tính tùy biến cao có khả năng thay đổi website phù hợp theo từng hoàn cảnh của Doanh nghiệp bạn.
thiet ke website wordpress
0908 103 092