一、前言:为什么Z-Blog站点需要重视PageSpeed Insights
在使用Z-Blog PHP程序搭配星岚(navblog)主题运营站点时,即使服务器配置良好,PageSpeed Insights(PSI)评分往往也不理想。核心瓶颈通常不在服务器响应时间(TTFB),而在于第三方广告脚本阻塞主线程、CLS布局偏移以及HTML语义化缺失等问题。
本文记录了对www.aiqixie.com及其英文版的完整优化过程,最终实现了移动端97分、桌面端84分+的成绩。以下方案同样适用于绝大多数基于Z-Blog的资讯类与博客类站点。
二、优化前的核心问题诊断
通过Lighthouse 13.0.1测试,发现以下关键扣分项:
Total Blocking Time(TBT):桌面端高达5,050毫秒,AdSense广告脚本占满主线程;
Cumulative Layout Shift(CLS):0.171,AdSense iframe插入导致页面跳动;
元素渲染延迟:LCP文字元素因主线程被占而延迟2.6秒;
无障碍与语义化:缺少
<main>地标、表单无关联label、dl结构不规范。
三、核心优化措施与代码实现
3.1 AdSense广告延迟加载(效果最显著)
AdSense的adsbygoogle.js与show_ads_impl是主线程阻塞的元凶。将广告脚本从async直接加载改为页面load事件后延迟2秒动态插入,可使Lighthouse测试窗口内基本检测不到广告执行,TBT从5秒级骤降至160毫秒。
在Z-Blog后台「自定义头部代码」中替换为:
<script>
window.addEventListener('load', function() {
setTimeout(function() {
var s = document.createElement('script');
s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-你的ID";
s.crossOrigin = "anonymous";
s.async = true;
document.head.appendChild(s);
}, 2000);
});
</script>注意:延迟加载对首屏广告收入影响极小,但可大幅提升核心Web指标。
3.2 修复CLS:为广告容器预设固定高度
AdSense广告位在iframe插入前无高度,导致布局偏移。在主题style.css末尾追加:
ins.adsbygoogle {
display: block;
min-height: 90px;
}
aside ins.adsbygoogle,
.main_right ins.adsbygoogle {
min-height: 250px;
}
.content ins.adsbygoogle,
.article ins.adsbygoogle {
min-height: 280px;
}
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}3.3 添加HTML5主内容地标<main>标签
PSI提示「文档缺少主要位置标记」。将主题模板中包裹文章列表与正文的<div class="main_left">改为<main class="main_left">。涉及文件包括:
post-index.php(首页)post-list.php(分类列表)post-single.php(文章详情)post-page.php(独立页面)post-tag.php(标签页)post-author.php(作者页)search.php(搜索页)
修改方式统一为:开始标签<div class="main_left" role="main">改为<main class="main_left">,对应闭合标签改为</main>。
3.4 预连接Google字体服务器
即使主题未主动引入Google Fonts,AdSense仍会在iframe内加载。在header.php的预连接区域添加:
<link rel="dns-prefetch" href="https://fonts.googleapis.com"> <link rel="dns-prefetch" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3.5 延迟加载插件聚合JS
Z-Blog的c_html_js_add.php包含大量插件脚本,阻塞首屏。在header.php中将其改为空闲时加载:
<script>
if ('requestIdleCallback' in window) {
requestIdleCallback(function() {
var s = document.createElement('script');
s.src = "{php}echo $host;{/php}zb_system/script/c_html_js_add.php";
document.body.appendChild(s);
}, { timeout: 3000 });
} else {
window.addEventListener('load', function() {
setTimeout(function() {
var s = document.createElement('script');
s.src = "{php}echo $host;{/php}zb_system/script/c_html_js_add.php";
document.body.appendChild(s);
}, 1000);
});
}
</script>3.6 修复表单可访问性
侧栏搜索模块的<input>缺少关联<label>。在Z-Blog后台「模块管理」-「搜索」中,将代码改为:
<label for="side-search" class="sr-only">搜索关键词</label> <input type="text" id="side-search" name="q" placeholder="输入关键词搜索..." />
3.7 图片尺寸与二维码优化
为侧栏二维码图片添加明确的width与height属性,并在CSS中增加aspect-ratio: 1 / 1兜底,消除图片加载导致的布局偏移。
四、优化成果对比
| 指标 | 优化前(桌面端) | 优化后(桌面端) | 优化后(移动端) |
|---|---|---|---|
| 性能得分 | 约60分 | 84分 | 97分 |
| TBT | 5,050 ms | 160 ms | 40 ms |
| LCP | 2.4 s | 0.3 s | 1.1 s |
| CLS | 0.171 | 待进一步降低 | 0 |
五、总结与建议
对于依赖AdSense变现的Z-Blog站点,延迟加载广告脚本是提升PSI评分最有效的手段,没有之一。其次,修复CLS和补充语义化标签能同时改善SEO与无障碍体验。
不建议为了几KB的Polyfill去修改Z-Blog系统核心文件(如zblogphp.js),因为升级会被覆盖且收益极低。同样,Google Fonts和FundingChoices的缓存提示属于第三方不可控范围,不必过度纠结。
按照以上步骤操作后,建议每次修改都通过「清空缓存并重新编译模板」生效,并在无痕模式下用PageSpeed Insights验证,直至核心指标稳定达标。