如图，是本站首页源代码被压缩并缓存后的效果——所有有效 HTML 代码全部被压缩到了一行，但是前端还是正常显示。

这是怎么做到的呢？有请敢看站长哔哔：

压缩 WP 前台

必要性

压缩，顾名思义就是通过对某一物体施加压力导致其产生一定量的形变。无论在生活中还是机器上，压缩都有同一个目的：减少目标占地，节约空间。

说到 HTML 的压缩，其实还得说说浏览器的渲染。其实浏览器也就是负责读取这些有效的 HTML 标签并将其显示的。对于编写过程中为了方便程序员读取的缩进和空格，甚至注释，浏览器都是不会管的。无意义的空格空行和缩进，只会减慢浏览器的渲染时间。

然而，WordPress 本就是为了可视化操作而生的，其中的前台代码并不需要用户操作；将它们压缩了，可以有效减少缓存文件占用空间，也可以让用户浏览器渲染时间加快。

压缩方式

先别慌，这里不谈深奥概念，要深奥站长也不会，这里讲的是插件压缩和代码压缩。

插件压缩

这个可以看看快速压缩（Fast Velocity Minify），站长有汉化成品：https://www.gkcoll.xyz/461.html。

插件比较适合小白，也容易被开发者牵着鼻子走，但总体并无大碍。

至于效果，只针对游客（站长得开无痕模式才看到）。而且仅删除空格，连代码块的缩进都删。

所以草草汉化后站长便删除了它。

代码压缩

这个方式听着高深，其实一点都不难。

第一步请各位站长登录 WordPress 站点后台。

接下来在侧滑栏找到『外观』菜单，再点入『主题文件编辑器』子栏目。

接下来找到在用主题的 function.php 模板函数文件。

把下面代码（代码非原创）补到文件尾部，点击左下角『更新文件』。

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");

完事！

返回前台 Ctrl + F5，就是开头那个效果了。

至于 unCompress 函数，是用来处理免缩进部分的，主要是代码块标签 <pre>。若无需，也可删。