[{"data":1,"prerenderedAt":321},["ShallowReactive",2],{"blog-font-weight-bloat":3,"blog-prev-font-weight-bloat":122,"blog-next-font-weight-bloat":218},{"id":4,"title":5,"author":6,"body":7,"canonical":106,"category":107,"cover":106,"date":108,"description":109,"draft":110,"extension":111,"keywords":106,"meta":112,"navigation":113,"noindex":110,"ogImage":106,"path":114,"seo":115,"seoDescription":106,"seoTitle":106,"stem":116,"tags":117,"updated":106,"__hash__":121},"blog\u002Fblog\u002Ffont-weight-bloat.md","一个官网用了 11 个字重，字体治理比压缩更省","元析智能",{"type":8,"value":9,"toc":96},"minimark",[10,14,18,21,33,36,39,42,45,48,51,54,70,73,76,79,82,89],[11,12,13],"p",{},"一个官网用了 11 个字重，首屏要下 5 个字体文件。这不是夸张，是今年 1 月我们在一个开发者工具站上看到的。删到 3 个字重之后，首屏字体请求从 5 个降到 1 个，体积从 1.1MB 降到 310KB。",[15,16,17],"h2",{"id":17},"字体是怎么膨胀的",[11,19,20],{},"设计师给了 4 个字体家族，每个 3 到 4 个字重，前端按设计稿逐个引入，没人算过总量。页面里真正用到的只有 3 个字重，剩下的都是复制粘贴留下的。",[11,22,23,24,28,29,32],{},"查法：跑一遍页面，用 DevTools 的 Coverage 面板看字体文件使用率，再对照 CSS 里所有 ",[25,26,27],"code",{},"font-family"," 和 ",[25,30,31],{},"font-weight"," 声明。这个站有 40 多处声明，实际组合只有 9 种。",[15,34,35],{"id":35},"治理比压缩更省",[11,37,38],{},"很多团队一上来就想压缩字体，其实先做减法收益更大。这个站把 11 个字重砍到 3 个：正文 400、标题 600、强调 700。视觉上几乎没差别，因为设计稿本来只用这三档。",[11,40,41],{},"顺序是：先砍字重，再砍字族，最后才子集化。反过来做，等于给用不上的字重做子集，白费功夫。",[15,43,44],{"id":44},"可变字体值不值",[11,46,47],{},"可变字体一个文件包含多个字重，理论上更省。实测要看用几个：只用 2 到 3 个，普通字体子集更小；用 5 个以上，可变字体才有优势。",[11,49,50],{},"我们给这个站试过可变字体，单文件 340KB，比 3 个静态子集加起来还大，最后没用。这个结论有点反直觉，但数字摆在那儿。",[15,52,53],{"id":53},"四条判断清单",[55,56,57,61,64,67],"ol",{},[58,59,60],"li",{},"页面实际用到几个字重？超过 3 个就要审",[58,62,63],{},"有没有引入图标字体？能换 SVG 就换",[58,65,66],{},"中文正文用系统字体行不行？行的话最省",[58,68,69],{},"首屏字体文件总大小控制在 300KB 以内",[11,71,72],{},"按这四条走一遍，多数站的字体体积能砍掉六成。这个站改完首屏 LCP 从 2.4 秒降到 2.1 秒，幅度不算惊人，但省下的 800KB 流量对移动端用户是实打实的。",[15,74,75],{"id":75},"顺带纠正一个误区",[11,77,78],{},"字体不是\"越少越好\"到极端。有客户问能不能只用一个字重，全部靠浏览器合成粗体。合成粗体在低分屏上边缘发虚，中文尤其明显，视觉代价比省下的 60KB 大。三个字重是多数 B2B 软件站的下限。",[15,80,81],{"id":81},"上线后的复查",[11,83,84,85,88],{},"改完字体不是一劳永逸。我们给每个站加了一个每月自动跑的检查：抓首页 HTML，列出所有 ",[25,86,87],{},"@font-face"," 和实际引用，对比总数。有一次产品团队上线新页面，又带回来两个没用上的字重，被这个检查抓到了。",[11,90,91,92,95],{},"字体文件还要设长缓存，文件名带 hash，",[25,93,94],{},"Cache-Control: max-age=31536000, immutable","。少了这条，回访用户每次还要重新协商，白等一轮往返。",{"title":97,"searchDepth":98,"depth":98,"links":99},"",2,[100,101,102,103,104,105],{"id":17,"depth":98,"text":17},{"id":35,"depth":98,"text":35},{"id":44,"depth":98,"text":44},{"id":53,"depth":98,"text":53},{"id":75,"depth":98,"text":75},{"id":81,"depth":98,"text":81},null,"技术SEO","2026-03-21","开发者工具站首屏要下 5 个字体文件，总体积 1.1MB。砍到 3 个字重加子集化之后，请求降到 1 个、体积 310KB。附四条判断清单，以及可变字体值不值的实测。",false,"md",{},true,"\u002Fblog\u002Ffont-weight-bloat",{"title":5,"description":109},"blog\u002Ffont-weight-bloat",[118,119,120],"字体加载","字体治理","首屏优化","VwHYGFy9BxF9eKMtQHCWwlHAZuL3PZLuZnAPQ1w_2go",{"id":123,"title":124,"author":6,"body":125,"canonical":106,"category":107,"cover":106,"date":207,"description":208,"draft":110,"extension":111,"keywords":106,"meta":209,"navigation":113,"noindex":110,"ogImage":106,"path":210,"seo":211,"seoDescription":106,"seoTitle":106,"stem":212,"tags":213,"updated":106,"__hash__":217},"blog\u002Fblog\u002Fprerender-baidu-indexing-test.md","预渲染救不了百度收录？我们测了 4 个站",{"type":8,"value":126,"toc":198},[127,130,133,136,151,154,157,160,163,166,177,180,183,186,189,192,195],[11,128,129],{},"预渲染对百度有效，但有前提：预渲染服务要快、快照要新、百度蜘蛛的 UA 要能命中规则。三条缺一条，效果就会打对折甚至归零。",[15,131,132],{"id":132},"四个站的三个月对照",[11,134,135],{},"2025 年 10 月，我们给四个客户站接入预渲染，方案是自建服务加缓存，观察三个月百度收录变化。",[137,138,139,142,145,148],"ul",{},[58,140,141],{},"A 站，文档站 800 页：收录从 2100 涨到 1.9 万。",[58,143,144],{},"B 站，营销站 300 页：从 1400 涨到 9000。",[58,146,147],{},"C 站，产品站 600 页：从 3200 只涨到 3400。",[58,149,150],{},"D 站，博客 400 页：从 6000 涨到 7100。",[15,152,153],{"id":153},"有效的那两个做对了什么",[11,155,156],{},"预渲染服务响应都在 500 毫秒以内，快照缓存 24 小时内刷新，主站没有屏蔽预渲染服务的请求路径。A 站还额外做了两件事：把 sitemap 重新提交，并在正文里补了 300 字以上的说明文字。快照里只有标题和图片的页面，收进去也没用。",[15,158,159],{"id":159},"无效的那两个差在哪",[11,161,162],{},"C 站的预渲染服务平均响应 3.2 秒，百度蜘蛛超时后直接放弃，日志里能看到大量请求 499 中断。D 站的问题更简单：预渲染规则只匹配了 Googlebot 的 UA，百度 UA 没进白名单，一直拿到的是空壳 HTML。配置一行之差，白等了三个月。",[15,164,165],{"id":165},"三条可执行建议",[55,167,168,171,174],{},[58,169,170],{},"预渲染的 UA 白名单必须包含 Baiduspider，还要考虑百度移动蜘蛛。",[58,172,173],{},"服务响应压到 1 秒内，超时就等于没做。",[58,175,176],{},"快照定期刷新，价格、产品名这类内容别用一年前的缓存。",[15,178,179],{"id":179},"怎么验证有没有生效",[11,181,182],{},"用百度搜索资源平台的抓取诊断，看\"抓取到的 HTML\"里有没有正文。这是最直接的方法，比在浏览器里看源码可靠。Google 这边用网址检查的\"已呈现的 HTML\"。",[15,184,185],{"id":185},"成本和我们自己的做法",[11,187,188],{},"自建一套预渲染服务，按 1000 个页面算，服务器成本每月几百块，开发两天。第三方服务按请求量计费，抓取量大的站一个月要几千块，而且响应时间不受你控制，这是 C 站翻车的主要原因。",[11,190,191],{},"我们的默认做法是自建加 Redis 缓存，快照按内容类型设过期时间：产品页 6 小时，文档页 24 小时，营销页 7 天。监控加两个指标就够了——预渲染服务的 P95 响应时间和快照缓存命中率，命中率低于 80% 就要查缓存键。",[15,193,194],{"id":194},"立场",[11,196,197],{},"预渲染是止痛药，不是治疗方案。它解决的是\"现在就要收录\"，不解决\"三年后的结构问题\"。真要做长线，SSR 或者 SSG 早晚要上。预渲染只适合两类团队：排期排不出重构的，和页面数量不大、只想先拿流量的。",{"title":97,"searchDepth":98,"depth":98,"links":199},[200,201,202,203,204,205,206],{"id":132,"depth":98,"text":132},{"id":153,"depth":98,"text":153},{"id":159,"depth":98,"text":159},{"id":165,"depth":98,"text":165},{"id":179,"depth":98,"text":179},{"id":185,"depth":98,"text":185},{"id":194,"depth":98,"text":194},"2026-03-20","预渲染在 Google 上通常有效，在百度上不一定。我们用 4 个客户站做了 3 个月对照，2 个收录明显改善，2 个几乎没变化，差异出在三个可查的地方。",{},"\u002Fblog\u002Fprerender-baidu-indexing-test",{"title":124,"description":208},"blog\u002Fprerender-baidu-indexing-test",[214,215,216],"预渲染","百度收录","SPA","rjyjKEfLsRqG6iabp6gXIRsF5HV9TjvgQ9bLo0Wbgjw",{"id":219,"title":220,"author":6,"body":221,"canonical":106,"category":309,"cover":106,"date":310,"description":311,"draft":110,"extension":111,"keywords":106,"meta":312,"navigation":113,"noindex":110,"ogImage":106,"path":313,"seo":314,"seoDescription":106,"seoTitle":106,"stem":315,"tags":316,"updated":106,"__hash__":320},"blog\u002Fblog\u002Fintent-mismatch-fix.md","意图错配让一个站两个月掉 34% 流量，我们这样修的",{"type":8,"value":222,"toc":299},[223,226,229,232,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,281,284,287,290,293,296],[11,224,225],{},"2026 年 1 月，一个客户找到我们，自然流量两个月掉了 34%。技术侧没问题，外链没少，文章也没删。查下来是 9 个页面承接了不属于它们的搜索意图。拆开之后六周，流量回到原来的 96%。",[15,227,228],{"id":228},"症状是什么样的",[11,230,231],{},"有曝光，没点击。或者点击了，十秒就跳出。搜索后台里，这些页面的曝光在涨，点击率却从 2.1% 掉到 0.8%。",[11,233,234],{},"排名也没有完全掉，很多词还在 8 到 15 名之间。这就是意图错配的典型信号：排得上，但用户不认。",[15,236,237],{"id":237},"怎么找出来",[11,239,240],{},"把查询级数据导出来，看每个页面承接了多少个不同意图的查询。一个页面同时接“是什么”“怎么选”“报错”三类词，基本就是错配。",[11,242,243],{},"我们那次找出 9 个页面，其中一个页面承接了 47 个查询，横跨三类意图。",[15,245,246],{"id":246},"为什么会变成这样",[11,248,249],{},"大多数是历史原因。页面一开始写的是学习类内容，后来运营为了省事，把对比信息和报错 FAQ 都堆进同一个页面，标题改过三次，正文越加越长。",[11,251,252],{},"页面变成了万能页，结果哪一类用户都不满意。",[15,254,255],{"id":255},"怎么修",[11,257,258],{},"能拆就拆。原来的页面留给最大的那类意图，另外两类各开一个新页面，内容重写，内链互相挂。",[11,260,261],{},"拆不了的，改页面类型。把博客文章改成文档页或对比页，标题、结构、CTA 全部重做。",[15,263,264],{"id":264},"修完的节奏",[11,266,267],{},"先改 3 个页面，观察四周，再改剩下 6 个。一次全改，出问题查不出原因。",[11,269,270],{},"那次我们第 2 周看到点击率回升，第 4 周排名稳住，第 6 周流量回到 96%。剩下的 4% 是季节波动，不是这次修改的问题。",[15,272,273],{"id":273},"怎么预防",[11,275,276],{},"词表里每个词标意图，页面立项时确认只接一种意图。这个规矩我们在 2025 年就写过，客户没执行，于是有了这次事故。",[15,278,280],{"id":279},"另一种错配页面没错标题错了","另一种错配：页面没错，标题错了",[11,282,283],{},"有些页面内容是对的，标题承诺了另一类意图。搜“怎么选”的人点进来，看到的是功能说明，一样会走。",[11,285,286],{},"这种情况改标题和首段就行，不用重写。我们那次 9 个页面里，有 3 个属于这一类，改完一周就看到点击率变化。",[15,288,289],{"id":289},"怎么防止再犯",[11,291,292],{},"新页面立项时写两行：目标词、目标意图。发布前由第二个人核对一遍，确认页面类型和意图匹配。",[11,294,295],{},"这个检查两分钟，能省掉后面几个月的返工。",[11,297,298],{},"意图错配不会立刻爆，它慢慢积累，等到某天算法调整或者竞品发力，才一次性显出来。",{"title":97,"searchDepth":98,"depth":98,"links":300},[301,302,303,304,305,306,307,308],{"id":228,"depth":98,"text":228},{"id":237,"depth":98,"text":237},{"id":246,"depth":98,"text":246},{"id":255,"depth":98,"text":255},{"id":264,"depth":98,"text":264},{"id":273,"depth":98,"text":273},{"id":279,"depth":98,"text":280},{"id":289,"depth":98,"text":289},"SEO","2026-03-22","2026 年 1 月一个客户自然流量两个月掉 34%，技术没动、外链没少、文章也没删。问题出在 9 个页面承接了不属于它的意图，拆开之后六周恢复。",{},"\u002Fblog\u002Fintent-mismatch-fix",{"title":220,"description":311},"blog\u002Fintent-mismatch-fix",[317,318,319],"搜索意图","流量下滑","复盘","UXVNi3Dk2O6JLxPKOT6zu6N1UmfpbmOw8nkSrWtPXNo",1794088107426]