在WordPress中压缩前端HTML代码方法汇总

什么是 HTML 压缩？

当您压缩 HTML 时，它会删除源代码中不必要的字符和行。HTML 中不需要缩进、注释、空行等。它们只是使文件更易于阅读。删除所有这些不必要的东西可以大大减少你的文件大小。当您缩小网站上的 HTML 代码时，服务器会向客户端发送一个小得多的页面，从而加快您的网站加载速度。

WordPress 通过执行 PHP 代码将站点的 HTML 版本组合在一起并查询数据库以获取要插入该 HTML 的内容来按需创建页面。没有我们可以下载和缩小自己的物理文件，因此我们需要在主题的 functions.php 文件中使用一些 PHP 代码。此代码将在发送给您的访问者之前压缩输出 HTML。下面是两个屏幕截图，显示了 HTML 缩小前后的网页。

方法一:无需插件

将如下代码添加在functions.php中即可,即最后一个?>之前即可。

//压缩WordPress前端html代码  
function wp_compress_html(){
    function wp_compress_html_main ($buffer){
        $initial=strlen($buffer);
        $buffer=explode("<!--wp-compress-html-->", $buffer);
        $count=count ($buffer);
        for ($i = 0; $i <= $count; $i++){
            if (stristr($buffer[$i], '<!--wp-compress-html no compression-->')) {
                $buffer[$i]=(str_replace("<!--wp-compress-html no compression-->", " ", $buffer[$i]));
            } else {
                $buffer[$i]=(str_replace("\t", " ", $buffer[$i]));
                $buffer[$i]=(str_replace("\n\n", "\n", $buffer[$i]));
                $buffer[$i]=(str_replace("\n", "", $buffer[$i]));
                $buffer[$i]=(str_replace("\r", "", $buffer[$i]));
                while (stristr($buffer[$i], '  ')) {
                    $buffer[$i]=(str_replace("  ", " ", $buffer[$i]));
                }
            }
            $buffer_out.=$buffer[$i];
        }
        $final=strlen($buffer_out);   
        $savings=($initial-$final)/$initial*100;   
        $savings=round($savings, 2);   
        $buffer_out.="\n<!--压缩前的大小: $initial bytes; 压缩后的大小: $final bytes; 节约：$savings% -->";   
    return $buffer_out;
}
ob_start("wp_compress_html_main");
}
add_action('get_header', 'wp_compress_html');
//当检测到文章内容中有代码标签时文章内容不会被压缩
function unCompress($content) {
    if(preg_match_all('/(crayon-|<\/pre>)/i', $content, $matches)) {
        $content = '<!--wp-compress-html--><!--wp-compress-html no compression-->'.$content;
        $content.= '<!--wp-compress-html no compression--><!--wp-compress-html-->';
    }
    return $content;
}
add_filter( "the_content", "unCompress");

代码实现压缩的一些问题

部分代码避免被压缩方法

此功能既然是压缩前端的代码，自然而然会将一些JS代码给压缩了，事实上有些JS被压缩后会失效，所以我们需要将这部分内容绕过压缩。只需要将你想绕过压缩的代码加个包裹层即可，代码如下:

<!--wp-compress-html--><!--wp-compress-htmlnocompression-->
此处代码不会被压缩，主要是避免压缩带来的错误，比如 JS 错误
<!--wp-compress-htmlnocompression--><!--wp-compress-html-->

这里的代码将会被保护起来，避免了压缩产生的异常情况

注意：目前网上流传的绕过压缩的代码如下，使用者请自查。

错误的免压缩代码，部分主题使用

其实很多时候JS被压缩出错是因为JS中出现了//注释，试想下后面的空格被删除了，所有的代码将出现在//后面，相当于代码都被注释了，肯定会出错啊。最简单的解决办法就是删除注释或者使用闭合注释/*这里是注释*/，这样就可以避免后面的内容被注释掉了。

避免文章中高亮的代码被压缩

很多博文中会分享代码，当你使用代码高亮插件的时候再压缩前端代码，就会出现高亮失效的情况。

代码高亮是将代码格式化，以优美的方式展示给读者;而压缩是直接将样式等修饰内容粗暴的删除，这样肯定会导致高亮失效的，只需要在function.php添加另外一段代码，就可以避免代码高亮被压缩了。

//当检测到文章内容中有代码标签时文章内容不会被压缩
function unCompress($content) {
    if(preg_match_all('/(crayon-|<\/pre>)/i', $content, $matches)) {
        $content = '<!--wp-compress-html--><!--wp-compress-html no compression-->'.$content;
        $content.= '<!--wp-compress-html no compression--><!--wp-compress-html-->';
    }
    return $content;
}

方法2:插件实现

如果不懂代码问题也不大，wordpress有很多插件可以实现前端html压缩功能。

HTML Minify

这个简单、轻量级且无障碍的插件使您能够缩小网站的 HTML 输出。要使用它，您需要做的就是安装并激活插件，它会自动缩小您的标记，而无需配置任何设置。

还有很多类似插件，大家可以自行去了解

面向开发人员的手动缩小工具

对于寻求更高级选项的开发人员，Google 推荐这些 HTML、CSS 和 JavaScript 缩小资源：

• HTMLMinifier – 基于 Javascript 的 HTML 压缩器/压缩器(支持 Node.js)。
• CSSNano – 一个模块化的缩小器，建立在 PostCSS 生态系统之上。
• csso – 具有结构优化的 CSS 缩小器。
• UglifyJS – JavaScript 解析器、mangler、压缩器和“美化器”工具包。