一个页面真正跑起来,靠的不只是你自己的 HTML、CSS 和图片。统计代码、广告位、在线客服、图标库、地图、评论组件、A/B 测试脚本,往往来自别人的域名。它们不在你的服务器目录里,出问题时也不好排查,但确实会占带宽、占内存、占渲染时间。定期盘一遍,比等到页面变慢再回头找原因要省事。
先把清单列出来
不要凭印象,去模板和公共文件里找。常见的位置是:公共头尾模板、CMS 的插件配置、建站后台的代码注入栏目,以及各个页面单独埋的脚本。
- 统计与埋点:可能不止一套,改版后旧的没删是常事。
- 广告与联盟代码:通常体积不小,还带自己的请求链。
- 客服、工单、问卷之类的小组件。
- 在线字体、图标库、UI 框架 CDN。
- 地图、视频播放器、第三方评论。
- A/B 测试、热图、会话录制工具。
导出页面请求清单是最直接的办法:打开浏览器的网络面板,刷新页面,按域名分组,把不是自己域名的请求挑出来。列表页、详情页、活动页各做一次,结果经常不一样。
几个值得盯的检查点
加载失败与超时
第三方服务偶尔挂掉是正常的,麻烦的是页面逻辑绑在它上面。如果主内容的渲染要等某个外部回调,对方一慢,用户和蜘蛛看到的就是空白。用控制台看失败的请求,对非关键脚本加 async 或 defer,并给关键位置留兜底方案。
重复与遗留
同一个页面发两次统计、同一功能引两个库,属于典型的改版残留。表现是数据对不上、加载时间莫名增加。对着请求清单核一遍用途和负责人,标不出来源的就先停掉观察几天。
阻塞渲染
放在 head 里同步加载的脚本会挡住后面的内容;外部字体如果没有合适的 font-display 设置,首屏文字可能一段时间不显示。CSS 里的 @import 也会拖慢样式就绪时间。这些不是必须改,但值得知道自己付了什么代价。
域名数量与连接开销
每新增一个外部域名,就要多做一次 DNS 查询,多建立一组连接。常用的字体、图标可以自托管,确实需要远程调用的再加 preconnect。数量少的时候这些开销看不出来,堆到十几个就明显了。
协议与混合内容
HTTPS 页面里引用 http 资源,浏览器会拦截或给出警告。另外,引入第三方脚本等于把一部分执行权限交出去,CSP 不要配得太宽,也别一不小心挡住自己需要的脚本,改完记得在控制台确认没有新的报错。
外部脚本带入的内容
评论、推荐位、广告会往页面里插文字。检查这些内容是否会挤占正文区域、是否带出无关文本,同时给插入的外链按性质加上 nofollow 或 sponsored 属性,别让付费位置看起来像普通引用。
一份可以照着做的流程
- 导出主要页面模板的请求清单,按域名和用途分组。
- 逐个标注负责人和存在理由,说不出用途的先标记待定。
- 关掉不用的,先在测试环境验证页面功能是否正常。
- 保留的脚本做异步或延迟加载,能自托管的移到本地。
- 观察一段时间,确认没有新的报错和布局问题。
- 把每次增减记录在案,下次盘点直接从这份记录开始。
别只看首页
首页通常被照顾得最好,问题往往藏在列表页和详情页模板里。移动端和桌面端加载的脚本也可能不同,两套都要过一遍。表单页、登录页这类容易忽略的页面,反而经常挂着过期的埋点。
对第三方脚本来说,默认状态应该是先不加载,确认需要之后再放进来,而不是先放上去再等哪天有空清理。
这件事不需要一次做完。每个月挑一个模板,花半小时过一遍请求清单,半年下来页面会干净不少,排查问题时也更容易看清哪些是自己写的、哪些是别人塞进来的。