一個頁面真正跑起来,靠的不只是你自己的 HTML、CSS 和图片。統計代碼、广告位、在线客服、图标库、地图、评论组件、A/B 測試脚本,往往来自別人的域名。它們不在你的服務器目錄里,出問题时也不好排查,但确實會占带宽、占内存、占渲染時間。定期盘一遍,比等到頁面變慢再回头找原因要省事。
先把清單列出来
不要凭印象,去模板和公共文件里找。常见的位置是:公共头尾模板、CMS 的插件配置、建站後台的代碼注入栏目,以及各個頁面單獨埋的脚本。
- 統計與埋点:可能不止一套,改版後舊的没删是常事。
- 广告與联盟代碼:通常体积不小,還带自己的請求鏈。
- 客服、工單、問卷之類的小组件。
- 在线字体、图标库、UI 框架 CDN。
- 地图、视频播放器、第三方评论。
- A/B 測試、热图、會话錄制工具。
導出頁面請求清單是最直接的办法:打開浏览器的網絡面板,刷新頁面,按域名分组,把不是自己域名的請求挑出来。列表頁、詳情頁、活動頁各做一次,结果经常不一样。
几個值得盯的检查点
加载失敗與超时
第三方服務偶尔挂掉是正常的,麻烦的是頁面逻辑绑在它上面。如果主内容的渲染要等某個外部回調,對方一慢,用戶和蜘蛛看到的就是空白。用控制台看失敗的請求,對非關键脚本加 async 或 defer,並给關键位置留兜底方案。
重复與遗留
同一個頁面發两次統計、同一功能引两個库,属于典型的改版残留。表現是資料對不上、加载時間莫名增加。對着請求清單核一遍用途和负责人,标不出来源的就先停掉观察几天。
阻塞渲染
放在 head 里同步加载的脚本會挡住後面的内容;外部字体如果没有合适的 font-display 設定,首屏文字可能一段時間不顯示。CSS 里的 @import 也會拖慢样式就绪時間。這些不是必须改,但值得知道自己付了什么代價。
域名數量與连接開销
每新增一個外部域名,就要多做一次 DNS 查询,多建立一组连接。常用的字体、图标可以自托管,确實需要遠程調用的再加 preconnect。數量少的时候這些開销看不出来,堆到十几個就明顯了。
协议與混合内容
HTTPS 頁面里引用 http 资源,浏览器會拦截或给出警告。另外,引入第三方脚本等于把一部分执行權限交出去,CSP 不要配得太宽,也別一不小心挡住自己需要的脚本,改完记得在控制台確認没有新的报错。
外部脚本带入的内容
评论、推荐位、广告會往頁面里插文字。检查這些内容是否會挤占正文区域、是否带出無關文本,同时给插入的外鏈按性质加上 nofollow 或 sponsored 属性,別让付費位置看起来像普通引用。
一份可以照着做的流程
- 導出主要頁面模板的請求清單,按域名和用途分组。
- 逐個标注负责人和存在理由,说不出用途的先标记待定。
- 關掉不用的,先在測試环境驗證頁面功能是否正常。
- 保留的脚本做异步或延迟加载,能自托管的移到本地。
- 观察一段時間,確認没有新的报错和布局問题。
- 把每次增减记錄在案,下次盘点直接從這份记錄開始。
別只看首頁
首頁通常被照顾得最好,問题往往藏在列表頁和詳情頁模板里。移動端和桌面端加载的脚本也可能不同,两套都要過一遍。表單頁、登入頁這類容易忽略的頁面,反而经常挂着過期的埋点。
對第三方脚本来说,預設狀態應该是先不加载,確認需要之後再放進来,而不是先放上去再等哪天有空清理。
這件事不需要一次做完。每個月挑一個模板,花半小时過一遍請求清單,半年下来頁面會干净不少,排查問题时也更容易看清哪些是自己寫的、哪些是別人塞進来的。