就优化 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://www.mmeasy.cn">www.mmeasy.cn</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://www.mmeasy.cn">www.mmeasy.cn</a>.</p><p>这是一个段落!</p><p><strong><em>这是一个粗体和斜体段落。</em></strong></p></body></html>
压缩前302字节,压缩后248字节,共计减少17.9%,理论上可以在用户访问该页面时节省17.9%的传输带宽,速度也会有所提升。
压缩
压缩和缩小不同,它不会改变HTML中的任何一个字符。
当用户访问您的网站时,他们使用 HTTP 协议进行访问,浏览器向网络服务器发送一个特定页面的请求,网络服务器找到该页面,然后将该页面的内容发送回访问者的浏览器。
但是由于 HTTP 协议支持压缩,Web 服务器可以在将页面发送给访问者之前对其进行压缩(假设服务器设置中启用了压缩),然后访问者的浏览器可以将页面解压缩回其原始状态。
最常见的压缩方案是Gzip,这是一种使用称为 DEFLATE 的无损压缩算法的文件格式。
该算法在 HTML 文件中查找重复出现的文本,然后将这些重复出现的文本替换为对先前出现的文本的引用。
唯一的缺点是每次请求页面时,Web 服务器都需要消耗一定的 CPU 来执行压缩。但现今 CPU 已不是什么大问题,因此启用 Gzip 成为WEB服务器的标配。
除了Gzip之外,还有 Brotli 压缩也是不错的选择。
免插件缩小 WordPress 页面的HTML
我们这里给出的是缩小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
如果不想折腾代码,推荐阅读:几个流行的WordPress的Html页面压缩工具测评,挑选一款适合自己的HTML优化插件。
注意事项(必读):
1、本站所展示的一切软件、教程和内容信息等资源均仅限用于学习和研究目的,请在下载后24小时内自觉删除;不保证其完整性及可用性,本平台不提供任何技术支持,若作商业用,请到原网站购买,由于未获授权而发生的侵权行为与本站无关。如有侵权请联系vip#mmeasy.cn(将#替换成@),我们将及时处理。
2、一切网盘资源请勿在线解压!在线解压会提示文件损坏或密码错误,特别注意若压缩包名带part1或z01这样的标识,则均为分卷压缩包,需要下载每个文件夹下的所有压缩包后,用WinRAR软件解压part1或zip即可释放当前文件夹下所有压缩包的内容!
3、如果链接失效,遇到资源失效可提交工单处理。
4、强烈建议在本站注册成为会员后再购买,游客购买只能短期保留记录,如超期或购买后自行清空浏览器缓存,将恢复购买前状态!
本文链接:https://www.mmeasy.cn/12433.html