压缩 WordPress 站点前端 HTML

compress_wp_1

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

这是怎么做到的呢?有请敢看站长哔哔:

压缩 WP 前台

必要性

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

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

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

压缩方式

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

插件压缩

这个可以看看快速压缩(Fast Velocity Minify),站长有汉化成品:https://www.gkcoll.xyz/461.html

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

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

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

代码压缩

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

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

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

compress_wp_2

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

compress_wp_3

把下面代码(代码非原创)补到文件尾部,点击左下角『更新文件』。

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>。若无需,也可删。

版权声明
作者:灰尘疾客
链接:https://www.gkcoll.xyz/507.html
来源:极客藏源
注意:若文章头部无特殊声明,则文章为作者原创,版权归作者所有,未经允许请勿转载(默认允许)。
转载须知:若无特殊说明,本站所有文章均遵循 CC BY-NC-SA 4.0 协议发布,转载、二次创作请遵守该协议内容,并参考以下文案添加转载声明:本文转载自网站 极客藏源 的用户 @灰尘疾客 的文章 《压缩 WordPress 站点前端 HTML》。本转载文发布遵循与原文相同的 CC BY-NC-SA 4.0 协议
THE END
分享
二维码
海报
压缩 WordPress 站点前端 HTML
如图,是本站首页源代码被压缩并缓存后的效果——所有有效 HTML 代码全部被压缩到了一行,但是前端还是正常显示。 这是怎么做到的呢?有请敢看站长哔哔: 压缩 ……
<<上一篇
下一篇>>