什么是 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、压缩器和“美化器”工具包。