[{"data":1,"prerenderedAt":326},["ShallowReactive",2],{"blog-cls-real-causes":3,"blog-prev-cls-real-causes":107,"blog-next-cls-real-causes":243},{"id":4,"title":5,"author":6,"body":7,"canonical":91,"category":92,"cover":91,"date":93,"description":94,"draft":95,"extension":96,"keywords":91,"meta":97,"navigation":98,"noindex":95,"ogImage":91,"path":99,"seo":100,"seoDescription":91,"seoTitle":91,"stem":101,"tags":102,"updated":91,"__hash__":106},"blog\u002Fblog\u002Fcls-real-causes.md","CLS 高不一定是图片没尺寸，我们查到的四类真凶","元析智能",{"type":8,"value":9,"toc":80},"minimark",[10,14,17,21,24,27,30,33,36,39,42,45,49,52,56,59,62,65,68,71,74,77],[11,12,13],"p",{},"CLS 高，很多人第一反应是图片没写宽高。这个原因确实存在，但在我们今年查的 14 个软件站里，它不是主因：CLS 超过 0.25 的 5 个站，有 4 个的真凶是字体切换和动态插入的组件。图片没尺寸只占 1 个，而且那个站的 CLS 只有 0.18。",[11,15,16],{},"先把概念说清楚。CLS 是 Cumulative Layout Shift，衡量页面元素在加载过程中意外移动的幅度，0.1 以下算好，0.25 以上算差。注意\"意外\"两个字：用户点击后展开的内容不算，只有没人操作时自己跳的才计分。",[18,19,20],"h2",{"id":20},"字体切换导致的位移",[11,22,23],{},"中文站高发。回退字体和自定义字体的字宽不一样，字体一到位，整段文字重新换行，下面的内容全部移动。这种位移往往发生在首屏正文，分值很高。",[11,25,26],{},"一个做低代码平台的公司，CLS 0.29。移动端 h1 加两行副标题，字体到位后标题从两行变三行，下面按钮下移 48 像素。改法是把字体子集化和预加载做好，再用 size-adjust 校准回退字体的字宽，字号和行高都写死。",[18,28,29],{"id":29},"动态插入的组件",[11,31,32],{},"AB 测试、营销横幅、cookie 提示，这些组件在 JS 执行后往 DOM 里插东西，插在页面顶部就整页下移。",[11,34,35],{},"一个数据工具站的 CLS 是 0.31，查下来是 AB 测试脚本给导航条多加了一个\"免费试用\"按钮，导航从一行变两行，整页下移 64 像素。这种位移最隐蔽，因为产品经理认为那只是换了个版本。",[18,37,38],{"id":38},"懒加载内容的位置",[11,40,41],{},"用户往下读，上面的图片才开始加载，加载完撑开高度，把正在读的段落顶走。这种位移最招人烦，因为它发生在阅读过程中，而不是页面刚打开的时候。",[11,43,44],{},"改法是给懒加载的图片和广告位预留高度，或者用 content-visibility 配合 intrinsic size。",[18,46,48],{"id":47},"图片和-iframe-没尺寸","图片和 iframe 没尺寸",[11,50,51],{},"这个原因还在，主要是 iframe 和嵌入视频。img 现在大部分框架会带 width\u002Fheight，但第三方 iframe（地图、演示视频、客服）经常没有。",[18,53,55],{"id":54},"第五类单页应用的路由切换","第五类：单页应用的路由切换",[11,57,58],{},"这一点常被忽略。SPA 切换路由时，如果新页面先渲染一个空容器再填内容，或者旧页面在数据回来前先清空，中间会有一段时间页面高度不对，浏览器就记一次位移。文档站、控制台这类站高发。",[11,60,61],{},"查法是录一段站内跳转的 Performance，看路由切换后有没有连续两次布局变化。改法是用路由级的骨架屏，并且保证骨架和真实内容高度一致。",[18,63,64],{"id":64},"为什么中文站更容易中招",[11,66,67],{},"三条原因叠在一起：中文字体文件大、回退字体和自定义字体的字宽差异明显、正文行数多。同样一处字体切换，英文站位移 20 像素，中文站可能整段重排、位移 100 像素以上。",[11,69,70],{},"我们给中文站排优先级时，字体相关的位移永远排第一。先把字体加载路径修好，再去看图片和组件，顺序反过来会白干。",[18,72,73],{"id":73},"查法",[11,75,76],{},"Lighthouse 的 CLS 归因会给到具体元素，Chrome Performance 面板的 Experience 轨道能录到每一次位移和它的来源，真实用户数据那边用 web-vitals 库能拿到 largest shift 的元素。",[11,78,79],{},"我们一般先修移动端，因为移动端 CLS 通常是桌面端的两倍。修的顺序按\"移动端面积最大的一次位移\"来，不要按 Lighthouse 列出的顺序，前者是用户真正看到的，后者只是权重排序。",{"title":81,"searchDepth":82,"depth":82,"links":83},"",2,[84,85,86,87,88,89,90],{"id":20,"depth":82,"text":20},{"id":29,"depth":82,"text":29},{"id":38,"depth":82,"text":38},{"id":47,"depth":82,"text":48},{"id":54,"depth":82,"text":55},{"id":64,"depth":82,"text":64},{"id":73,"depth":82,"text":73},null,"技术SEO","2025-11-09","今年查的 14 个软件站里，CLS 超 0.25 的 5 个有 4 个主因是字体切换和动态组件，图片没尺寸只占 1 个。四类真凶按实际占比排序，附上每类的查法。",false,"md",{},true,"\u002Fblog\u002Fcls-real-causes",{"title":5,"description":94},"blog\u002Fcls-real-causes",[103,104,105],"CLS","布局偏移","前端性能","5KIVOlLHlXCt8Pe7xtOlTgVHSUszsTJiPyIRnyvE6UQ",{"id":108,"title":109,"author":6,"body":110,"canonical":91,"category":92,"cover":91,"date":232,"description":233,"draft":95,"extension":96,"keywords":91,"meta":234,"navigation":98,"noindex":95,"ogImage":91,"path":235,"seo":236,"seoDescription":91,"seoTitle":91,"stem":237,"tags":238,"updated":91,"__hash__":242},"blog\u002Fblog\u002Fhreflang-config-three-checks.md","hreflang 配错比不配更糟，三个必查点",{"type":8,"value":111,"toc":223},[112,115,119,131,135,142,146,189,193,196,199,202,205,208,211,214,217,220],[11,113,114],{},"hreflang 的作用是告诉搜索引擎：这几个页面是同一内容的不同语言版本，请按用户的语言和地区展示对应的那个。配错的后果不是报错，而是本该给中文用户看的页面展示了英文版，或者两个版本互相抢排名，哪边都上不去。",[18,116,118],{"id":117},"必查点一自引用","必查点一：自引用",[11,120,121,122,126,127,130],{},"每个语言版本都要把自己的 hreflang 写进列表。只写\"另一个版本\"是最高频的错，蜘蛛看到不完整的组，会直接忽略整组标记。比如中文页写 ",[123,124,125],"code",{},"hreflang=\"en\""," 指英文页，英文页写 ",[123,128,129],{},"hreflang=\"zh-Hans\""," 指中文页，两页都没写自己——这组等于没配。",[18,132,134],{"id":133},"必查点二x-default","必查点二：x-default",[11,136,137,138,141],{},"没有匹配到语言时展示哪个版本，就靠 ",[123,139,140],{},"hreflang=\"x-default\"","。多语言站常漏这条，结果俄罗斯用户搜到的是中文页。x-default 一般指向英文版，或者一个语言选择页。",[18,143,145],{"id":144},"必查点三语言和地区代码","必查点三：语言和地区代码",[11,147,148,151,152,151,155,151,158,151,161,164,165,168,169,172,173,176,177,180,181,184,185,188],{},[123,149,150],{},"zh-Hans","、",[123,153,154],{},"zh-Hant",[123,156,157],{},"en",[123,159,160],{},"en-US",[123,162,163],{},"pt-BR","，写错一个字母整组失效。常见错误：",[123,166,167],{},"zh-CN"," 和 ",[123,170,171],{},"zh"," 混用、",[123,174,175],{},"en-UK","（正确是 ",[123,178,179],{},"en-GB","）、把地区当语言（",[123,182,183],{},"jp"," 不是语言代码，日语是 ",[123,186,187],{},"ja","）。",[18,190,192],{"id":191},"_2025-年-9-月那次修正","2025 年 9 月那次修正",[11,194,195],{},"一个开发者工具站做中英双语，hreflang 用插件自动生成。查下来模板变量反了：英文页标着指向中文页，中文页指向自己，x-default 完全没有。三个月里英文关键词的搜索结果展示的是中文页，跳出率 78%。修正后第 5 周，英文版的点击率从 2.1% 提到 5.6%。",[18,197,198],{"id":198},"怎么验证",[11,200,201],{},"Screaming Frog 的 hreflang 报告能一次看全站的互相指向关系，重点看两个指标：有没有指向 404 或重定向页、有没有缺回指。再人工抽 10 个页面看源码，确认 HTML head 里的 link 标签和页面语言一致。",[11,203,204],{},"Google 官方没有专门的 hreflang 报错报告，配错了不会提醒你，只能自己查。百度对 hreflang 的支持有限，中文站之间别指望它。",[18,206,207],{"id":207},"我们最常纠正的一种组合错",[11,209,210],{},"把 canonical 和 hreflang 搅在一起。有人觉得\"英文页是主版本\"，就让中文页的 canonical 指向英文页——这在多语言站里是灾难。中文用户搜到中文页，蜘蛛按 canonical 把它归并到英文页，中文页永远不单独排名。正确做法：canonical 指向同语言版本自己，语言关系交给 hreflang。",[11,212,213],{},"我们还有一个习惯，hreflang 上线前在测试环境把整组关系导成表格核对一遍，左边放页面、右边放它应该指向的四个语言版本，缺哪个补哪个。比上线后在源码里找错快得多。",[18,215,216],{"id":216},"两个判断",[11,218,219],{},"只有两个语言版本、内容量不大的站，hreflang 的收益有限，先把两边的页面内容做扎实。五个以上语言版本、每个版本几百页的站，hreflang 是必需品，而且要进发布流程，新增页面时自动带上。",[11,221,222],{},"最后一条：canonical 指向同语言版本的自己，不要跨语言指。canonical 和 hreflang 管的是两件事，混用会让蜘蛛不知道你到底想要哪个版本。",{"title":81,"searchDepth":82,"depth":82,"links":224},[225,226,227,228,229,230,231],{"id":117,"depth":82,"text":118},{"id":133,"depth":82,"text":134},{"id":144,"depth":82,"text":145},{"id":191,"depth":82,"text":192},{"id":198,"depth":82,"text":198},{"id":207,"depth":82,"text":207},{"id":216,"depth":82,"text":216},"2025-11-08","hreflang 不是翻译插件自动生成就完事。我们查过 20 多个多语言软件站，最常见的错是缺自引用、缺 x-default、语言代码写错。这篇给三个必查点和一份验证方法。",{},"\u002Fblog\u002Fhreflang-config-three-checks",{"title":109,"description":233},"blog\u002Fhreflang-config-three-checks",[239,240,241],"hreflang","多语言","国际化","Sr63tcEPE0GveohvCkh6ZTTxZLW6WF8Xhsl4ZjFZOkU",{"id":244,"title":245,"author":6,"body":246,"canonical":91,"category":314,"cover":91,"date":315,"description":316,"draft":95,"extension":96,"keywords":91,"meta":317,"navigation":98,"noindex":95,"ogImage":91,"path":318,"seo":319,"seoDescription":91,"seoTitle":91,"stem":320,"tags":321,"updated":91,"__hash__":325},"blog\u002Fblog\u002Finformation-gain-paragraph.md","信息增益不是玄学，它落在一段具体的话里",{"type":8,"value":247,"toc":306},[248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,300,303],[11,249,250],{},"信息增益不是把文章写得更长，也不是多塞几个小节。它落在一段具体的话里：有一句话，同行写不出来，只有你能写。我判断一篇稿子能不能发，就看这一句在不在。",[18,252,253],{"id":253},"什么叫只有你能写的一句话",[11,255,256],{},"举个我们自己的例子。“我们在 8 核 16G 的机器上压过这个接口网关，QPS 到 1200 时，P99 延迟从 38 毫秒跳到 240 毫秒。”这句话同行写不出来，因为他没测过，也没必要测。",[11,258,259],{},"再比如“客户花了 11 万买这套系统，第三年续费时砍掉了 40% 的模块”。这种数字只有做过交付的人说得出。",[18,261,262],{"id":262},"四种能造出增益的原料",[11,264,265],{},"第一种是实测数据，自己跑出来的性能、耗时、排名、流量。第二种是客户现场细节，他们怎么用、卡在哪、内部谁反对。第三种是成本，报价区间、实施周期、人力投入。第四种是失败记录，什么方案没成，为什么。",[11,267,268],{},"这四样都不需要什么资源，只需要你在一线待过。写不出来往往是因为离业务太远，不是因为文笔。",[18,270,271],{"id":271},"我们毙过的一篇稿",[11,273,274],{},"2025 年 4 月，一篇 3200 字的“XX 选型指南”，结构清楚、小标题工整、配了图。审下来我毙了，因为里面每一句话都能在另外三篇文章里找到，没有一句是我们独有的。",[11,276,277],{},"那篇稿子改了两轮还是不行，最后换题重写。换成“我们给 6 家客户做选型时，报价差在哪四块”，两天就写完了，阅读量和咨询量都是原来那篇的三倍。",[18,279,280],{"id":280},"写作时怎么保住这句话",[11,282,283],{},"初稿第一件事就是把这句独有信息写出来，放在开头第二段，不要埋到文末。埋到文末的独家内容，读者看不到，AI 摘录时也不一定能摘到。",[11,285,286],{},"然后围绕它搭结构：这句话讲的是哪个结论，前面补背景，后面补怎么得到的、什么条件下成立。",[18,288,289],{"id":289},"一篇文章的标准",[11,291,292],{},"我们现在的标准是至少两处独有信息：一处是数据，一处是判断。只有数据没有判断，是调研报告；只有判断没有数据，是个人意见。",[11,294,295],{},"两处都凑不齐，说明这个题我们不该写。写不出来就换题，换题比硬写便宜得多。",[18,297,299],{"id":298},"这也解释了-e-e-a-t","这也解释了 E-E-A-T",[11,301,302],{},"E-E-A-T 里的经验和实操，最终都要落成这样的句子。作者署名、作者简介、更新时间只是外壳，外壳里没有这种话，搜索引擎和 AI 都看得出来。",[11,304,305],{},"我见过太多页面把作者简介写得很漂亮，正文全是转述。这种东西写一百篇，不如一篇带实测数据的。",{"title":81,"searchDepth":82,"depth":82,"links":307},[308,309,310,311,312,313],{"id":253,"depth":82,"text":253},{"id":262,"depth":82,"text":262},{"id":271,"depth":82,"text":271},{"id":280,"depth":82,"text":280},{"id":289,"depth":82,"text":289},{"id":298,"depth":82,"text":299},"SEO","2025-11-10","判断一篇稿子能不能发，我只看有没有一句话是同行写不出来的。实测数据、客户现场、成本和失败记录是四种能造出增益的原料，凑不齐就别写，换题比硬写便宜。",{},"\u002Fblog\u002Finformation-gain-paragraph",{"title":245,"description":316},"blog\u002Finformation-gain-paragraph",[322,323,324],"信息增益","内容质量","选题判断","DlQ7Lc2zyKf2vCQItaKdtferfzdxF44z7Rk1Sb8xsbs",1794088110974]