在优化 HTML 文件时，通常有两种方法：压缩和缩小。尽管它们表面上听起来相似，但实际上它们是两种不同的技术，因此请勿混淆它们。本文介绍的方法是 HTML 代码的缩小，也就是删除源代码中不必要的字符和行，例如缩进、注释、空行等。
这个技术的主要作用是清除HTML代码中不必要的字符，从而减小文件大小，而不会对任何内容产生影响。
HTML代码优化
缩小
以下是示例 HTML 代码：
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
<div><img src=”b.jpg”></div>
<h1>这是一个标题</h1>
<p>蓝频道软件的永久网址为：<a href=”https://bluesrt.com”>bluesrt.com</a>.</p>
<p>这是一个段落！</p>
<p><strong><em>这是一个粗体和斜体段落。</em></strong></p>
</body>
</html>
缩小后的 HTML 代码：
<html><head><title>Your Title Here</title></head><body><div><img src=”b.jpg”></div><h1>这是一个标题</h1><p>蓝频道软件的永久网址为：<a href=”https://bluesrt.com”>bluesrt.com</a>.</p><p>这是一个段落！</p><p><strong><em>这是一个粗体和斜体段落。</em></strong></p></body></html>
在进行压缩前，该 HTML 文件大小为 302 字节。经过压缩后，文件大小为 248 字节，共计减少了 17.9%。理论上，这可以在用户访问该页面时节省 17.9% 的传输带宽，并且可以提升网页的加载速度。
压缩
在压缩 HTML 文件时，它不会改变HTML中的任何字符，只是对整个页面进行压缩，从而减小文件大小。
当用户访问您的网站时，他们使用 HTTP 协议进行访问，浏览器向网络服务器发送一个特定页面的请求，网络服务器找到该页面，然后将该页面的内容发送回访问者的浏览器。
然而，由于 HTTP 协议支持压缩，Web 服务器可以在将页面发送给访问者之前对其进行压缩（假设服务器设置中启用了压缩），然后访问者的浏览器可以将页面解压缩回其原始状态。
Gzip 是最常见的压缩方案，它使用称为 DEFLATE 的无损压缩算法来进行压缩。该算法在 HTML 文件中查找重复出现的文本，并将这些重复出现的文本替换为对先前出现的文本的引用。
唯一的缺点是每次请求页面时，Web 服务器都需要消耗一定的 CPU 来执行压缩。但是，由于现今 CPU 的性能已经很强大了，因此启用 Gzip 已经成为 WEB 服务器的标配。
除了 Gzip 之外，Brotli 压缩也是一个不错的选择。
使用原生的HTML代码在WordPress中缩小页面，无需安装插件
我们在这里提供的是缩小 HTML 文件的方法，通过缩小后再进行 Gzip 压缩，可以获得更好的效果。
/**
* 缩小HTML代码。
*
* 代码添加到当前主题的functions.php文件中
*/
class WP_HTML_Compression
{
// 设置 CSS、JS、注释、删除注释
protected $compress_css = true;
protected $compress_js = true;
protected $info_comment = true;
protected $remove_comments = true;// 变量
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;
// 变量重用于输出
$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;// 不输出注释
continue;
}
else if ($this->remove_comments)
{
if (!$overriding && $raw_tag != ‘textarea’)
{
// 删除所有 HTML 注释，MSIE 条件注释除外
$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;// 删除任何空属性，除了：
// action, alt, content, src
$content = preg_replace(‘/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)=””)/’, ‘$1’, $content);// 删除自关闭 XHTML 标记结束前的所有空格
// 排除 JavaScript
$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’);
使用插件缩小 WordPress 页面的HTML
如果你不想亲自处理代码，我们建议你阅读以下内容：推荐几款流行的Html页面压缩工具WordPress插件，你可以选择一款适合自己的 HTML 优化插件。
留言 | Comments