免插件缩小 WordPress 页面的HTML代码

就优化 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

0
分享海报
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码