WordPress网站前端压缩代码新版已兼容测试

老白博客WordPress技巧分享:前端压缩代码,能够极大程度实现源代码美观简洁,已经做了兼容测试,有新老两个版本。一个是张戈大佬的老版本,需要调整的部分比较多,大佬也很久没更新了;一种是新版本,基本不用调整,不过压缩后还是有几行的。二者压缩效果区别不大,大家选择自己喜欢的即可。

Wordpress 网站压缩前端html代码

1.张戈版-WordPress压缩代码

网站插件安装越多,负载越大,访问速度自然快不起来,因此我们的口号是“能不装,就不装

将以下代码放到网站当前使用主题根目录下的functions.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("nn", "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');

 

1.1 调整注意事项

另外对于某些JS文件,压缩容易出问题的

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

1.2 文章代码块

网站文章中有时候也需要插入代码,一篇文章需要插入几段代码了,如果文章中插入的代码也被压缩,是很影响用户阅读体验的,所有我们也要进行一下处理,同样将以下代码放入functions.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;
}
add_filter( "the_content", "unCompress");

2.新版压缩代码-亲测好用

代码好像是来自站长帮,更改为后台不压缩,下面就是我在用的代码

同理,添加到主题的function.php文件

// wordpress压缩代码https://www.xcbtmw.com/10262.html
function WenM_clean_javascript($js_code) {
    // 将多个空格替换为单个空格,但保留换行符
    $js_code = preg_replace('/[ t]+/', ' ', $js_code);
    // 去掉每行开头和结尾的空格
    $js_code = preg_replace('/^s+|s+$/m', '', $js_code);
    return $js_code;
}

function WenM_compress_css($css_code) {
    // 精确匹配CSS注释,避免删除包含在字符串字面量中的注释
    $css_code = preg_replace_callback('!/*[^*]**+([^/][^*]**+)*/!', function($matches) {
        return strpos($matches[0], '"') === false && strpos($matches[0], "'") === false ? '' : $matches[0];
    }, $css_code);
    // 去掉多余空格,但保留重要空格确保兼容性
    $css_code = preg_replace_callback('/(?<=s|^)([{};:,]|}(?!s*(?:[.*?]|[^s}]))(?=s|$))/', function($matches) {
        return $matches[1];
    }, $css_code);
    $css_code = preg_replace('/s*([>~+])s*/', '$1', $css_code); // 保留选择器间的空格
    // 合并多余的空白符,保留必要的空格
    $css_code = preg_replace('/s+/', ' ', $css_code);
    $css_code = preg_replace('/;s*}/', '}', $css_code); // 删除行尾的分号

    return $css_code;
}

function WenM_html_cleaner($buffer) {
    // 获取压缩前的HTML体积
    $original_size = strlen($buffer);

    // 提取所有 <code> 代码块并用占位符替换
    if (preg_match_all('/(<codeb[^>]*>)([sS]*?)(</code>)/i', $buffer, $code_matches)) {
        $code_placeholders = array_map(function($i) { return "###CODE_$i###"; }, array_keys($code_matches[0]));
        $buffer = str_replace($code_matches[0], $code_placeholders, $buffer);
    }

    // 提取所有 JavaScript 代码块并用占位符替换
    if (preg_match_all('/(<scriptb[^>]*>)([sS]*?)(</script>)/i', $buffer, $js_matches)) {
        $js_placeholders = array_map(function($i) { return "###JAVASCRIPT_$i###"; }, array_keys($js_matches[0]));
        $buffer = str_replace($js_matches[0], $js_placeholders, $buffer);
    }

    // 压缩<head>标签之前内联的CSS代码
    if (preg_match('/(<headb[^>]*>)([sS]*?)(</head>)/i', $buffer, $head_matches)) {
        if (preg_match_all('/(<styleb[^>]*id=["'][^"']*["'][^>]*>)([sS]*?)(</style>)/i', $head_matches[2], $css_matches)) {
            foreach ($css_matches[2] as &$css_code) {
                $css_code = WenM_compress_css($css_code);
            }
            $cleaned_head = $head_matches[2];
            foreach ($css_matches[0] as $i => $original_style_tag) {
                $compressed_style_tag = $css_matches[1][$i] . $css_matches[2][$i] . $css_matches[3][$i];
                $cleaned_head = str_replace($original_style_tag, $compressed_style_tag, $cleaned_head);
            }
            $buffer = str_replace($head_matches[0], $head_matches[1] . $cleaned_head . $head_matches[3], $buffer);
        }
    }

    // 去掉 HTML 注释
    $buffer = preg_replace('/<!--(?!<!)[^[>][sS]*?-->/', '', $buffer);
    
    // 去掉多余的空格和换行
    $buffer = preg_replace('/s+/', ' ', $buffer);
    $buffer = preg_replace('/>s+</', '><', $buffer);

    // 保留指定标签前的一个换行符
    $buffer = preg_replace('/(<(title|h1|h2|aside|main|html|head|body|code)[^>]*>)/i', "n$1", $buffer);

    // 处理 JavaScript 代码块中的空格
    if (!empty($js_matches[2])) {
        foreach ($js_matches[2] as &$js_code) {
            $js_code = WenM_clean_javascript($js_code);
        }
        // 将占位符替换回处理后的 JavaScript 代码块
        $processed_js = array_map(function($i) use ($js_matches) {
            return $js_matches[1][$i] . $js_matches[2][$i] . $js_matches[3][$i];
        }, array_keys($js_matches[0]));
        $buffer = str_replace($js_placeholders, $processed_js, $buffer);
    }
    
    // 将占位符替换回 <code> 代码块
    if (!empty($code_matches[2])) {
        $processed_code = array_map(function($i) use ($code_matches) {
            return $code_matches[1][$i] . $code_matches[2][$i] . $code_matches[3][$i];
        }, array_keys($code_matches[0]));
        $buffer = str_replace($code_placeholders, $processed_code, $buffer);
    }

    // 获取压缩后的HTML体积
    $compressed_size = strlen($buffer);

    // 计算体积并转换为KB
    $original_size_kb = round($original_size / 1024, 2);
    $compressed_size_kb = round($compressed_size / 1024, 2);

    // 在HTML尾部添加压缩前后的体积信息
    $buffer .= "n<!-- 压缩前尺寸:{$original_size_kb} KB,压缩后尺寸:{$compressed_size_kb} KB,由老白博客HTML压缩器优化 -->";

    return $buffer;
}

function WenM_start_buffering() {
    if (!is_admin()) { // 检查是否为后台页面
        ob_start('WenM_html_cleaner');
    }
}

function WenM_end_buffering() {
    // 确保在有缓冲区时调用 ob_end_flush
    if (ob_get_level() > 0) {
        ob_end_flush();
    }
}

add_action('wp_loaded', 'WenM_start_buffering');
add_action('shutdown', 'WenM_end_buffering');
// wordpress压缩结束https://www.xcbtmw.com/10262.html

3.说明

上述代码压缩主要为了网站源代码好看,再配合一些搞怪的注释图案。

WordPress网站搞怪源代码注释图案设置教程

如果要达到整体压缩加速,那就得从服务器端和WordPress插件实现

宝塔面板卸载原Nginx编译Brotli压缩