一行 CSS 把强制布局从 27.3ms 压到 1.8ms：content-visibility 实测
同一份 HTML、同样的字节数，只多加一行 CSS，强制布局成本就降了 15 倍。我把一个 400 段的页面做了两个版本，用 Chrome 追踪和 Performance API 实测 content-visibility: auto 到底省了多少渲染，并讲清 contain-intrinsic-size 与无障碍陷阱。
标签
Core Web Vitals
4篇文章
点一下花了264ms — 同样的活儿切碎后只要56ms：一次INP实测
INP在2024年取代FID成为Core Web Vitals的响应性指标。我用Event Timing API直接测量同样220ms的工作在一口气跑完与用scheduler.yield切碎两种做法下的差异，并用代码和日志完整记录264ms(需改进)如何降到56ms(良好)的全过程。
刚要点按钮，页面却跳了一下 — 把 CLS 从 0.559 压到 0.014 的实测记录
加载时布局乱跳不是审美问题，而是一个能量化的指标。我把同一个页面做了两版，用 layout-shift PerformanceObserver 测 CLS，只靠给图片预留盒子、给动态内容预留槽位，就把 0.559（POOR）压到了 0.014（GOOD）。过程有代码，有日志，也有可以照着复现的测量步骤。
英雄图只有117KB，LCP 却要1.2秒 — 浏览器为什么"太晚才找到"你的图片
LCP 慢，往往不是图片太重，而是浏览器"什么时候发现"这张图的问题。我用 Chrome DevTools 实测了 CSS 背景图对预加载扫描器隐身的现象，再用 fetchpriority、preload 和去掉渲染阻塞 CSS，把 LCP 从 1247ms 压到 109ms。