刚要点按钮，页面却跳了一下 — 把 CLS 从 0.559 压到 0.014 的实测记录
加载时布局乱跳不是审美问题，而是一个能量化的指标。我把同一个页面做了两版，用 layout-shift PerformanceObserver 测 CLS，只靠给图片预留盒子、给动态内容预留槽位，就把 0.559（POOR）压到了 0.014（GOOD）。过程有代码，有日志，也有可以照着复现的测量步骤。
archive
专栏 · 第 5
356 · 第 5
英雄图只有117KB，LCP 却要1.2秒 — 浏览器为什么"太晚才找到"你的图片
LCP 慢，往往不是图片太重，而是浏览器"什么时候发现"这张图的问题。我用 Chrome DevTools 实测了 CSS 背景图对预加载扫描器隐身的现象，再用 fetchpriority、preload 和去掉渲染阻塞 CSS，把 LCP 从 1247ms 压到 109ms。
结构化数据要在上线前拦下 — 在 CI 里自动校验 JSON-LD
JSON-LD 解析器放行的标记，搜索引擎未必读得懂。因为 schema.org 设了 @vocab，拼写错误和大小写错误都会展开成合法的 JSON-LD。这里用一个 60 行的、懂 schema 的校验器，在 CI 里把它们拦下，附真实运行日志。
自动无障碍检测亮了绿灯，仍留下的四道墙
我往一张结账页面里故意埋了八处WCAG障碍，再用axe-core跑一遍。规则型的四处被抓住，需要人来判断的四处却在绿灯背后原样留着。本文用实测日志说清楚自动化在结构上看不到什么，以及补上这块缺口的人工复查清单。
JSON-LD vs Microdata vs RDFa — 结构化数据语法，何时用哪个(实测对比)
把同一个 Product 实体用三种语法各写一遍，喂进解析器，实测字节数和易碎程度。Google 三者同等对待。那么推荐 JSON-LD 的真正理由不是排名，而是能在改版中活下来的耦合度。用官方文档和可复现日志梳理出的选型标准。
无障碍名称一旦错位，语音控制和AI智能体都按不了这个按钮
给按钮加了aria-label，无障碍树读出来的却是屏幕上根本看不到的字。我在沙盒里复现了WCAG 2.5.3 Label in Name违规，直接从无障碍树读出问题，再用Lighthouse 13.3.0新增的Agentic Browsing评分，看着它从0分变成100分。
AI 爬虫不会执行你的 JavaScript
GPTBot、ClaudeBot 都不渲染 JS。用 curl 复现 CSR 页面为何在 AI 搜索里隐形，并给出改为服务端渲染的具体做法。
sitemap.xml 里，Google 真正会读的只有 lastmod
给首页加上 priority 1.0 和 changefreq always，Google 全部丢弃。官方文档只用一个字段——lastmod，而且只在它可验证地准确时才用。我用官方 XSD 实际跑了三种 sitemap，看清什么通过校验、什么被悄悄忽略。
同一份标记，不同判定 — 把 axe-core 塞进 CI 时 color-contrast 为何悄悄消失
我把一个 AI 生成的预订组件分别用 axe-core 跑在 jsdom 和真实浏览器里。四条结构性违规不用浏览器就被抓住，唯独 color-contrast 在 jsdom 里落到了 incomplete。这篇讲清楚原因，以及如何把 CI 流水线拆成两层、让覆盖率的洞不再出现，附带真实日志。
我把技术SEO审计连跑了五天——比修好的五项更关键的是那几道门禁
对我的四语言博客做了五天实测审计。relatedPosts的404有12个、hreflang断链4对、渲染阻塞的字体CSS 405KB、翻译漂移21处、碎片化JSON-LD 7块。全都修了。但真正的成果是让它们再也回不来的构建门禁。附实测日志与检查器代码。
把 JSON-LD 拧成一个 @graph — 让散落的结构化数据变成搜索与 AI 能读懂的实体模型
把自己页面的 JSON-LD 丢进校验工具，结果散成了三座孤岛。本文用 @id 节点引用把 Organization、WebSite、Article 拧进一个 @graph，并用 jsonld 实测连通性：三个分量如何合并成一个，以及 Google 不保证的地方。
hreflang必须双向 — 审计自己的四语言博客，揪出首页的一个漏洞
我把一个30行的检查器直接跑在自己网站的构建产物上。248篇博客文章的hreflang集群全部通过，唯独首页没过。本文梳理Google官方的相互链接规则、实测日志、三种实现方式的对比，以及开发者可以直接套用的修复代码。