star-fall

起点：搬上服务器，然后发现它很慢#

上一篇把博客搬上了服务器，24 小时在线了。

然后打开首页：背景视频半天不动，音乐点了没声音，右下角的看板娘干脆没出来。打开控制台，一片红。

这一篇记录这晚的排查。

第零个坑：明明发了文章，首页却没有#

上一篇发出去之后，我自己的浏览器里首页还是旧的：归档 5 篇、项目 3 篇，新文章不见了。

先一层层排除：

只剩浏览器自己。服务器之前没告诉浏览器「网页要每次重新确认」，浏览器就心安理得地用着旧页面。

修法是给 HTML 加一行响应头：

1
location ~* \.html?$ { add_header Cache-Control "no-cache" always; }

no-cache 不是「不缓存」，而是「用之前先问一句有没有更新」。图片、样式照常长期缓存，只有网页本身每次确认。

第一步：先量，再改#

把首页上几个大文件挨个测了一遍下载时间：

速度只有每秒几十到一百多 KB。文件又大，叠在一起就是「半天不动」。

第二步：能压的都压一遍#

1
ffmpeg -i bg.mp4 -an -vf "scale=480:-2,fps=24" \
2
  -c:v libx264 -preset slow -crf 33 -movflags +faststart bg-new.mp4

第三步：压缩解决不了的那件事#

注意看这一行：

看板娘渲染脚本，644 KB，已经被 Cloudflare 缓存（HIT），下载用了 3.8 秒。

文件已经存在 Cloudflare 的节点上，根本不用回我的服务器了，还是要 3.8 秒。

算下来，从我这边到 Cloudflare 只有 每秒 100–150 KB。免费版 Cloudflare 在国内要绕到海外节点，这条线路本身就慢。

所以结论很明确：

• 文件大小是我能改的，已经改了
• 线路是我改不了的，换服务器也没用

真想快，只能走另一条路（国内 CDN），而那需要先办备案。这是以后的事了。

第四步：看板娘为什么两次都加载失败#

控制台里有两行黄字：

1
[pio] model not loaded in 25s, retry=false
2
[pio] model not loaded in 25s, retry=true

看板娘的加载页里有个「看门狗」：25 秒内没加载完，就当作失败，清掉重来一次；第二次还不行，就显示「加载失败」。

这个设计本来是为了应对显卡偶尔抽风的情况。但翻服务器日志，发现真正的原因是：

• Live2D 要依次下载十几个文件，每个小文件在我这边都要等 5–20 秒
• 第一次和第二次，最后那张贴图都还没开始下载，25 秒就到了

不是加载失败，是还没来得及加载就被判了失败。

改法：

第一次打开可能还是要等一会儿，但之后文件都在浏览器里了。

第五步：控制台里那一片红#

剩下的报错长这样，重复了很多遍：

1
GET https://api.unisvg.com/material-symbols.json?icons=search
2
net::ERR_CONNECTION_TIMED_OUT

博客里的按钮图标 —— 主题切换、搜索、音乐播放器 —— 用的是 Iconify 图标组件。图标找不到时，它会去在线服务器下载，服务器有三个：

奇怪的是：这些图标明明早就打包进博客了。项目里有一个专门的脚本，把用到的 149 个图标都提前注册好，就是为了不联网。

比对了一遍，149 个一个不缺。那为什么还要去下载？

1
搜索框组件      ← 用到图标，本地还没有，去联网下载
2
主题切换组件    ← 同上
3
设置面板        ← 同上
4
……
5
本地图标注册    ← 排在最后

1
// 先注册本地图标，再导出原组件
2
import "./iconify-local";
3
import { addAPIProvider } from "@iconify/svelte/dist/functions";
4

5
// 兜底时只用官方 API，去掉连不上的备用镜像
6
addAPIProvider("", { resources: ["https://api.iconify.design"] });
7

8
export { default } from "@iconify/svelte/dist/Icon.svelte";

最后剩下的#

控制台里还有一行：

1
static.cloudflareinsights.com ... ERR_TIMED_OUT

这个不是博客的代码，是 Cloudflare 自动往页面里插的访问统计脚本，国内连不上。要在 Cloudflare 后台关掉，跟博客无关。

收尾：两条黄色警告#

红字清干净以后，控制台里还剩两条黄色的警告。不影响使用，但看着碍眼。

1
Blocked aria-hidden on an element because its descendant retained focus.
2
Element with focus: <button.ml-enter>

1
[pio] no driver found; widgetInstance keys = ...

1
[pio] found onDrag at ... (depth 6)

这一晚学到的#

• 先量，再改。 不测一遍，我会以为慢是服务器的问题
• 能压的先压，但要知道压缩的上限在哪 —— 线路慢，文件再小也只能快一些
• 「失败」不一定是失败。 看门狗 25 秒判死刑，判的其实是网速
• 「已经做了」不等于「已经生效」。 图标早就打包了，但执行顺序让它形同虚设
• 有损压缩要验证。 72 KB 很诱人，但逐像素比一下，就知道不该用
• 警告也值得看一眼。 一条是两个设计互相矛盾，一条是时机不对的误报 —— 都不是大事，但都说明了代码在想什么

本文中的排查和修改都由 AI 执行，涉及权限的每一步都先征得了我的同意。改动前的文件都留了备份。