[{"data":1,"prerenderedAt":4075},["ShallowReactive",2],{"article-/topics/performance/rich-text-editor-performance-optimization":3,"related-performance":484,"content-query-C9my3RLlR1":3709},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":23,"_type":478,"_id":479,"_source":480,"_file":481,"_stem":482,"_extension":483},"/topics/performance/rich-text-editor-performance-optimization","performance",false,"","富文本编辑器性能优化：从输入延迟到协作渲染的关键治理策略","富文本编辑器的性能瓶颈往往来自输入、选区、历史记录、插件系统与协作机制的叠加。本文从编辑器核心链路出发，讲清如何系统优化富文本编辑器性能。","2026-04-23","HTMLPAGE 团队",[13,14,15,16,17],"Rich Text Editor","Performance","ContentEditable","Collaboration","Frontend Engineering","/images/topics/performance/rich-text-editor-performance-optimization.jpg","developer working on text editor interface code screen",256502,"https://www.pexels.com/photo/close-up-of-text-on-black-background-256502/",15,{"type":24,"children":25,"toc":466},"root",[26,34,39,69,74,80,85,108,113,118,123,146,151,169,174,179,184,189,207,212,230,235,241,246,251,269,274,292,297,302,320,325,331,336,354,359,382,387,392,420,425,430,435],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","富文本编辑器的性能问题，和普通页面完全不是一个量级。",{"type":27,"tag":28,"props":35,"children":36},{},[37],{"type":32,"value":38},"它不是单次渲染，而是持续交互系统：",{"type":27,"tag":40,"props":41,"children":42},"ul",{},[43,49,54,59,64],{"type":27,"tag":44,"props":45,"children":46},"li",{},[47],{"type":32,"value":48},"输入字符要立即响应",{"type":27,"tag":44,"props":50,"children":51},{},[52],{"type":32,"value":53},"选区变化要实时同步",{"type":27,"tag":44,"props":55,"children":56},{},[57],{"type":32,"value":58},"工具栏状态要跟着文档变化",{"type":27,"tag":44,"props":60,"children":61},{},[62],{"type":32,"value":63},"撤销重做要可恢复",{"type":27,"tag":44,"props":65,"children":66},{},[67],{"type":32,"value":68},"协作场景还要处理远端更新",{"type":27,"tag":28,"props":70,"children":71},{},[72],{"type":32,"value":73},"这意味着编辑器性能不是“渲染快一点”就够，而是要让整条编辑链路都足够稳定。",{"type":27,"tag":75,"props":76,"children":78},"h2",{"id":77},"先把性能问题拆成四条链路",[79],{"type":32,"value":77},{"type":27,"tag":28,"props":81,"children":82},{},[83],{"type":32,"value":84},"富文本编辑器的性能瓶颈，通常集中在四条链路：",{"type":27,"tag":40,"props":86,"children":87},{},[88,93,98,103],{"type":27,"tag":44,"props":89,"children":90},{},[91],{"type":32,"value":92},"输入链路：按键、组合输入、粘贴、删除",{"type":27,"tag":44,"props":94,"children":95},{},[96],{"type":32,"value":97},"渲染链路：节点更新、样式计算、块级重绘",{"type":27,"tag":44,"props":99,"children":100},{},[101],{"type":32,"value":102},"状态链路：选区、工具栏、历史记录、插件事件",{"type":27,"tag":44,"props":104,"children":105},{},[106],{"type":32,"value":107},"协作链路：远端变更、冲突合并、光标同步",{"type":27,"tag":28,"props":109,"children":110},{},[111],{"type":32,"value":112},"只有先分清问题在哪条链路，优化才不会变成到处加 debounce。",{"type":27,"tag":75,"props":114,"children":116},{"id":115},"输入性能的关键是减少全量重算",[117],{"type":32,"value":115},{"type":27,"tag":28,"props":119,"children":120},{},[121],{"type":32,"value":122},"很多编辑器输入卡顿，不是浏览器太慢，而是每次输入都触发了过多工作：",{"type":27,"tag":40,"props":124,"children":125},{},[126,131,136,141],{"type":27,"tag":44,"props":127,"children":128},{},[129],{"type":32,"value":130},"重新解析整份文档",{"type":27,"tag":44,"props":132,"children":133},{},[134],{"type":32,"value":135},"重新计算整个工具栏状态",{"type":27,"tag":44,"props":137,"children":138},{},[139],{"type":32,"value":140},"重新生成所有装饰节点",{"type":27,"tag":44,"props":142,"children":143},{},[144],{"type":32,"value":145},"重新同步全局 store",{"type":27,"tag":28,"props":147,"children":148},{},[149],{"type":32,"value":150},"编辑器最需要的是局部更新思路：",{"type":27,"tag":40,"props":152,"children":153},{},[154,159,164],{"type":27,"tag":44,"props":155,"children":156},{},[157],{"type":32,"value":158},"只更新受影响的 block 或 node",{"type":27,"tag":44,"props":160,"children":161},{},[162],{"type":32,"value":163},"选区相关逻辑按最小范围重算",{"type":27,"tag":44,"props":165,"children":166},{},[167],{"type":32,"value":168},"工具栏状态延迟到必要时刷新",{"type":27,"tag":28,"props":170,"children":171},{},[172],{"type":32,"value":173},"编辑器只要把“单字符输入”做成全量计算，后面任何优化都会越来越难。",{"type":27,"tag":75,"props":175,"children":177},{"id":176},"历史记录系统决定了内存与交互成本",[178],{"type":32,"value":176},{"type":27,"tag":28,"props":180,"children":181},{},[182],{"type":32,"value":183},"撤销重做很容易被当作功能补充，但在编辑器里，它其实是性能问题的重要来源。",{"type":27,"tag":28,"props":185,"children":186},{},[187],{"type":32,"value":188},"如果历史系统每次都保存完整快照，就会出现：",{"type":27,"tag":40,"props":190,"children":191},{},[192,197,202],{"type":27,"tag":44,"props":193,"children":194},{},[195],{"type":32,"value":196},"文档越长越卡",{"type":27,"tag":44,"props":198,"children":199},{},[200],{"type":32,"value":201},"连续输入导致内存飙升",{"type":27,"tag":44,"props":203,"children":204},{},[205],{"type":32,"value":206},"撤销一次也要大量 diff",{"type":27,"tag":28,"props":208,"children":209},{},[210],{"type":32,"value":211},"更合理的思路是按操作组织历史：",{"type":27,"tag":40,"props":213,"children":214},{},[215,220,225],{"type":27,"tag":44,"props":216,"children":217},{},[218],{"type":32,"value":219},"连续输入合并为一个事务",{"type":27,"tag":44,"props":221,"children":222},{},[223],{"type":32,"value":224},"样式调整和结构调整分别建模",{"type":27,"tag":44,"props":226,"children":227},{},[228],{"type":32,"value":229},"远端协作操作单独记录",{"type":27,"tag":28,"props":231,"children":232},{},[233],{"type":32,"value":234},"这样既能保住撤销体验，也能避免历史栈变成性能黑洞。",{"type":27,"tag":75,"props":236,"children":238},{"id":237},"插件系统要避免每个插件都监听一切",[239],{"type":32,"value":240},"插件系统要避免“每个插件都监听一切”",{"type":27,"tag":28,"props":242,"children":243},{},[244],{"type":32,"value":245},"编辑器一旦开放插件能力，最容易出现的架构问题是：所有插件都监听输入、选区和渲染事件。",{"type":27,"tag":28,"props":247,"children":248},{},[249],{"type":32,"value":250},"结果就是：",{"type":27,"tag":40,"props":252,"children":253},{},[254,259,264],{"type":27,"tag":44,"props":255,"children":256},{},[257],{"type":32,"value":258},"一个输入动作触发十几个插件计算",{"type":27,"tag":44,"props":260,"children":261},{},[262],{"type":32,"value":263},"插件之间互相放大性能波动",{"type":27,"tag":44,"props":265,"children":266},{},[267],{"type":32,"value":268},"很难定位是谁拖慢了编辑器",{"type":27,"tag":28,"props":270,"children":271},{},[272],{"type":32,"value":273},"更稳的方式是：",{"type":27,"tag":40,"props":275,"children":276},{},[277,282,287],{"type":27,"tag":44,"props":278,"children":279},{},[280],{"type":32,"value":281},"只暴露必要钩子",{"type":27,"tag":44,"props":283,"children":284},{},[285],{"type":32,"value":286},"插件按能力域订阅，而不是全量监听",{"type":27,"tag":44,"props":288,"children":289},{},[290],{"type":32,"value":291},"为重插件提供异步计算或延后执行通道",{"type":27,"tag":75,"props":293,"children":295},{"id":294},"协作能力最容易把编辑器拖慢",[296],{"type":32,"value":294},{"type":27,"tag":28,"props":298,"children":299},{},[300],{"type":32,"value":301},"多人协作带来的问题不是只有冲突，还有性能放大：",{"type":27,"tag":40,"props":303,"children":304},{},[305,310,315],{"type":27,"tag":44,"props":306,"children":307},{},[308],{"type":32,"value":309},"远端更新可能频繁打断本地输入",{"type":27,"tag":44,"props":311,"children":312},{},[313],{"type":32,"value":314},"光标与评论标记会增加额外装饰层",{"type":27,"tag":44,"props":316,"children":317},{},[318],{"type":32,"value":319},"合并逻辑会放大选区和渲染开销",{"type":27,"tag":28,"props":321,"children":322},{},[323],{"type":32,"value":324},"协作场景下更重要的，不是“所有更新实时同步到最细粒度”，而是合理做批处理、节流和局部重绘。",{"type":27,"tag":75,"props":326,"children":328},{"id":327},"一个常见失败案例编辑器-demo-很顺真实文档一长就彻底失速",[329],{"type":32,"value":330},"一个常见失败案例：编辑器 demo 很顺，真实文档一长就彻底失速",{"type":27,"tag":28,"props":332,"children":333},{},[334],{"type":32,"value":335},"这种情况通常出现在前期只验证了小文档场景：",{"type":27,"tag":40,"props":337,"children":338},{},[339,344,349],{"type":27,"tag":44,"props":340,"children":341},{},[342],{"type":32,"value":343},"文档只有几百字",{"type":27,"tag":44,"props":345,"children":346},{},[347],{"type":32,"value":348},"插件很少",{"type":27,"tag":44,"props":350,"children":351},{},[352],{"type":32,"value":353},"没有表格、评论、图片、嵌入块",{"type":27,"tag":28,"props":355,"children":356},{},[357],{"type":32,"value":358},"一旦进入真实生产环境，问题就集中爆发：",{"type":27,"tag":40,"props":360,"children":361},{},[362,367,372,377],{"type":27,"tag":44,"props":363,"children":364},{},[365],{"type":32,"value":366},"输入延迟明显",{"type":27,"tag":44,"props":368,"children":369},{},[370],{"type":32,"value":371},"选区抖动",{"type":27,"tag":44,"props":373,"children":374},{},[375],{"type":32,"value":376},"粘贴大段内容卡死",{"type":27,"tag":44,"props":378,"children":379},{},[380],{"type":32,"value":381},"历史记录与协作互相干扰",{"type":27,"tag":28,"props":383,"children":384},{},[385],{"type":32,"value":386},"根因通常是系统设计从一开始就没有把“长文档、复杂节点、多人协作”当作目标场景。",{"type":27,"tag":75,"props":388,"children":390},{"id":389},"一份可直接复用的检查清单",[391],{"type":32,"value":389},{"type":27,"tag":40,"props":393,"children":394},{},[395,400,405,410,415],{"type":27,"tag":44,"props":396,"children":397},{},[398],{"type":32,"value":399},"是否把输入、渲染、状态、协作四条性能链路分开分析",{"type":27,"tag":44,"props":401,"children":402},{},[403],{"type":32,"value":404},"单字符输入是否仍然会触发全量重算",{"type":27,"tag":44,"props":406,"children":407},{},[408],{"type":32,"value":409},"历史记录是否基于事务与操作，而不是全量快照",{"type":27,"tag":44,"props":411,"children":412},{},[413],{"type":32,"value":414},"插件系统是否限制了监听范围与执行时机",{"type":27,"tag":44,"props":416,"children":417},{},[418],{"type":32,"value":419},"长文档和协作场景是否被纳入基准测试",{"type":27,"tag":75,"props":421,"children":423},{"id":422},"总结",[424],{"type":32,"value":422},{"type":27,"tag":28,"props":426,"children":427},{},[428],{"type":32,"value":429},"富文本编辑器性能优化的本质，是让输入、状态、插件和协作之间的成本始终可控。只要先控制住更新粒度、历史模型和插件边界，编辑器就不会在真实业务中越用越慢。",{"type":27,"tag":28,"props":431,"children":432},{},[433],{"type":32,"value":434},"进一步阅读：",{"type":27,"tag":40,"props":436,"children":437},{},[438,448,457],{"type":27,"tag":44,"props":439,"children":440},{},[441],{"type":27,"tag":442,"props":443,"children":445},"a",{"href":444},"/topics/frontend/high-performance-editor-guide",[446],{"type":32,"value":447},"构建高性能富文本编辑器",{"type":27,"tag":44,"props":449,"children":450},{},[451],{"type":27,"tag":442,"props":452,"children":454},{"href":453},"/topics/frontend/visual-editor-core-technology-guide",[455],{"type":32,"value":456},"可视化编辑器核心技术",{"type":27,"tag":44,"props":458,"children":459},{},[460],{"type":27,"tag":442,"props":461,"children":463},{"href":462},"/topics/performance/long-tasks-splitting-and-scheduling",[464],{"type":32,"value":465},"长任务拆分与调度策略",{"title":7,"searchDepth":467,"depth":467,"links":468},3,[469,471,472,473,474,475,476,477],{"id":77,"depth":470,"text":77},2,{"id":115,"depth":470,"text":115},{"id":176,"depth":470,"text":176},{"id":237,"depth":470,"text":240},{"id":294,"depth":470,"text":294},{"id":327,"depth":470,"text":330},{"id":389,"depth":470,"text":389},{"id":422,"depth":470,"text":422},"markdown","content:topics:performance:rich-text-editor-performance-optimization.md","content","topics/performance/rich-text-editor-performance-optimization.md","topics/performance/rich-text-editor-performance-optimization","md",[485,1447,2776],{"_path":486,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":487,"description":488,"date":489,"topic":5,"author":11,"tags":490,"image":496,"featured":497,"readingTime":498,"body":499,"_type":478,"_id":1444,"_source":480,"_file":1445,"_stem":1446,"_extension":483},"/topics/performance/lcp-optimization-theory-practice","LCP 优化：从理论到实践","从渲染管线与 LCP 候选元素规则出发，系统讲清 LCP 变慢的根因，提供可复现的诊断流程与可落地的优化手段（图片、字体、SSR/CSR、资源优先级、CDN）。","2026-01-20",[491,492,493,494,495],"性能优化","LCP","Core Web Vitals","图片优化","CDN","/images/topics/performance/lcp.jpg",true,23,{"type":24,"children":500,"toc":1418},[501,506,511,516,534,539,560,565,583,587,593,598,635,640,645,648,654,659,672,677,690,695,718,721,727,732,737,742,765,768,774,781,786,799,804,817,823,828,841,847,865,868,874,880,885,904,910,923,942,948,953,965,970,979,984,990,1008,1011,1017,1023,1028,1041,1047,1052,1057,1079,1082,1088,1093,1098,1111,1116,1134,1139,1157,1160,1166,1171,1180,1185,1188,1194,1317,1320,1326,1388,1391,1395,1400],{"type":27,"tag":75,"props":502,"children":504},{"id":503},"lcp-优化从理论到实践",[505],{"type":32,"value":487},{"type":27,"tag":28,"props":507,"children":508},{},[509],{"type":32,"value":510},"LCP（Largest Contentful Paint）是 Core Web Vitals 中最能代表“用户主观感受”的指标之一：它近似回答了“页面主要内容什么时候真正出来”。",{"type":27,"tag":28,"props":512,"children":513},{},[514],{"type":32,"value":515},"很多团队优化 LCP 的方式是：",{"type":27,"tag":40,"props":517,"children":518},{},[519,524,529],{"type":27,"tag":44,"props":520,"children":521},{},[522],{"type":32,"value":523},"“把图片压一压”",{"type":27,"tag":44,"props":525,"children":526},{},[527],{"type":32,"value":528},"“上 CDN”",{"type":27,"tag":44,"props":530,"children":531},{},[532],{"type":32,"value":533},"“开 SSR”",{"type":27,"tag":28,"props":535,"children":536},{},[537],{"type":32,"value":538},"这些手段可能有效，但也经常无效——因为你没搞清楚：",{"type":27,"tag":40,"props":540,"children":541},{},[542,555],{"type":27,"tag":44,"props":543,"children":544},{},[545,547,553],{"type":32,"value":546},"LCP 的",{"type":27,"tag":548,"props":549,"children":550},"strong",{},[551],{"type":32,"value":552},"候选元素",{"type":32,"value":554},"到底是谁？",{"type":27,"tag":44,"props":556,"children":557},{},[558],{"type":32,"value":559},"LCP 的时间到底卡在：网络、解析、布局、绘制还是 JS？",{"type":27,"tag":28,"props":561,"children":562},{},[563],{"type":32,"value":564},"这篇文章按“你能在生产上稳定把 LCP 做到好”为目标，给出：",{"type":27,"tag":40,"props":566,"children":567},{},[568,573,578],{"type":27,"tag":44,"props":569,"children":570},{},[571],{"type":32,"value":572},"一套诊断流程（从现象到根因）",{"type":27,"tag":44,"props":574,"children":575},{},[576],{"type":32,"value":577},"一套常见根因 → 对应策略的映射",{"type":27,"tag":44,"props":579,"children":580},{},[581],{"type":32,"value":582},"可落地的优化手段与检查清单",{"type":27,"tag":584,"props":585,"children":586},"hr",{},[],{"type":27,"tag":75,"props":588,"children":590},{"id":589},"_1-lcp-的本质不是首屏渲染而是最大内容出现",[591],{"type":32,"value":592},"1. LCP 的本质：不是“首屏渲染”，而是“最大内容出现”",{"type":27,"tag":28,"props":594,"children":595},{},[596],{"type":32,"value":597},"浏览器会从候选元素里选一个“最大内容元素”作为 LCP 候选，常见类型包括：",{"type":27,"tag":40,"props":599,"children":600},{},[601,611,622],{"type":27,"tag":44,"props":602,"children":603},{},[604],{"type":27,"tag":605,"props":606,"children":608},"code",{"className":607},[],[609],{"type":32,"value":610},"img",{"type":27,"tag":44,"props":612,"children":613},{},[614,620],{"type":27,"tag":605,"props":615,"children":617},{"className":616},[],[618],{"type":32,"value":619},"image",{"type":32,"value":621}," 的背景图（某些情况下）",{"type":27,"tag":44,"props":623,"children":624},{},[625,627,633],{"type":32,"value":626},"大块文本（如 ",{"type":27,"tag":605,"props":628,"children":630},{"className":629},[],[631],{"type":32,"value":632},"h1",{"type":32,"value":634},"/正文块）",{"type":27,"tag":28,"props":636,"children":637},{},[638],{"type":32,"value":639},"LCP 的时间点是：这个最大元素被绘制到屏幕上的时间。",{"type":27,"tag":28,"props":641,"children":642},{},[643],{"type":32,"value":644},"关键：LCP 不是你以为的“所有内容都 ready”。它只关注“最大那个”。",{"type":27,"tag":584,"props":646,"children":647},{},[],{"type":27,"tag":75,"props":649,"children":651},{"id":650},"_2-先做识别你的-lcp-元素是谁",[652],{"type":32,"value":653},"2. 先做识别：你的 LCP 元素是谁？",{"type":27,"tag":28,"props":655,"children":656},{},[657],{"type":32,"value":658},"在 Chrome DevTools：",{"type":27,"tag":40,"props":660,"children":661},{},[662,667],{"type":27,"tag":44,"props":663,"children":664},{},[665],{"type":32,"value":666},"Performance 面板 → Web Vitals",{"type":27,"tag":44,"props":668,"children":669},{},[670],{"type":32,"value":671},"或 Lighthouse 报告里会告诉你 LCP 元素",{"type":27,"tag":28,"props":673,"children":674},{},[675],{"type":32,"value":676},"你要记录两件事：",{"type":27,"tag":40,"props":678,"children":679},{},[680,685],{"type":27,"tag":44,"props":681,"children":682},{},[683],{"type":32,"value":684},"LCP 元素类型（图片/文本）",{"type":27,"tag":44,"props":686,"children":687},{},[688],{"type":32,"value":689},"LCP 元素来源（HTML 直出、JS 渲染、背景图、第三方）",{"type":27,"tag":28,"props":691,"children":692},{},[693],{"type":32,"value":694},"因为两类 LCP 的优化路线完全不同：",{"type":27,"tag":40,"props":696,"children":697},{},[698,708],{"type":27,"tag":44,"props":699,"children":700},{},[701,706],{"type":27,"tag":548,"props":702,"children":703},{},[704],{"type":32,"value":705},"图片 LCP",{"type":32,"value":707},"：网络 + 解码 + 优先级",{"type":27,"tag":44,"props":709,"children":710},{},[711,716],{"type":27,"tag":548,"props":712,"children":713},{},[714],{"type":32,"value":715},"文本 LCP",{"type":32,"value":717},"：CSS/字体阻塞 + layout + 渲染",{"type":27,"tag":584,"props":719,"children":720},{},[],{"type":27,"tag":75,"props":722,"children":724},{"id":723},"_3-分解-lcp把总时间拆成可行动的部分",[725],{"type":32,"value":726},"3. 分解 LCP：把“总时间”拆成可行动的部分",{"type":27,"tag":28,"props":728,"children":729},{},[730],{"type":32,"value":731},"一个可用的分解模型：",{"type":27,"tag":28,"props":733,"children":734},{},[735],{"type":32,"value":736},"$$\nLCP \\approx TTFB + \\text{资源发现/调度} + \\text{下载} + \\text{解码/布局/绘制}\n$$",{"type":27,"tag":28,"props":738,"children":739},{},[740],{"type":32,"value":741},"你不需要完全精确，但必须能回答：",{"type":27,"tag":40,"props":743,"children":744},{},[745,750,755,760],{"type":27,"tag":44,"props":746,"children":747},{},[748],{"type":32,"value":749},"慢在服务器？（TTFB）",{"type":27,"tag":44,"props":751,"children":752},{},[753],{"type":32,"value":754},"慢在资源发现？（preload/优先级）",{"type":27,"tag":44,"props":756,"children":757},{},[758],{"type":32,"value":759},"慢在下载？（图片太大、带宽、CDN）",{"type":27,"tag":44,"props":761,"children":762},{},[763],{"type":32,"value":764},"慢在主线程？（长任务、渲染阻塞）",{"type":27,"tag":584,"props":766,"children":767},{},[],{"type":27,"tag":75,"props":769,"children":771},{"id":770},"_4-诊断流程生产可用版",[772],{"type":32,"value":773},"4. 诊断流程（生产可用版）",{"type":27,"tag":775,"props":776,"children":778},"h3",{"id":777},"step-1看字段真实用户的-lcp-分布",[779],{"type":32,"value":780},"Step 1：看字段——真实用户的 LCP 分布",{"type":27,"tag":28,"props":782,"children":783},{},[784],{"type":32,"value":785},"如果你有 RUM：",{"type":27,"tag":40,"props":787,"children":788},{},[789,794],{"type":27,"tag":44,"props":790,"children":791},{},[792],{"type":32,"value":793},"p75 LCP",{"type":27,"tag":44,"props":795,"children":796},{},[797],{"type":32,"value":798},"按路由/地区/设备档位切片",{"type":27,"tag":28,"props":800,"children":801},{},[802],{"type":32,"value":803},"你会发现：",{"type":27,"tag":40,"props":805,"children":806},{},[807,812],{"type":27,"tag":44,"props":808,"children":809},{},[810],{"type":32,"value":811},"可能只有低端机慢",{"type":27,"tag":44,"props":813,"children":814},{},[815],{"type":32,"value":816},"或只有某地区慢（CDN/回源）",{"type":27,"tag":775,"props":818,"children":820},{"id":819},"step-2看实验室复现-标记-lcp-元素",[821],{"type":32,"value":822},"Step 2：看实验室——复现 + 标记 LCP 元素",{"type":27,"tag":28,"props":824,"children":825},{},[826],{"type":32,"value":827},"用固定网络/CPU 限制：",{"type":27,"tag":40,"props":829,"children":830},{},[831,836],{"type":27,"tag":44,"props":832,"children":833},{},[834],{"type":32,"value":835},"Network: Fast 3G / Slow 4G",{"type":27,"tag":44,"props":837,"children":838},{},[839],{"type":32,"value":840},"CPU: 4x slowdown",{"type":27,"tag":775,"props":842,"children":844},{"id":843},"step-3拆链路ttfb-资源-主线程",[845],{"type":32,"value":846},"Step 3：拆链路——TTFB / 资源 / 主线程",{"type":27,"tag":40,"props":848,"children":849},{},[850,855,860],{"type":27,"tag":44,"props":851,"children":852},{},[853],{"type":32,"value":854},"TTFB 高：先查服务端、缓存、回源",{"type":27,"tag":44,"props":856,"children":857},{},[858],{"type":32,"value":859},"下载慢：查图片体积、格式、CDN、优先级",{"type":27,"tag":44,"props":861,"children":862},{},[863],{"type":32,"value":864},"主线程忙：查长任务、hydration、bundle",{"type":27,"tag":584,"props":866,"children":867},{},[],{"type":27,"tag":75,"props":869,"children":871},{"id":870},"_5-图片型-lcp优先级与体积是第一性",[872],{"type":32,"value":873},"5. 图片型 LCP：优先级与体积是第一性",{"type":27,"tag":775,"props":875,"children":877},{"id":876},"_51-把-lcp-图片变小但不要牺牲清晰度",[878],{"type":32,"value":879},"5.1 把 LCP 图片“变小”但不要牺牲清晰度",{"type":27,"tag":28,"props":881,"children":882},{},[883],{"type":32,"value":884},"实践优先级：",{"type":27,"tag":886,"props":887,"children":888},"ol",{},[889,894,899],{"type":27,"tag":44,"props":890,"children":891},{},[892],{"type":32,"value":893},"用现代格式：AVIF/WebP",{"type":27,"tag":44,"props":895,"children":896},{},[897],{"type":32,"value":898},"合理尺寸：不要把 2000px 的图缩到 400px 显示",{"type":27,"tag":44,"props":900,"children":901},{},[902],{"type":32,"value":903},"质量参数：基于视觉对比选一个阈值",{"type":27,"tag":775,"props":905,"children":907},{"id":906},"_52-确保-lcp-图片不是懒加载",[908],{"type":32,"value":909},"5.2 确保 LCP 图片不是懒加载",{"type":27,"tag":28,"props":911,"children":912},{},[913,915,921],{"type":32,"value":914},"LCP 图片如果被 ",{"type":27,"tag":605,"props":916,"children":918},{"className":917},[],[919],{"type":32,"value":920},"loading=\"lazy\"",{"type":32,"value":922},"，通常会变慢。",{"type":27,"tag":40,"props":924,"children":925},{},[926,937],{"type":27,"tag":44,"props":927,"children":928},{},[929,931],{"type":32,"value":930},"LCP 相关图片：",{"type":27,"tag":605,"props":932,"children":934},{"className":933},[],[935],{"type":32,"value":936},"loading=\"eager\"",{"type":27,"tag":44,"props":938,"children":939},{},[940],{"type":32,"value":941},"或显式 preload",{"type":27,"tag":775,"props":943,"children":945},{"id":944},"_53-明确资源优先级preload-fetchpriority",[946],{"type":32,"value":947},"5.3 明确资源优先级（preload / fetchpriority）",{"type":27,"tag":28,"props":949,"children":950},{},[951],{"type":32,"value":952},"对 LCP 图片：",{"type":27,"tag":954,"props":955,"children":960},"pre",{"className":956,"code":958,"language":959,"meta":7},[957],"language-html","\u003Clink rel=\"preload\" as=\"image\" href=\"/hero.avif\" />\n","html",[961],{"type":27,"tag":605,"props":962,"children":963},{"__ignoreMap":7},[964],{"type":32,"value":958},{"type":27,"tag":28,"props":966,"children":967},{},[968],{"type":32,"value":969},"或（浏览器支持时）：",{"type":27,"tag":954,"props":971,"children":974},{"className":972,"code":973,"language":959,"meta":7},[957],"\u003Cimg src=\"/hero.avif\" fetchpriority=\"high\" />\n",[975],{"type":27,"tag":605,"props":976,"children":977},{"__ignoreMap":7},[978],{"type":32,"value":973},{"type":27,"tag":28,"props":980,"children":981},{},[982],{"type":32,"value":983},"目标是：让浏览器更早发现它、更早调度它。",{"type":27,"tag":775,"props":985,"children":987},{"id":986},"_54-cdn减少-rtt-与回源",[988],{"type":32,"value":989},"5.4 CDN：减少 RTT 与回源",{"type":27,"tag":40,"props":991,"children":992},{},[993,998,1003],{"type":27,"tag":44,"props":994,"children":995},{},[996],{"type":32,"value":997},"图片必须走 CDN",{"type":27,"tag":44,"props":999,"children":1000},{},[1001],{"type":32,"value":1002},"开启压缩、HTTP/2/3",{"type":27,"tag":44,"props":1004,"children":1005},{},[1006],{"type":32,"value":1007},"确保 cache hit",{"type":27,"tag":584,"props":1009,"children":1010},{},[],{"type":27,"tag":75,"props":1012,"children":1014},{"id":1013},"_6-文本型-lcpcss字体阻塞是常见杀手",[1015],{"type":32,"value":1016},"6. 文本型 LCP：CSS/字体阻塞是常见杀手",{"type":27,"tag":775,"props":1018,"children":1020},{"id":1019},"_61-关键-css-与阻塞",[1021],{"type":32,"value":1022},"6.1 关键 CSS 与阻塞",{"type":27,"tag":28,"props":1024,"children":1025},{},[1026],{"type":32,"value":1027},"如果你的主 CSS 很大且阻塞：",{"type":27,"tag":40,"props":1029,"children":1030},{},[1031,1036],{"type":27,"tag":44,"props":1032,"children":1033},{},[1034],{"type":32,"value":1035},"拆关键 CSS",{"type":27,"tag":44,"props":1037,"children":1038},{},[1039],{"type":32,"value":1040},"延后非关键 CSS",{"type":27,"tag":775,"props":1042,"children":1044},{"id":1043},"_62-字体foitfout-与-lcp",[1045],{"type":32,"value":1046},"6.2 字体：FOIT/FOUT 与 LCP",{"type":27,"tag":28,"props":1048,"children":1049},{},[1050],{"type":32,"value":1051},"大标题是文本 LCP 时，字体策略会直接影响 LCP。",{"type":27,"tag":28,"props":1053,"children":1054},{},[1055],{"type":32,"value":1056},"建议：",{"type":27,"tag":40,"props":1058,"children":1059},{},[1060,1069,1074],{"type":27,"tag":44,"props":1061,"children":1062},{},[1063],{"type":27,"tag":605,"props":1064,"children":1066},{"className":1065},[],[1067],{"type":32,"value":1068},"font-display: swap",{"type":27,"tag":44,"props":1070,"children":1071},{},[1072],{"type":32,"value":1073},"对关键字体文件 preload",{"type":27,"tag":44,"props":1075,"children":1076},{},[1077],{"type":32,"value":1078},"子集化（只保留需要的字形）",{"type":27,"tag":584,"props":1080,"children":1081},{},[],{"type":27,"tag":75,"props":1083,"children":1085},{"id":1084},"_7-ssrcsr-与-hydration别让-js-抢走首屏",[1086],{"type":32,"value":1087},"7. SSR/CSR 与 Hydration：别让 JS 抢走首屏",{"type":27,"tag":28,"props":1089,"children":1090},{},[1091],{"type":32,"value":1092},"SSR 通常能改善 LCP，但并非必然。",{"type":27,"tag":28,"props":1094,"children":1095},{},[1096],{"type":32,"value":1097},"常见反例：",{"type":27,"tag":40,"props":1099,"children":1100},{},[1101,1106],{"type":27,"tag":44,"props":1102,"children":1103},{},[1104],{"type":32,"value":1105},"SSR 直出了 HTML",{"type":27,"tag":44,"props":1107,"children":1108},{},[1109],{"type":32,"value":1110},"但首屏仍要等一堆 JS 执行、样式计算、hydrate 才能稳定",{"type":27,"tag":28,"props":1112,"children":1113},{},[1114],{"type":32,"value":1115},"你需要关注：",{"type":27,"tag":40,"props":1117,"children":1118},{},[1119,1124,1129],{"type":27,"tag":44,"props":1120,"children":1121},{},[1122],{"type":32,"value":1123},"首屏 bundle 体积",{"type":27,"tag":44,"props":1125,"children":1126},{},[1127],{"type":32,"value":1128},"hydration 的长任务",{"type":27,"tag":44,"props":1130,"children":1131},{},[1132],{"type":32,"value":1133},"第三方脚本（埋点、广告）阻塞",{"type":27,"tag":28,"props":1135,"children":1136},{},[1137],{"type":32,"value":1138},"实践建议：",{"type":27,"tag":40,"props":1140,"children":1141},{},[1142,1147,1152],{"type":27,"tag":44,"props":1143,"children":1144},{},[1145],{"type":32,"value":1146},"首屏只 hydrate 必要组件",{"type":27,"tag":44,"props":1148,"children":1149},{},[1150],{"type":32,"value":1151},"大型交互组件延后",{"type":27,"tag":44,"props":1153,"children":1154},{},[1155],{"type":32,"value":1156},"第三方脚本延迟加载",{"type":27,"tag":584,"props":1158,"children":1159},{},[],{"type":27,"tag":75,"props":1161,"children":1163},{"id":1162},"_8-资源调度preconnect-dns-prefetch",[1164],{"type":32,"value":1165},"8. 资源调度：preconnect / dns-prefetch",{"type":27,"tag":28,"props":1167,"children":1168},{},[1169],{"type":32,"value":1170},"如果 LCP 资源来自第三方域名：",{"type":27,"tag":954,"props":1172,"children":1175},{"className":1173,"code":1174,"language":959,"meta":7},[957],"\u003Clink rel=\"preconnect\" href=\"https://cdn.example.com\" />\n",[1176],{"type":27,"tag":605,"props":1177,"children":1178},{"__ignoreMap":7},[1179],{"type":32,"value":1174},{"type":27,"tag":28,"props":1181,"children":1182},{},[1183],{"type":32,"value":1184},"这能减少握手开销。",{"type":27,"tag":584,"props":1186,"children":1187},{},[],{"type":27,"tag":75,"props":1189,"children":1191},{"id":1190},"_9-常见根因-对应策略速查表",[1192],{"type":32,"value":1193},"9. 常见根因 → 对应策略速查表",{"type":27,"tag":1195,"props":1196,"children":1197},"table",{},[1198,1222],{"type":27,"tag":1199,"props":1200,"children":1201},"thead",{},[1202],{"type":27,"tag":1203,"props":1204,"children":1205},"tr",{},[1206,1212,1217],{"type":27,"tag":1207,"props":1208,"children":1209},"th",{},[1210],{"type":32,"value":1211},"根因",{"type":27,"tag":1207,"props":1213,"children":1214},{},[1215],{"type":32,"value":1216},"现象",{"type":27,"tag":1207,"props":1218,"children":1219},{},[1220],{"type":32,"value":1221},"典型修复",{"type":27,"tag":1223,"props":1224,"children":1225},"tbody",{},[1226,1245,1263,1281,1299],{"type":27,"tag":1203,"props":1227,"children":1228},{},[1229,1235,1240],{"type":27,"tag":1230,"props":1231,"children":1232},"td",{},[1233],{"type":32,"value":1234},"TTFB 高",{"type":27,"tag":1230,"props":1236,"children":1237},{},[1238],{"type":32,"value":1239},"所有资源都晚开始",{"type":27,"tag":1230,"props":1241,"children":1242},{},[1243],{"type":32,"value":1244},"服务端缓存、CDN、减少回源",{"type":27,"tag":1203,"props":1246,"children":1247},{},[1248,1253,1258],{"type":27,"tag":1230,"props":1249,"children":1250},{},[1251],{"type":32,"value":1252},"LCP 图片太大",{"type":27,"tag":1230,"props":1254,"children":1255},{},[1256],{"type":32,"value":1257},"下载阶段耗时长",{"type":27,"tag":1230,"props":1259,"children":1260},{},[1261],{"type":32,"value":1262},"AVIF/WebP、尺寸裁切、CDN",{"type":27,"tag":1203,"props":1264,"children":1265},{},[1266,1271,1276],{"type":27,"tag":1230,"props":1267,"children":1268},{},[1269],{"type":32,"value":1270},"LCP 图片优先级低",{"type":27,"tag":1230,"props":1272,"children":1273},{},[1274],{"type":32,"value":1275},"LCP 资源很晚才发起",{"type":27,"tag":1230,"props":1277,"children":1278},{},[1279],{"type":32,"value":1280},"preload/fetchpriority",{"type":27,"tag":1203,"props":1282,"children":1283},{},[1284,1289,1294],{"type":27,"tag":1230,"props":1285,"children":1286},{},[1287],{"type":32,"value":1288},"字体阻塞",{"type":27,"tag":1230,"props":1290,"children":1291},{},[1292],{"type":32,"value":1293},"文本 LCP 晚出现",{"type":27,"tag":1230,"props":1295,"children":1296},{},[1297],{"type":32,"value":1298},"font-display: swap + preload",{"type":27,"tag":1203,"props":1300,"children":1301},{},[1302,1307,1312],{"type":27,"tag":1230,"props":1303,"children":1304},{},[1305],{"type":32,"value":1306},"主线程长任务",{"type":27,"tag":1230,"props":1308,"children":1309},{},[1310],{"type":32,"value":1311},"LCP 前 JS 很忙",{"type":27,"tag":1230,"props":1313,"children":1314},{},[1315],{"type":32,"value":1316},"拆包、延后非关键组件/第三方",{"type":27,"tag":584,"props":1318,"children":1319},{},[],{"type":27,"tag":75,"props":1321,"children":1323},{"id":1322},"_10-上线检查清单",[1324],{"type":32,"value":1325},"10. 上线检查清单",{"type":27,"tag":40,"props":1327,"children":1330},{"className":1328},[1329],"contains-task-list",[1331,1343,1352,1361,1370,1379],{"type":27,"tag":44,"props":1332,"children":1335},{"className":1333},[1334],"task-list-item",[1336,1341],{"type":27,"tag":1337,"props":1338,"children":1340},"input",{"disabled":497,"type":1339},"checkbox",[],{"type":32,"value":1342}," LCP 元素是否明确（图片/文本）",{"type":27,"tag":44,"props":1344,"children":1346},{"className":1345},[1334],[1347,1350],{"type":27,"tag":1337,"props":1348,"children":1349},{"disabled":497,"type":1339},[],{"type":32,"value":1351}," LCP 资源是否高优先级（preload/priority）",{"type":27,"tag":44,"props":1353,"children":1355},{"className":1354},[1334],[1356,1359],{"type":27,"tag":1337,"props":1357,"children":1358},{"disabled":497,"type":1339},[],{"type":32,"value":1360}," LCP 图片是否避免 lazy",{"type":27,"tag":44,"props":1362,"children":1364},{"className":1363},[1334],[1365,1368],{"type":27,"tag":1337,"props":1366,"children":1367},{"disabled":497,"type":1339},[],{"type":32,"value":1369}," 是否有 RUM 维度切片（设备/地区/版本）",{"type":27,"tag":44,"props":1371,"children":1373},{"className":1372},[1334],[1374,1377],{"type":27,"tag":1337,"props":1375,"children":1376},{"disabled":497,"type":1339},[],{"type":32,"value":1378}," TTFB 是否受控（缓存/回源）",{"type":27,"tag":44,"props":1380,"children":1382},{"className":1381},[1334],[1383,1386],{"type":27,"tag":1337,"props":1384,"children":1385},{"disabled":497,"type":1339},[],{"type":32,"value":1387}," 第三方脚本是否延后",{"type":27,"tag":584,"props":1389,"children":1390},{},[],{"type":27,"tag":75,"props":1392,"children":1393},{"id":422},[1394],{"type":32,"value":422},{"type":27,"tag":28,"props":1396,"children":1397},{},[1398],{"type":32,"value":1399},"LCP 优化的核心是：",{"type":27,"tag":40,"props":1401,"children":1402},{},[1403,1408,1413],{"type":27,"tag":44,"props":1404,"children":1405},{},[1406],{"type":32,"value":1407},"先识别 LCP 元素",{"type":27,"tag":44,"props":1409,"children":1410},{},[1411],{"type":32,"value":1412},"再把 LCP 拆成链路各段",{"type":27,"tag":44,"props":1414,"children":1415},{},[1416],{"type":32,"value":1417},"针对性优化（资源优先级、体积、TTFB、主线程）",{"title":7,"searchDepth":467,"depth":467,"links":1419},[1420,1421,1422,1423,1424,1429,1435,1439,1440,1441,1442,1443],{"id":503,"depth":470,"text":487},{"id":589,"depth":470,"text":592},{"id":650,"depth":470,"text":653},{"id":723,"depth":470,"text":726},{"id":770,"depth":470,"text":773,"children":1425},[1426,1427,1428],{"id":777,"depth":467,"text":780},{"id":819,"depth":467,"text":822},{"id":843,"depth":467,"text":846},{"id":870,"depth":470,"text":873,"children":1430},[1431,1432,1433,1434],{"id":876,"depth":467,"text":879},{"id":906,"depth":467,"text":909},{"id":944,"depth":467,"text":947},{"id":986,"depth":467,"text":989},{"id":1013,"depth":470,"text":1016,"children":1436},[1437,1438],{"id":1019,"depth":467,"text":1022},{"id":1043,"depth":467,"text":1046},{"id":1084,"depth":470,"text":1087},{"id":1162,"depth":470,"text":1165},{"id":1190,"depth":470,"text":1193},{"id":1322,"depth":470,"text":1325},{"id":422,"depth":470,"text":422},"content:topics:performance:lcp-optimization-theory-practice.md","topics/performance/lcp-optimization-theory-practice.md","topics/performance/lcp-optimization-theory-practice",{"_path":1448,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1449,"description":1450,"date":489,"topic":5,"author":11,"tags":1451,"image":1456,"featured":497,"readingTime":1457,"body":1458,"_type":478,"_id":2773,"_source":480,"_file":2774,"_stem":2775,"_extension":483},"/topics/performance/rum-real-user-monitoring-design","RUM 真实用户监控方案设计","从指标体系、采样策略、上报链路到数据建模与告警，完整设计一套可落地的 RUM（Real User Monitoring）体系，解决“线上性能到底怎样”的问题。",[1452,1453,1454,493,1455],"性能监控","RUM","可观测性","采样","/images/topics/performance/rum.jpg",22,{"type":24,"children":1459,"toc":2735},[1460,1465,1477,1495,1507,1545,1548,1554,1559,1568,1573,1606,1611,1614,1620,1626,1631,1659,1664,1682,1688,1693,1698,1724,1729,1737,1740,1746,1751,1757,1806,1811,1817,1822,1840,1846,1851,1864,1869,1882,1885,1891,1897,1902,1923,1928,1941,1947,1960,1965,2107,2112,2125,2128,2134,2154,2180,2186,2190,2208,2214,2245,2251,2256,2260,2286,2289,2295,2301,2306,2365,2370,2376,2381,2394,2399,2426,2432,2437,2442,2455,2460,2463,2469,2474,2479,2512,2517,2522,2535,2538,2544,2550,2555,2573,2579,2584,2597,2603,2608,2621,2624,2630,2653,2658,2661,2667,2672,2695,2698,2702,2707],{"type":27,"tag":75,"props":1461,"children":1463},{"id":1462},"rum-真实用户监控方案设计",[1464],{"type":32,"value":1449},{"type":27,"tag":28,"props":1466,"children":1467},{},[1468,1470,1475],{"type":32,"value":1469},"如果说 Lighthouse/Performance 面板告诉你“理论上能跑多快”，那么 ",{"type":27,"tag":548,"props":1471,"children":1472},{},[1473],{"type":32,"value":1474},"RUM（Real User Monitoring）",{"type":32,"value":1476}," 才能回答：",{"type":27,"tag":40,"props":1478,"children":1479},{},[1480,1485,1490],{"type":27,"tag":44,"props":1481,"children":1482},{},[1483],{"type":32,"value":1484},"真实用户到底慢在哪？",{"type":27,"tag":44,"props":1486,"children":1487},{},[1488],{"type":32,"value":1489},"慢是“某地区/某机型/某版本/某网络”的问题还是全局问题？",{"type":27,"tag":44,"props":1491,"children":1492},{},[1493],{"type":32,"value":1494},"优化上线后是否真的变好？有无回归？",{"type":27,"tag":28,"props":1496,"children":1497},{},[1498,1500,1505],{"type":32,"value":1499},"这篇文章不讲“把 SDK 丢进去就完事”，而是站在",{"type":27,"tag":548,"props":1501,"children":1502},{},[1503],{"type":32,"value":1504},"体系设计",{"type":32,"value":1506},"角度，从 0 到 1 设计一套能长期演进的 RUM：",{"type":27,"tag":40,"props":1508,"children":1509},{},[1510,1515,1520,1525,1530,1535,1540],{"type":27,"tag":44,"props":1511,"children":1512},{},[1513],{"type":32,"value":1514},"指标体系（Core Web Vitals + 业务指标）",{"type":27,"tag":44,"props":1516,"children":1517},{},[1518],{"type":32,"value":1519},"采样与成本控制",{"type":27,"tag":44,"props":1521,"children":1522},{},[1523],{"type":32,"value":1524},"上报协议与可靠性",{"type":27,"tag":44,"props":1526,"children":1527},{},[1528],{"type":32,"value":1529},"事件模型与数据仓库建模",{"type":27,"tag":44,"props":1531,"children":1532},{},[1533],{"type":32,"value":1534},"分析维度（分桶）与聚合",{"type":27,"tag":44,"props":1536,"children":1537},{},[1538],{"type":32,"value":1539},"告警与 SLO",{"type":27,"tag":44,"props":1541,"children":1542},{},[1543],{"type":32,"value":1544},"隐私与合规",{"type":27,"tag":584,"props":1546,"children":1547},{},[],{"type":27,"tag":75,"props":1549,"children":1551},{"id":1550},"_1-先定目标rum-的产品定义",[1552],{"type":32,"value":1553},"1. 先定目标：RUM 的“产品定义”",{"type":27,"tag":28,"props":1555,"children":1556},{},[1557],{"type":32,"value":1558},"在做任何技术实现前，你必须把目标写成一句可验证的话：",{"type":27,"tag":1560,"props":1561,"children":1562},"blockquote",{},[1563],{"type":27,"tag":28,"props":1564,"children":1565},{},[1566],{"type":32,"value":1567},"我们要用 RUM 在 7 天内发现性能回归，并能定位到“哪类用户/哪条链路/哪个版本”导致 INP 恶化。",{"type":27,"tag":28,"props":1569,"children":1570},{},[1571],{"type":32,"value":1572},"RUM 的价值通常分三层：",{"type":27,"tag":886,"props":1574,"children":1575},{},[1576,1586,1596],{"type":27,"tag":44,"props":1577,"children":1578},{},[1579,1584],{"type":27,"tag":548,"props":1580,"children":1581},{},[1582],{"type":32,"value":1583},"可见性",{"type":32,"value":1585},"：上线后真实体验有数据",{"type":27,"tag":44,"props":1587,"children":1588},{},[1589,1594],{"type":27,"tag":548,"props":1590,"children":1591},{},[1592],{"type":32,"value":1593},"可定位",{"type":32,"value":1595},"：能切片（地区/设备/页面/版本）",{"type":27,"tag":44,"props":1597,"children":1598},{},[1599,1604],{"type":27,"tag":548,"props":1600,"children":1601},{},[1602],{"type":32,"value":1603},"可闭环",{"type":32,"value":1605},"：告警 → 归因 → 修复 → 复盘",{"type":27,"tag":28,"props":1607,"children":1608},{},[1609],{"type":32,"value":1610},"如果你只做第 1 层，它会退化成“报表”。",{"type":27,"tag":584,"props":1612,"children":1613},{},[],{"type":27,"tag":75,"props":1615,"children":1617},{"id":1616},"_2-指标体系不要只盯-core-web-vitals",[1618],{"type":32,"value":1619},"2. 指标体系：不要只盯 Core Web Vitals",{"type":27,"tag":775,"props":1621,"children":1623},{"id":1622},"_21-必选core-web-vitals-补充指标",[1624],{"type":32,"value":1625},"2.1 必选：Core Web Vitals + 补充指标",{"type":27,"tag":28,"props":1627,"children":1628},{},[1629],{"type":32,"value":1630},"建议最小集合：",{"type":27,"tag":40,"props":1632,"children":1633},{},[1634,1639,1644,1649,1654],{"type":27,"tag":44,"props":1635,"children":1636},{},[1637],{"type":32,"value":1638},"LCP（最大内容绘制）",{"type":27,"tag":44,"props":1640,"children":1641},{},[1642],{"type":32,"value":1643},"INP（交互到下一次绘制）",{"type":27,"tag":44,"props":1645,"children":1646},{},[1647],{"type":32,"value":1648},"CLS（布局偏移）",{"type":27,"tag":44,"props":1650,"children":1651},{},[1652],{"type":32,"value":1653},"TTFB（服务端首字节）",{"type":27,"tag":44,"props":1655,"children":1656},{},[1657],{"type":32,"value":1658},"FCP（首屏内容绘制，辅助解释 LCP）",{"type":27,"tag":28,"props":1660,"children":1661},{},[1662],{"type":32,"value":1663},"但这还不够，你还需要“解释型指标”：",{"type":27,"tag":40,"props":1665,"children":1666},{},[1667,1672,1677],{"type":27,"tag":44,"props":1668,"children":1669},{},[1670],{"type":32,"value":1671},"Long Task（长任务）统计（数量/总时长/Top 贡献）",{"type":27,"tag":44,"props":1673,"children":1674},{},[1675],{"type":32,"value":1676},"Resource timing（关键资源耗时）",{"type":27,"tag":44,"props":1678,"children":1679},{},[1680],{"type":32,"value":1681},"JS 错误/资源错误（与性能回归强相关）",{"type":27,"tag":775,"props":1683,"children":1685},{"id":1684},"_22-业务指标把性能与转化绑定",[1686],{"type":32,"value":1687},"2.2 业务指标：把性能与转化绑定",{"type":27,"tag":28,"props":1689,"children":1690},{},[1691],{"type":32,"value":1692},"纯性能指标很容易变成“工程师自嗨”。",{"type":27,"tag":28,"props":1694,"children":1695},{},[1696],{"type":32,"value":1697},"建议定义 1~3 个业务级指标：",{"type":27,"tag":40,"props":1699,"children":1700},{},[1701,1706,1719],{"type":27,"tag":44,"props":1702,"children":1703},{},[1704],{"type":32,"value":1705},"首次有效交互时间（例如搜索可用、下单可点）",{"type":27,"tag":44,"props":1707,"children":1708},{},[1709,1711,1717],{"type":32,"value":1710},"首次关键接口完成（例如 ",{"type":27,"tag":605,"props":1712,"children":1714},{"className":1713},[],[1715],{"type":32,"value":1716},"/api/me",{"type":32,"value":1718}," 完成）",{"type":27,"tag":44,"props":1720,"children":1721},{},[1722],{"type":32,"value":1723},"转化漏斗关键点耗时（例如“加入购物车”到“支付成功”）",{"type":27,"tag":28,"props":1725,"children":1726},{},[1727],{"type":32,"value":1728},"这些指标让你能回答：",{"type":27,"tag":40,"props":1730,"children":1731},{},[1732],{"type":27,"tag":44,"props":1733,"children":1734},{},[1735],{"type":32,"value":1736},"“慢 200ms 对业务有没有影响？”",{"type":27,"tag":584,"props":1738,"children":1739},{},[],{"type":27,"tag":75,"props":1741,"children":1743},{"id":1742},"_3-采样策略rum-成败的-50",[1744],{"type":32,"value":1745},"3. 采样策略：RUM 成败的 50%",{"type":27,"tag":28,"props":1747,"children":1748},{},[1749],{"type":32,"value":1750},"RUM 的难点不是“能不能采”，而是“采多少、怎么采、怎么省钱”。",{"type":27,"tag":775,"props":1752,"children":1754},{"id":1753},"_31-两种采样会话采样-vs-事件采样",[1755],{"type":32,"value":1756},"3.1 两种采样：会话采样 vs 事件采样",{"type":27,"tag":40,"props":1758,"children":1759},{},[1760,1783],{"type":27,"tag":44,"props":1761,"children":1762},{},[1763,1768,1770],{"type":27,"tag":548,"props":1764,"children":1765},{},[1766],{"type":32,"value":1767},"会话采样",{"type":32,"value":1769},"：进入站点就决定该会话是否采集全部指标",{"type":27,"tag":40,"props":1771,"children":1772},{},[1773,1778],{"type":27,"tag":44,"props":1774,"children":1775},{},[1776],{"type":32,"value":1777},"优点：链路完整、便于归因",{"type":27,"tag":44,"props":1779,"children":1780},{},[1781],{"type":32,"value":1782},"缺点：成本高",{"type":27,"tag":44,"props":1784,"children":1785},{},[1786,1791,1793],{"type":27,"tag":548,"props":1787,"children":1788},{},[1789],{"type":32,"value":1790},"事件采样",{"type":32,"value":1792},"：每种事件独立采样（例如性能 10%、错误 100%）",{"type":27,"tag":40,"props":1794,"children":1795},{},[1796,1801],{"type":27,"tag":44,"props":1797,"children":1798},{},[1799],{"type":32,"value":1800},"优点：更灵活",{"type":27,"tag":44,"props":1802,"children":1803},{},[1804],{"type":32,"value":1805},"缺点：同一会话数据不完整",{"type":27,"tag":28,"props":1807,"children":1808},{},[1809],{"type":32,"value":1810},"生产建议：两者结合。",{"type":27,"tag":775,"props":1812,"children":1814},{"id":1813},"_32-分层采样建议",[1815],{"type":32,"value":1816},"3.2 分层采样建议",{"type":27,"tag":28,"props":1818,"children":1819},{},[1820],{"type":32,"value":1821},"一个可用的默认配置：",{"type":27,"tag":40,"props":1823,"children":1824},{},[1825,1830,1835],{"type":27,"tag":44,"props":1826,"children":1827},{},[1828],{"type":32,"value":1829},"性能指标：10%（按会话）",{"type":27,"tag":44,"props":1831,"children":1832},{},[1833],{"type":32,"value":1834},"错误指标：100%（或至少 50%）",{"type":27,"tag":44,"props":1836,"children":1837},{},[1838],{"type":32,"value":1839},"关键交易链路：100%（只对“完成交易”的会话上报完整链路）",{"type":27,"tag":775,"props":1841,"children":1843},{"id":1842},"_33-动态采样用预算来管理",[1844],{"type":32,"value":1845},"3.3 动态采样：用“预算”来管理",{"type":27,"tag":28,"props":1847,"children":1848},{},[1849],{"type":32,"value":1850},"你可以给 RUM 设预算：",{"type":27,"tag":40,"props":1852,"children":1853},{},[1854,1859],{"type":27,"tag":44,"props":1855,"children":1856},{},[1857],{"type":32,"value":1858},"每日上报不超过 N 条",{"type":27,"tag":44,"props":1860,"children":1861},{},[1862],{"type":32,"value":1863},"每秒不超过 M 条",{"type":27,"tag":28,"props":1865,"children":1866},{},[1867],{"type":32,"value":1868},"当超预算时：",{"type":27,"tag":40,"props":1870,"children":1871},{},[1872,1877],{"type":27,"tag":44,"props":1873,"children":1874},{},[1875],{"type":32,"value":1876},"降低非关键事件采样率",{"type":27,"tag":44,"props":1878,"children":1879},{},[1880],{"type":32,"value":1881},"只保留异常事件（例如 LCP > 4s）",{"type":27,"tag":584,"props":1883,"children":1884},{},[],{"type":27,"tag":75,"props":1886,"children":1888},{"id":1887},"_4-客户端采集指标怎么拿",[1889],{"type":32,"value":1890},"4. 客户端采集：指标怎么拿？",{"type":27,"tag":775,"props":1892,"children":1894},{"id":1893},"_41-web-vitals-指标",[1895],{"type":32,"value":1896},"4.1 Web Vitals 指标",{"type":27,"tag":28,"props":1898,"children":1899},{},[1900],{"type":32,"value":1901},"现代浏览器提供了可观测入口：",{"type":27,"tag":40,"props":1903,"children":1904},{},[1905,1914],{"type":27,"tag":44,"props":1906,"children":1907},{},[1908],{"type":27,"tag":605,"props":1909,"children":1911},{"className":1910},[],[1912],{"type":32,"value":1913},"PerformanceObserver",{"type":27,"tag":44,"props":1915,"children":1916},{},[1917],{"type":27,"tag":605,"props":1918,"children":1920},{"className":1919},[],[1921],{"type":32,"value":1922},"performance.getEntriesByType()",{"type":27,"tag":28,"props":1924,"children":1925},{},[1926],{"type":32,"value":1927},"你可以使用社区实现（例如 web-vitals 思路），但要明确：",{"type":27,"tag":40,"props":1929,"children":1930},{},[1931,1936],{"type":27,"tag":44,"props":1932,"children":1933},{},[1934],{"type":32,"value":1935},"指标口径要固定（同一页面、同一版本）",{"type":27,"tag":44,"props":1937,"children":1938},{},[1939],{"type":32,"value":1940},"不同浏览器差异要做兼容",{"type":27,"tag":775,"props":1942,"children":1944},{"id":1943},"_42-上下文context是-rum-的灵魂",[1945],{"type":32,"value":1946},"4.2 上下文（Context）是 RUM 的灵魂",{"type":27,"tag":28,"props":1948,"children":1949},{},[1950,1952,1958],{"type":32,"value":1951},"只上报 ",{"type":27,"tag":605,"props":1953,"children":1955},{"className":1954},[],[1956],{"type":32,"value":1957},"LCP=2500ms",{"type":32,"value":1959}," 没意义。",{"type":27,"tag":28,"props":1961,"children":1962},{},[1963],{"type":32,"value":1964},"你至少需要这些维度：",{"type":27,"tag":40,"props":1966,"children":1967},{},[1968,1994,2007,2032,2057,2082],{"type":27,"tag":44,"props":1969,"children":1970},{},[1971,1973,1979,1981,1987,1988],{"type":32,"value":1972},"页面：",{"type":27,"tag":605,"props":1974,"children":1976},{"className":1975},[],[1977],{"type":32,"value":1978},"path",{"type":32,"value":1980},", ",{"type":27,"tag":605,"props":1982,"children":1984},{"className":1983},[],[1985],{"type":32,"value":1986},"routeName",{"type":32,"value":1980},{"type":27,"tag":605,"props":1989,"children":1991},{"className":1990},[],[1992],{"type":32,"value":1993},"referrer",{"type":27,"tag":44,"props":1995,"children":1996},{},[1997,1999,2005],{"type":32,"value":1998},"用户：匿名 ",{"type":27,"tag":605,"props":2000,"children":2002},{"className":2001},[],[2003],{"type":32,"value":2004},"userIdHash",{"type":32,"value":2006},"（可选）",{"type":27,"tag":44,"props":2008,"children":2009},{},[2010,2012,2018,2019,2025,2026],{"type":32,"value":2011},"设备：",{"type":27,"tag":605,"props":2013,"children":2015},{"className":2014},[],[2016],{"type":32,"value":2017},"deviceMemory",{"type":32,"value":1980},{"type":27,"tag":605,"props":2020,"children":2022},{"className":2021},[],[2023],{"type":32,"value":2024},"hardwareConcurrency",{"type":32,"value":1980},{"type":27,"tag":605,"props":2027,"children":2029},{"className":2028},[],[2030],{"type":32,"value":2031},"viewport",{"type":27,"tag":44,"props":2033,"children":2034},{},[2035,2037,2043,2044,2050,2051],{"type":32,"value":2036},"网络：",{"type":27,"tag":605,"props":2038,"children":2040},{"className":2039},[],[2041],{"type":32,"value":2042},"effectiveType",{"type":32,"value":1980},{"type":27,"tag":605,"props":2045,"children":2047},{"className":2046},[],[2048],{"type":32,"value":2049},"rtt",{"type":32,"value":1980},{"type":27,"tag":605,"props":2052,"children":2054},{"className":2053},[],[2055],{"type":32,"value":2056},"downlink",{"type":27,"tag":44,"props":2058,"children":2059},{},[2060,2062,2068,2069,2075,2076],{"type":32,"value":2061},"版本：",{"type":27,"tag":605,"props":2063,"children":2065},{"className":2064},[],[2066],{"type":32,"value":2067},"appVersion",{"type":32,"value":1980},{"type":27,"tag":605,"props":2070,"children":2072},{"className":2071},[],[2073],{"type":32,"value":2074},"buildId",{"type":32,"value":1980},{"type":27,"tag":605,"props":2077,"children":2079},{"className":2078},[],[2080],{"type":32,"value":2081},"commitSha",{"type":27,"tag":44,"props":2083,"children":2084},{},[2085,2087,2093,2094,2100,2101],{"type":32,"value":2086},"环境：",{"type":27,"tag":605,"props":2088,"children":2090},{"className":2089},[],[2091],{"type":32,"value":2092},"prod/staging",{"type":32,"value":1980},{"type":27,"tag":605,"props":2095,"children":2097},{"className":2096},[],[2098],{"type":32,"value":2099},"region",{"type":32,"value":1980},{"type":27,"tag":605,"props":2102,"children":2104},{"className":2103},[],[2105],{"type":32,"value":2106},"cdnPop",{"type":27,"tag":28,"props":2108,"children":2109},{},[2110],{"type":32,"value":2111},"这些字段必须：",{"type":27,"tag":40,"props":2113,"children":2114},{},[2115,2120],{"type":27,"tag":44,"props":2116,"children":2117},{},[2118],{"type":32,"value":2119},"控制体积（短字段名/枚举）",{"type":27,"tag":44,"props":2121,"children":2122},{},[2123],{"type":32,"value":2124},"可被服务器校验（防伪造污染）",{"type":27,"tag":584,"props":2126,"children":2127},{},[],{"type":27,"tag":75,"props":2129,"children":2131},{"id":2130},"_5-上报链路可靠性与性能不能两头都丢",[2132],{"type":32,"value":2133},"5. 上报链路：可靠性与性能不能两头都丢",{"type":27,"tag":775,"props":2135,"children":2137},{"id":2136},"_51-传输优先-sendbeacon降级到-fetchkeepalive",[2138,2140,2146,2148],{"type":32,"value":2139},"5.1 传输：优先 ",{"type":27,"tag":605,"props":2141,"children":2143},{"className":2142},[],[2144],{"type":32,"value":2145},"sendBeacon",{"type":32,"value":2147},"，降级到 ",{"type":27,"tag":605,"props":2149,"children":2151},{"className":2150},[],[2152],{"type":32,"value":2153},"fetch(keepalive)",{"type":27,"tag":40,"props":2155,"children":2156},{},[2157,2169],{"type":27,"tag":44,"props":2158,"children":2159},{},[2160,2162,2167],{"type":32,"value":2161},"页面卸载时 ",{"type":27,"tag":605,"props":2163,"children":2165},{"className":2164},[],[2166],{"type":32,"value":2145},{"type":32,"value":2168}," 更可靠",{"type":27,"tag":44,"props":2170,"children":2171},{},[2172,2174],{"type":32,"value":2173},"非卸载场景可用批量 ",{"type":27,"tag":605,"props":2175,"children":2177},{"className":2176},[],[2178],{"type":32,"value":2179},"fetch",{"type":27,"tag":775,"props":2181,"children":2183},{"id":2182},"_52-批量与压缩",[2184],{"type":32,"value":2185},"5.2 批量与压缩",{"type":27,"tag":28,"props":2187,"children":2188},{},[2189],{"type":32,"value":1056},{"type":27,"tag":40,"props":2191,"children":2192},{},[2193,2198,2203],{"type":27,"tag":44,"props":2194,"children":2195},{},[2196],{"type":32,"value":2197},"以 5~20 条为一个 batch",{"type":27,"tag":44,"props":2199,"children":2200},{},[2201],{"type":32,"value":2202},"gzip/br 压缩（服务器支持）",{"type":27,"tag":44,"props":2204,"children":2205},{},[2206],{"type":32,"value":2207},"限制 payload 大小（例如 \u003C 64KB）",{"type":27,"tag":775,"props":2209,"children":2211},{"id":2210},"_53-去重与重试",[2212],{"type":32,"value":2213},"5.3 去重与重试",{"type":27,"tag":40,"props":2215,"children":2216},{},[2217,2228,2240],{"type":27,"tag":44,"props":2218,"children":2219},{},[2220,2222],{"type":32,"value":2221},"给每条事件生成 ",{"type":27,"tag":605,"props":2223,"children":2225},{"className":2224},[],[2226],{"type":32,"value":2227},"eventId",{"type":27,"tag":44,"props":2229,"children":2230},{},[2231,2233,2238],{"type":32,"value":2232},"服务端按 ",{"type":27,"tag":605,"props":2234,"children":2236},{"className":2235},[],[2237],{"type":32,"value":2227},{"type":32,"value":2239}," 去重",{"type":27,"tag":44,"props":2241,"children":2242},{},[2243],{"type":32,"value":2244},"客户端失败重试次数有限（例如 2 次）",{"type":27,"tag":775,"props":2246,"children":2248},{"id":2247},"_54-采集对页面的影响",[2249],{"type":32,"value":2250},"5.4 采集对页面的影响",{"type":27,"tag":28,"props":2252,"children":2253},{},[2254],{"type":32,"value":2255},"RUM 本身不能成为性能负担。",{"type":27,"tag":28,"props":2257,"children":2258},{},[2259],{"type":32,"value":1138},{"type":27,"tag":40,"props":2261,"children":2262},{},[2263,2276,2281],{"type":27,"tag":44,"props":2264,"children":2265},{},[2266,2268,2274],{"type":32,"value":2267},"采集计算尽量放在 idle（",{"type":27,"tag":605,"props":2269,"children":2271},{"className":2270},[],[2272],{"type":32,"value":2273},"requestIdleCallback",{"type":32,"value":2275},"）",{"type":27,"tag":44,"props":2277,"children":2278},{},[2279],{"type":32,"value":2280},"上报放在后台、批量",{"type":27,"tag":44,"props":2282,"children":2283},{},[2284],{"type":32,"value":2285},"SDK 初始化延后（首屏后）",{"type":27,"tag":584,"props":2287,"children":2288},{},[],{"type":27,"tag":75,"props":2290,"children":2292},{"id":2291},"_6-事件模型与数据建模决定你能不能分析",[2293],{"type":32,"value":2294},"6. 事件模型与数据建模：决定你能不能分析",{"type":27,"tag":775,"props":2296,"children":2298},{"id":2297},"_61-事件类型event-types",[2299],{"type":32,"value":2300},"6.1 事件类型（Event Types）",{"type":27,"tag":28,"props":2302,"children":2303},{},[2304],{"type":32,"value":2305},"建议至少定义：",{"type":27,"tag":40,"props":2307,"children":2308},{},[2309,2318,2327,2336,2345,2354],{"type":27,"tag":44,"props":2310,"children":2311},{},[2312],{"type":27,"tag":605,"props":2313,"children":2315},{"className":2314},[],[2316],{"type":32,"value":2317},"page_view",{"type":27,"tag":44,"props":2319,"children":2320},{},[2321],{"type":27,"tag":605,"props":2322,"children":2324},{"className":2323},[],[2325],{"type":32,"value":2326},"web_vitals",{"type":27,"tag":44,"props":2328,"children":2329},{},[2330],{"type":27,"tag":605,"props":2331,"children":2333},{"className":2332},[],[2334],{"type":32,"value":2335},"resource_timing",{"type":27,"tag":44,"props":2337,"children":2338},{},[2339],{"type":27,"tag":605,"props":2340,"children":2342},{"className":2341},[],[2343],{"type":32,"value":2344},"long_task",{"type":27,"tag":44,"props":2346,"children":2347},{},[2348],{"type":27,"tag":605,"props":2349,"children":2351},{"className":2350},[],[2352],{"type":32,"value":2353},"js_error",{"type":27,"tag":44,"props":2355,"children":2356},{},[2357,2363],{"type":27,"tag":605,"props":2358,"children":2360},{"className":2359},[],[2361],{"type":32,"value":2362},"api_timing",{"type":32,"value":2364},"（业务关键接口）",{"type":27,"tag":28,"props":2366,"children":2367},{},[2368],{"type":32,"value":2369},"每种事件都有“必填字段”和“可选字段”。",{"type":27,"tag":775,"props":2371,"children":2373},{"id":2372},"_62-存储建模宽表-明细表",[2374],{"type":32,"value":2375},"6.2 存储建模：宽表 + 明细表",{"type":27,"tag":28,"props":2377,"children":2378},{},[2379],{"type":32,"value":2380},"常见两种设计：",{"type":27,"tag":40,"props":2382,"children":2383},{},[2384,2389],{"type":27,"tag":44,"props":2385,"children":2386},{},[2387],{"type":32,"value":2388},"宽表（便于查询）：把常用字段打平",{"type":27,"tag":44,"props":2390,"children":2391},{},[2392],{"type":32,"value":2393},"明细表（便于追踪）：存完整 payload（可选）",{"type":27,"tag":28,"props":2395,"children":2396},{},[2397],{"type":32,"value":2398},"一个可落地的折中：",{"type":27,"tag":40,"props":2400,"children":2401},{},[2402,2414],{"type":27,"tag":44,"props":2403,"children":2404},{},[2405,2407,2412],{"type":32,"value":2406},"以 ",{"type":27,"tag":605,"props":2408,"children":2410},{"className":2409},[],[2411],{"type":32,"value":2326},{"type":32,"value":2413}," 为核心宽表（用于大盘/SLO）",{"type":27,"tag":44,"props":2415,"children":2416},{},[2417,2418,2424],{"type":32,"value":2406},{"type":27,"tag":605,"props":2419,"children":2421},{"className":2420},[],[2422],{"type":32,"value":2423},"session_trace",{"type":32,"value":2425}," 为明细表（只对采样会话存）",{"type":27,"tag":775,"props":2427,"children":2429},{"id":2428},"_63-聚合口径p75p90p95p99",[2430],{"type":32,"value":2431},"6.3 聚合口径：p75/p90/p95/p99",{"type":27,"tag":28,"props":2433,"children":2434},{},[2435],{"type":32,"value":2436},"RUM 的统计不要只用平均值。",{"type":27,"tag":28,"props":2438,"children":2439},{},[2440],{"type":32,"value":2441},"推荐：",{"type":27,"tag":40,"props":2443,"children":2444},{},[2445,2450],{"type":27,"tag":44,"props":2446,"children":2447},{},[2448],{"type":32,"value":2449},"p75：更贴近“多数用户体验”",{"type":27,"tag":44,"props":2451,"children":2452},{},[2453],{"type":32,"value":2454},"p95/p99：定位极端慢问题",{"type":27,"tag":28,"props":2456,"children":2457},{},[2458],{"type":32,"value":2459},"对于 Web Vitals，Google 口径常用 p75。",{"type":27,"tag":584,"props":2461,"children":2462},{},[],{"type":27,"tag":75,"props":2464,"children":2466},{"id":2465},"_7-分析维度怎么做到可定位",[2467],{"type":32,"value":2468},"7. 分析维度：怎么做到“可定位”？",{"type":27,"tag":28,"props":2470,"children":2471},{},[2472],{"type":32,"value":2473},"可定位的关键在于“维度设计”。",{"type":27,"tag":28,"props":2475,"children":2476},{},[2477],{"type":32,"value":2478},"建议固定一套常用切片：",{"type":27,"tag":40,"props":2480,"children":2481},{},[2482,2487,2492,2497,2502,2507],{"type":27,"tag":44,"props":2483,"children":2484},{},[2485],{"type":32,"value":2486},"页面（路由）",{"type":27,"tag":44,"props":2488,"children":2489},{},[2490],{"type":32,"value":2491},"地区/运营商",{"type":27,"tag":44,"props":2493,"children":2494},{},[2495],{"type":32,"value":2496},"设备档位（内存/CPU 核数分桶）",{"type":27,"tag":44,"props":2498,"children":2499},{},[2500],{"type":32,"value":2501},"网络（4g/3g/slow-4g）",{"type":27,"tag":44,"props":2503,"children":2504},{},[2505],{"type":32,"value":2506},"版本（最近 10 个 buildId）",{"type":27,"tag":44,"props":2508,"children":2509},{},[2510],{"type":32,"value":2511},"入口来源（referrer/channel）",{"type":27,"tag":28,"props":2513,"children":2514},{},[2515],{"type":32,"value":2516},"注意：维度越多，成本越高。",{"type":27,"tag":28,"props":2518,"children":2519},{},[2520],{"type":32,"value":2521},"实践做法：",{"type":27,"tag":40,"props":2523,"children":2524},{},[2525,2530],{"type":27,"tag":44,"props":2526,"children":2527},{},[2528],{"type":32,"value":2529},"维度字段做枚举/分桶",{"type":27,"tag":44,"props":2531,"children":2532},{},[2533],{"type":32,"value":2534},"对长尾维度做 Top N",{"type":27,"tag":584,"props":2536,"children":2537},{},[],{"type":27,"tag":75,"props":2539,"children":2541},{"id":2540},"_8-告警与-slo让-rum-成为系统",[2542],{"type":32,"value":2543},"8. 告警与 SLO：让 RUM 成为“系统”",{"type":27,"tag":775,"props":2545,"children":2547},{"id":2546},"_81-slo-的定义",[2548],{"type":32,"value":2549},"8.1 SLO 的定义",{"type":27,"tag":28,"props":2551,"children":2552},{},[2553],{"type":32,"value":2554},"示例：",{"type":27,"tag":40,"props":2556,"children":2557},{},[2558,2563,2568],{"type":27,"tag":44,"props":2559,"children":2560},{},[2561],{"type":32,"value":2562},"过去 1 天内，p75 LCP \u003C 2500ms",{"type":27,"tag":44,"props":2564,"children":2565},{},[2566],{"type":32,"value":2567},"过去 1 天内，p75 INP \u003C 200ms",{"type":27,"tag":44,"props":2569,"children":2570},{},[2571],{"type":32,"value":2572},"过去 1 天内，CLS p75 \u003C 0.1",{"type":27,"tag":775,"props":2574,"children":2576},{"id":2575},"_82-告警规则",[2577],{"type":32,"value":2578},"8.2 告警规则",{"type":27,"tag":28,"props":2580,"children":2581},{},[2582],{"type":32,"value":2583},"建议用“双阈值”防抖：",{"type":27,"tag":40,"props":2585,"children":2586},{},[2587,2592],{"type":27,"tag":44,"props":2588,"children":2589},{},[2590],{"type":32,"value":2591},"5 分钟窗口连续超阈值",{"type":27,"tag":44,"props":2593,"children":2594},{},[2595],{"type":32,"value":2596},"且样本量 > 最小值（例如 300）",{"type":27,"tag":775,"props":2598,"children":2600},{"id":2599},"_83-回归检测",[2601],{"type":32,"value":2602},"8.3 回归检测",{"type":27,"tag":28,"props":2604,"children":2605},{},[2606],{"type":32,"value":2607},"把版本作为维度：",{"type":27,"tag":40,"props":2609,"children":2610},{},[2611,2616],{"type":27,"tag":44,"props":2612,"children":2613},{},[2614],{"type":32,"value":2615},"新版本的 p75 INP 相比上版本恶化 > 15%",{"type":27,"tag":44,"props":2617,"children":2618},{},[2619],{"type":32,"value":2620},"触发告警并附带“top 页面 / top 设备 / top 地区”",{"type":27,"tag":584,"props":2622,"children":2623},{},[],{"type":27,"tag":75,"props":2625,"children":2627},{"id":2626},"_9-隐私与合规你必须提前做的约束",[2628],{"type":32,"value":2629},"9. 隐私与合规：你必须提前做的约束",{"type":27,"tag":40,"props":2631,"children":2632},{},[2633,2638,2643,2648],{"type":27,"tag":44,"props":2634,"children":2635},{},[2636],{"type":32,"value":2637},"禁止上报 PII（手机号、邮箱、身份证等）",{"type":27,"tag":44,"props":2639,"children":2640},{},[2641],{"type":32,"value":2642},"URL 中 query/fragment 需要脱敏",{"type":27,"tag":44,"props":2644,"children":2645},{},[2646],{"type":32,"value":2647},"事件 payload 做字段白名单",{"type":27,"tag":44,"props":2649,"children":2650},{},[2651],{"type":32,"value":2652},"允许用户 opt-out（尤其是欧盟地区）",{"type":27,"tag":28,"props":2654,"children":2655},{},[2656],{"type":32,"value":2657},"如果产品面向多地区，建议把合规当成“需求”，不是“上线前检查”。",{"type":27,"tag":584,"props":2659,"children":2660},{},[],{"type":27,"tag":75,"props":2662,"children":2664},{"id":2663},"_10-最小可用方案mvp建议",[2665],{"type":32,"value":2666},"10. 最小可用方案（MVP）建议",{"type":27,"tag":28,"props":2668,"children":2669},{},[2670],{"type":32,"value":2671},"如果你要在 1~2 周内把 RUM 跑起来：",{"type":27,"tag":886,"props":2673,"children":2674},{},[2675,2680,2685,2690],{"type":27,"tag":44,"props":2676,"children":2677},{},[2678],{"type":32,"value":2679},"先采：page_view + web_vitals + js_error",{"type":27,"tag":44,"props":2681,"children":2682},{},[2683],{"type":32,"value":2684},"先做：按路由维度的大盘（p75）",{"type":27,"tag":44,"props":2686,"children":2687},{},[2688],{"type":32,"value":2689},"再做：版本对比（回归检测）",{"type":27,"tag":44,"props":2691,"children":2692},{},[2693],{"type":32,"value":2694},"最后做：会话 trace（定位长尾）",{"type":27,"tag":584,"props":2696,"children":2697},{},[],{"type":27,"tag":75,"props":2699,"children":2700},{"id":422},[2701],{"type":32,"value":422},{"type":27,"tag":28,"props":2703,"children":2704},{},[2705],{"type":32,"value":2706},"RUM 的关键不是 SDK，而是：",{"type":27,"tag":40,"props":2708,"children":2709},{},[2710,2715,2720,2725,2730],{"type":27,"tag":44,"props":2711,"children":2712},{},[2713],{"type":32,"value":2714},"指标体系与业务目标绑定",{"type":27,"tag":44,"props":2716,"children":2717},{},[2718],{"type":32,"value":2719},"采样与预算控制成本",{"type":27,"tag":44,"props":2721,"children":2722},{},[2723],{"type":32,"value":2724},"上报可靠且不影响性能",{"type":27,"tag":44,"props":2726,"children":2727},{},[2728],{"type":32,"value":2729},"数据建模支持切片与聚合",{"type":27,"tag":44,"props":2731,"children":2732},{},[2733],{"type":32,"value":2734},"告警/SLO 能闭环",{"title":7,"searchDepth":467,"depth":467,"links":2736},[2737,2738,2739,2743,2748,2752,2759,2764,2765,2770,2771,2772],{"id":1462,"depth":470,"text":1449},{"id":1550,"depth":470,"text":1553},{"id":1616,"depth":470,"text":1619,"children":2740},[2741,2742],{"id":1622,"depth":467,"text":1625},{"id":1684,"depth":467,"text":1687},{"id":1742,"depth":470,"text":1745,"children":2744},[2745,2746,2747],{"id":1753,"depth":467,"text":1756},{"id":1813,"depth":467,"text":1816},{"id":1842,"depth":467,"text":1845},{"id":1887,"depth":470,"text":1890,"children":2749},[2750,2751],{"id":1893,"depth":467,"text":1896},{"id":1943,"depth":467,"text":1946},{"id":2130,"depth":470,"text":2133,"children":2753},[2754,2756,2757,2758],{"id":2136,"depth":467,"text":2755},"5.1 传输：优先 sendBeacon，降级到 fetch(keepalive)",{"id":2182,"depth":467,"text":2185},{"id":2210,"depth":467,"text":2213},{"id":2247,"depth":467,"text":2250},{"id":2291,"depth":470,"text":2294,"children":2760},[2761,2762,2763],{"id":2297,"depth":467,"text":2300},{"id":2372,"depth":467,"text":2375},{"id":2428,"depth":467,"text":2431},{"id":2465,"depth":470,"text":2468},{"id":2540,"depth":470,"text":2543,"children":2766},[2767,2768,2769],{"id":2546,"depth":467,"text":2549},{"id":2575,"depth":467,"text":2578},{"id":2599,"depth":467,"text":2602},{"id":2626,"depth":470,"text":2629},{"id":2663,"depth":470,"text":2666},{"id":422,"depth":470,"text":422},"content:topics:performance:rum-real-user-monitoring-design.md","topics/performance/rum-real-user-monitoring-design.md","topics/performance/rum-real-user-monitoring-design",{"_path":2777,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2778,"description":2779,"date":2780,"topic":5,"author":11,"tags":2781,"image":2785,"featured":497,"readingTime":22,"body":2786,"_type":478,"_id":3706,"_source":480,"_file":3707,"_stem":3708,"_extension":483},"/topics/performance/core-web-vitals-2026-guide","Core Web Vitals 2026 新标准解读：INP 时代的性能优化策略","全面解读 2026 年 Core Web Vitals 的重大变化，深入分析 INP 取代 FID 的技术背景、测量方法与优化策略，帮助开发者适应新的性能评估体系。","2026-01-15",[493,2782,491,2783,2784],"INP","Web 性能","Google 排名","/images/topics/core-web-vitals-2026.jpg",{"type":24,"children":2787,"toc":3665},[2788,2794,2800,2812,2818,2826,2900,2908,2916,2922,3070,3076,3082,3094,3105,3113,3131,3137,3142,3151,3157,3162,3170,3176,3182,3191,3197,3208,3214,3223,3229,3235,3240,3301,3310,3316,3326,3331,3340,3346,3351,3360,3366,3375,3381,3390,3396,3405,3411,3417,3426,3432,3441,3446,3452,3457,3465,3473,3491,3496,3505,3509,3514,3519,3578,3583,3606,3611],{"type":27,"tag":75,"props":2789,"children":2791},{"id":2790},"core-web-vitals-2026-新标准解读",[2792],{"type":32,"value":2793},"Core Web Vitals 2026 新标准解读",{"type":27,"tag":75,"props":2795,"children":2797},{"id":2796},"_2026-年的重大变化inp-正式取代-fid",[2798],{"type":32,"value":2799},"2026 年的重大变化：INP 正式取代 FID",{"type":27,"tag":28,"props":2801,"children":2802},{},[2803,2805,2810],{"type":32,"value":2804},"2024 年 3 月，Google 正式宣布 ",{"type":27,"tag":548,"props":2806,"children":2807},{},[2808],{"type":32,"value":2809},"INP（Interaction to Next Paint）",{"type":32,"value":2811}," 取代 FID（First Input Delay）成为 Core Web Vitals 的核心指标。经过两年的过渡期，2026 年 INP 已完全成为搜索排名的重要因素。",{"type":27,"tag":775,"props":2813,"children":2815},{"id":2814},"为什么要替换-fid",[2816],{"type":32,"value":2817},"为什么要替换 FID？",{"type":27,"tag":28,"props":2819,"children":2820},{},[2821],{"type":27,"tag":548,"props":2822,"children":2823},{},[2824],{"type":32,"value":2825},"FID 的局限性：",{"type":27,"tag":1195,"props":2827,"children":2828},{},[2829,2845],{"type":27,"tag":1199,"props":2830,"children":2831},{},[2832],{"type":27,"tag":1203,"props":2833,"children":2834},{},[2835,2840],{"type":27,"tag":1207,"props":2836,"children":2837},{},[2838],{"type":32,"value":2839},"问题",{"type":27,"tag":1207,"props":2841,"children":2842},{},[2843],{"type":32,"value":2844},"说明",{"type":27,"tag":1223,"props":2846,"children":2847},{},[2848,2861,2874,2887],{"type":27,"tag":1203,"props":2849,"children":2850},{},[2851,2856],{"type":27,"tag":1230,"props":2852,"children":2853},{},[2854],{"type":32,"value":2855},"只测量首次交互",{"type":27,"tag":1230,"props":2857,"children":2858},{},[2859],{"type":32,"value":2860},"忽略后续所有交互的延迟",{"type":27,"tag":1203,"props":2862,"children":2863},{},[2864,2869],{"type":27,"tag":1230,"props":2865,"children":2866},{},[2867],{"type":32,"value":2868},"只测量输入延迟",{"type":27,"tag":1230,"props":2870,"children":2871},{},[2872],{"type":32,"value":2873},"不包含事件处理和渲染时间",{"type":27,"tag":1203,"props":2875,"children":2876},{},[2877,2882],{"type":27,"tag":1230,"props":2878,"children":2879},{},[2880],{"type":32,"value":2881},"样本偏差",{"type":27,"tag":1230,"props":2883,"children":2884},{},[2885],{"type":32,"value":2886},"某些用户可能永远不触发交互",{"type":27,"tag":1203,"props":2888,"children":2889},{},[2890,2895],{"type":27,"tag":1230,"props":2891,"children":2892},{},[2893],{"type":32,"value":2894},"无法反映真实体验",{"type":27,"tag":1230,"props":2896,"children":2897},{},[2898],{"type":32,"value":2899},"首次交互可能很快，但后续很慢",{"type":27,"tag":28,"props":2901,"children":2902},{},[2903],{"type":27,"tag":548,"props":2904,"children":2905},{},[2906],{"type":32,"value":2907},"INP 的优势：",{"type":27,"tag":954,"props":2909,"children":2911},{"code":2910},"FID 测量范围：\n┌──────────────────────────────────────────────────┐\n│  用户点击  →  浏览器开始处理  │  FID 结束      │\n│     ▼              ▼          │                │\n│   [===========]               │                │\n│   只测这一段                   │                │\n└──────────────────────────────────────────────────┘\n\nINP 测量范围：\n┌──────────────────────────────────────────────────┐\n│  用户点击  →  处理事件  →  渲染完成  │  INP 结束 │\n│     ▼          ▼           ▼        │          │\n│   [================================]            │\n│   完整的交互响应时间                             │\n└──────────────────────────────────────────────────┘\n",[2912],{"type":27,"tag":605,"props":2913,"children":2914},{"__ignoreMap":7},[2915],{"type":32,"value":2910},{"type":27,"tag":775,"props":2917,"children":2919},{"id":2918},"_2026-年-core-web-vitals-完整指标体系",[2920],{"type":32,"value":2921},"2026 年 Core Web Vitals 完整指标体系",{"type":27,"tag":1195,"props":2923,"children":2924},{},[2925,2961],{"type":27,"tag":1199,"props":2926,"children":2927},{},[2928],{"type":27,"tag":1203,"props":2929,"children":2930},{},[2931,2936,2941,2946,2951,2956],{"type":27,"tag":1207,"props":2932,"children":2933},{},[2934],{"type":32,"value":2935},"指标",{"type":27,"tag":1207,"props":2937,"children":2938},{},[2939],{"type":32,"value":2940},"全称",{"type":27,"tag":1207,"props":2942,"children":2943},{},[2944],{"type":32,"value":2945},"测量内容",{"type":27,"tag":1207,"props":2947,"children":2948},{},[2949],{"type":32,"value":2950},"良好阈值",{"type":27,"tag":1207,"props":2952,"children":2953},{},[2954],{"type":32,"value":2955},"需改进",{"type":27,"tag":1207,"props":2957,"children":2958},{},[2959],{"type":32,"value":2960},"差",{"type":27,"tag":1223,"props":2962,"children":2963},{},[2964,2999,3034],{"type":27,"tag":1203,"props":2965,"children":2966},{},[2967,2974,2979,2984,2989,2994],{"type":27,"tag":1230,"props":2968,"children":2969},{},[2970],{"type":27,"tag":548,"props":2971,"children":2972},{},[2973],{"type":32,"value":492},{"type":27,"tag":1230,"props":2975,"children":2976},{},[2977],{"type":32,"value":2978},"Largest Contentful Paint",{"type":27,"tag":1230,"props":2980,"children":2981},{},[2982],{"type":32,"value":2983},"最大内容绘制时间",{"type":27,"tag":1230,"props":2985,"children":2986},{},[2987],{"type":32,"value":2988},"≤ 2.5s",{"type":27,"tag":1230,"props":2990,"children":2991},{},[2992],{"type":32,"value":2993},"≤ 4s",{"type":27,"tag":1230,"props":2995,"children":2996},{},[2997],{"type":32,"value":2998},"> 4s",{"type":27,"tag":1203,"props":3000,"children":3001},{},[3002,3009,3014,3019,3024,3029],{"type":27,"tag":1230,"props":3003,"children":3004},{},[3005],{"type":27,"tag":548,"props":3006,"children":3007},{},[3008],{"type":32,"value":2782},{"type":27,"tag":1230,"props":3010,"children":3011},{},[3012],{"type":32,"value":3013},"Interaction to Next Paint",{"type":27,"tag":1230,"props":3015,"children":3016},{},[3017],{"type":32,"value":3018},"交互到下一次绘制",{"type":27,"tag":1230,"props":3020,"children":3021},{},[3022],{"type":32,"value":3023},"≤ 200ms",{"type":27,"tag":1230,"props":3025,"children":3026},{},[3027],{"type":32,"value":3028},"≤ 500ms",{"type":27,"tag":1230,"props":3030,"children":3031},{},[3032],{"type":32,"value":3033},"> 500ms",{"type":27,"tag":1203,"props":3035,"children":3036},{},[3037,3045,3050,3055,3060,3065],{"type":27,"tag":1230,"props":3038,"children":3039},{},[3040],{"type":27,"tag":548,"props":3041,"children":3042},{},[3043],{"type":32,"value":3044},"CLS",{"type":27,"tag":1230,"props":3046,"children":3047},{},[3048],{"type":32,"value":3049},"Cumulative Layout Shift",{"type":27,"tag":1230,"props":3051,"children":3052},{},[3053],{"type":32,"value":3054},"累积布局偏移",{"type":27,"tag":1230,"props":3056,"children":3057},{},[3058],{"type":32,"value":3059},"≤ 0.1",{"type":27,"tag":1230,"props":3061,"children":3062},{},[3063],{"type":32,"value":3064},"≤ 0.25",{"type":27,"tag":1230,"props":3066,"children":3067},{},[3068],{"type":32,"value":3069},"> 0.25",{"type":27,"tag":75,"props":3071,"children":3073},{"id":3072},"inp-深度解析",[3074],{"type":32,"value":3075},"INP 深度解析",{"type":27,"tag":775,"props":3077,"children":3079},{"id":3078},"inp-的计算方式",[3080],{"type":32,"value":3081},"INP 的计算方式",{"type":27,"tag":28,"props":3083,"children":3084},{},[3085,3087,3092],{"type":32,"value":3086},"INP 并非所有交互延迟的平均值，而是采用",{"type":27,"tag":548,"props":3088,"children":3089},{},[3090],{"type":32,"value":3091},"高百分位值",{"type":32,"value":3093},"策略：",{"type":27,"tag":954,"props":3095,"children":3100},{"code":3096,"language":3097,"meta":7,"className":3098},"// INP 计算逻辑（简化版）\nfunction calculateINP(interactions) {\n  // 按延迟时间排序\n  const sorted = interactions.sort((a, b) => b.duration - a.duration);\n  \n  // 根据交互数量选择百分位\n  // 交互少于 50 次：取最大值\n  // 交互 50 次以上：取第 98 百分位\n  const count = sorted.length;\n  \n  if (count \u003C 50) {\n    return sorted[0]?.duration ?? 0;\n  }\n  \n  // 98th percentile\n  const index = Math.floor(count * 0.02);\n  return sorted[index].duration;\n}\n","javascript",[3099],"language-javascript",[3101],{"type":27,"tag":605,"props":3102,"children":3103},{"__ignoreMap":7},[3104],{"type":32,"value":3096},{"type":27,"tag":28,"props":3106,"children":3107},{},[3108],{"type":27,"tag":548,"props":3109,"children":3110},{},[3111],{"type":32,"value":3112},"为什么选择高百分位而非平均值？",{"type":27,"tag":40,"props":3114,"children":3115},{},[3116,3121,3126],{"type":27,"tag":44,"props":3117,"children":3118},{},[3119],{"type":32,"value":3120},"平均值会被大量快速交互\"稀释\"",{"type":27,"tag":44,"props":3122,"children":3123},{},[3124],{"type":32,"value":3125},"用户对慢交互的感知更强烈",{"type":27,"tag":44,"props":3127,"children":3128},{},[3129],{"type":32,"value":3130},"高百分位更能反映\"最坏情况\"体验",{"type":27,"tag":775,"props":3132,"children":3134},{"id":3133},"什么算作一次交互",[3135],{"type":32,"value":3136},"什么算作一次交互？",{"type":27,"tag":28,"props":3138,"children":3139},{},[3140],{"type":32,"value":3141},"INP 追踪以下类型的交互：",{"type":27,"tag":954,"props":3143,"children":3146},{"code":3144,"language":3097,"meta":7,"className":3145},"// INP 追踪的交互类型\nconst trackedInteractions = {\n  // 点击相关\n  click: true,\n  dblclick: true,\n  contextmenu: true,\n  \n  // 键盘相关\n  keydown: true,\n  keyup: true,\n  keypress: true,\n  \n  // 触摸相关\n  touchstart: true,\n  touchend: true,\n  \n  // 指针相关\n  pointerdown: true,\n  pointerup: true\n};\n\n// 以下不计入 INP\nconst notTracked = {\n  scroll: '滚动不是离散交互',\n  mousemove: '持续性事件',\n  hover: '非用户主动操作'\n};\n",[3099],[3147],{"type":27,"tag":605,"props":3148,"children":3149},{"__ignoreMap":7},[3150],{"type":32,"value":3144},{"type":27,"tag":775,"props":3152,"children":3154},{"id":3153},"inp-的三个阶段",[3155],{"type":32,"value":3156},"INP 的三个阶段",{"type":27,"tag":28,"props":3158,"children":3159},{},[3160],{"type":32,"value":3161},"一次完整的交互由三个阶段组成：",{"type":27,"tag":954,"props":3163,"children":3165},{"code":3164},"┌─────────────────────────────────────────────────────────────┐\n│                      INP 总时长                             │\n├───────────────┬───────────────────────┬────────────────────┤\n│   Input Delay │   Processing Time     │   Presentation     │\n│   输入延迟    │   处理时间            │   呈现延迟         │\n├───────────────┼───────────────────────┼────────────────────┤\n│ 主线程被占用  │ 事件处理函数执行      │ 样式计算+布局+绘制 │\n│ 导致的等待    │                       │                    │\n├───────────────┼───────────────────────┼────────────────────┤\n│   优化方向：  │   优化方向：          │   优化方向：       │\n│ - 减少长任务  │ - 优化事件处理逻辑    │ - 减少 DOM 操作    │\n│ - 使用调度器  │ - 避免同步布局        │ - 使用 transform   │\n│ - Web Worker  │ - 防抖/节流           │ - 避免 Layout      │\n└───────────────┴───────────────────────┴────────────────────┘\n",[3166],{"type":27,"tag":605,"props":3167,"children":3168},{"__ignoreMap":7},[3169],{"type":32,"value":3164},{"type":27,"tag":75,"props":3171,"children":3173},{"id":3172},"测量-core-web-vitals",[3174],{"type":32,"value":3175},"测量 Core Web Vitals",{"type":27,"tag":775,"props":3177,"children":3179},{"id":3178},"使用-web-vitals-库",[3180],{"type":32,"value":3181},"使用 web-vitals 库",{"type":27,"tag":954,"props":3183,"children":3186},{"code":3184,"language":3097,"meta":7,"className":3185},"import { onCLS, onINP, onLCP } from 'web-vitals';\n\n// 基础用法\nonLCP(console.log);\nonINP(console.log);\nonCLS(console.log);\n\n// 详细报告\nfunction sendToAnalytics(metric) {\n  const body = {\n    name: metric.name,\n    value: metric.value,\n    rating: metric.rating,        // 'good' | 'needs-improvement' | 'poor'\n    delta: metric.delta,          // 与上次报告的差值\n    id: metric.id,                // 唯一标识\n    navigationType: metric.navigationType,\n    entries: metric.entries       // 相关 PerformanceEntry\n  };\n  \n  // 发送到分析服务\n  navigator.sendBeacon('/analytics', JSON.stringify(body));\n}\n\nonLCP(sendToAnalytics);\nonINP(sendToAnalytics);\nonCLS(sendToAnalytics);\n",[3099],[3187],{"type":27,"tag":605,"props":3188,"children":3189},{"__ignoreMap":7},[3190],{"type":32,"value":3184},{"type":27,"tag":775,"props":3192,"children":3194},{"id":3193},"在-vuenuxt-中集成",[3195],{"type":32,"value":3196},"在 Vue/Nuxt 中集成",{"type":27,"tag":954,"props":3198,"children":3203},{"code":3199,"language":3200,"meta":7,"className":3201},"// plugins/web-vitals.client.ts\nimport { onCLS, onINP, onLCP } from 'web-vitals';\n\nexport default defineNuxtPlugin(() => {\n  // 仅在客户端运行\n  if (process.server) return;\n  \n  const sendMetric = (metric: Metric) => {\n    // 发送到你的分析服务\n    $fetch('/api/analytics/vitals', {\n      method: 'POST',\n      body: {\n        name: metric.name,\n        value: metric.value,\n        rating: metric.rating,\n        url: window.location.pathname,\n        timestamp: Date.now()\n      }\n    });\n  };\n  \n  onLCP(sendMetric);\n  onINP(sendMetric);\n  onCLS(sendMetric);\n});\n","typescript",[3202],"language-typescript",[3204],{"type":27,"tag":605,"props":3205,"children":3206},{"__ignoreMap":7},[3207],{"type":32,"value":3199},{"type":27,"tag":775,"props":3209,"children":3211},{"id":3210},"在-nextjs-中集成",[3212],{"type":32,"value":3213},"在 Next.js 中集成",{"type":27,"tag":954,"props":3215,"children":3218},{"code":3216,"language":3200,"meta":7,"className":3217},"// app/components/WebVitals.tsx\n'use client';\n\nimport { useEffect } from 'react';\nimport { onCLS, onINP, onLCP } from 'web-vitals';\n\nexport function WebVitals() {\n  useEffect(() => {\n    const sendMetric = (metric) => {\n      // 使用 Next.js 的 Analytics\n      window.gtag?.('event', metric.name, {\n        value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),\n        event_label: metric.id,\n        non_interaction: true,\n      });\n    };\n\n    onLCP(sendMetric);\n    onINP(sendMetric);\n    onCLS(sendMetric);\n  }, []);\n\n  return null;\n}\n\n// app/layout.tsx\nimport { WebVitals } from './components/WebVitals';\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\n      \u003Cbody>\n        \u003CWebVitals />\n        {children}\n      \u003C/body>\n    \u003C/html>\n  );\n}\n",[3202],[3219],{"type":27,"tag":605,"props":3220,"children":3221},{"__ignoreMap":7},[3222],{"type":32,"value":3216},{"type":27,"tag":75,"props":3224,"children":3226},{"id":3225},"lcp-优化策略-2026",[3227],{"type":32,"value":3228},"LCP 优化策略 2026",{"type":27,"tag":775,"props":3230,"children":3232},{"id":3231},"lcp-元素识别",[3233],{"type":32,"value":3234},"LCP 元素识别",{"type":27,"tag":28,"props":3236,"children":3237},{},[3238],{"type":32,"value":3239},"LCP 候选元素类型：",{"type":27,"tag":40,"props":3241,"children":3242},{},[3243,3254,3272,3283,3296],{"type":27,"tag":44,"props":3244,"children":3245},{},[3246,3252],{"type":27,"tag":605,"props":3247,"children":3249},{"className":3248},[],[3250],{"type":32,"value":3251},"\u003Cimg>",{"type":32,"value":3253}," 元素",{"type":27,"tag":44,"props":3255,"children":3256},{},[3257,3263,3265,3271],{"type":27,"tag":605,"props":3258,"children":3260},{"className":3259},[],[3261],{"type":32,"value":3262},"\u003Csvg>",{"type":32,"value":3264}," 内的 ",{"type":27,"tag":605,"props":3266,"children":3268},{"className":3267},[],[3269],{"type":32,"value":3270},"\u003Cimage>",{"type":32,"value":3253},{"type":27,"tag":44,"props":3273,"children":3274},{},[3275,3281],{"type":27,"tag":605,"props":3276,"children":3278},{"className":3277},[],[3279],{"type":32,"value":3280},"\u003Cvideo>",{"type":32,"value":3282}," 元素的封面图",{"type":27,"tag":44,"props":3284,"children":3285},{},[3286,3288,3294],{"type":32,"value":3287},"通过 ",{"type":27,"tag":605,"props":3289,"children":3291},{"className":3290},[],[3292],{"type":32,"value":3293},"background-image",{"type":32,"value":3295}," 加载图片的元素",{"type":27,"tag":44,"props":3297,"children":3298},{},[3299],{"type":32,"value":3300},"包含文本节点的块级元素",{"type":27,"tag":954,"props":3302,"children":3305},{"code":3303,"language":3097,"meta":7,"className":3304},"// 获取 LCP 元素信息\nconst observer = new PerformanceObserver((list) => {\n  const entries = list.getEntries();\n  const lastEntry = entries[entries.length - 1];\n  \n  console.log('LCP 元素:', lastEntry.element);\n  console.log('LCP 时间:', lastEntry.startTime);\n  console.log('LCP 大小:', lastEntry.size);\n});\n\nobserver.observe({ type: 'largest-contentful-paint', buffered: true });\n",[3099],[3306],{"type":27,"tag":605,"props":3307,"children":3308},{"__ignoreMap":7},[3309],{"type":32,"value":3303},{"type":27,"tag":775,"props":3311,"children":3313},{"id":3312},"_2026-年-lcp-优化清单",[3314],{"type":32,"value":3315},"2026 年 LCP 优化清单",{"type":27,"tag":954,"props":3317,"children":3321},{"code":3318,"language":478,"meta":7,"className":3319},"## 资源发现优化\n- [ ] 使用 `\u003Clink rel=\"preload\">` 预加载 LCP 图片\n- [ ] 避免懒加载首屏 LCP 元素\n- [ ] 优化资源发现时间（fetchpriority=\"high\"）\n\n## 资源加载优化\n- [ ] 使用现代图片格式（AVIF > WebP > JPEG）\n- [ ] 实施响应式图片（srcset + sizes）\n- [ ] 启用 HTTP/2 或 HTTP/3\n- [ ] 优化 CDN 配置\n\n## 渲染优化\n- [ ] 减少关键 CSS\n- [ ] 避免渲染阻塞资源\n- [ ] 优化 Web 字体加载\n",[3320],"language-markdown",[3322],{"type":27,"tag":605,"props":3323,"children":3324},{"__ignoreMap":7},[3325],{"type":32,"value":3318},{"type":27,"tag":775,"props":3327,"children":3329},{"id":3328},"资源优先级提示",[3330],{"type":32,"value":3328},{"type":27,"tag":954,"props":3332,"children":3335},{"code":3333,"language":959,"meta":7,"className":3334},"\u003C!-- 2026 年推荐的资源优先级设置 -->\n\n\u003C!-- LCP 图片：最高优先级 -->\n\u003Cimg \n  src=\"/hero.webp\" \n  fetchpriority=\"high\"\n  decoding=\"async\"\n  alt=\"Hero Image\"\n/>\n\n\u003C!-- 预加载关键资源 -->\n\u003Clink rel=\"preload\" href=\"/hero.webp\" as=\"image\" fetchpriority=\"high\">\n\u003Clink rel=\"preload\" href=\"/critical.css\" as=\"style\">\n\u003Clink rel=\"preload\" href=\"/main-font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>\n\n\u003C!-- 预连接到关键域名 -->\n\u003Clink rel=\"preconnect\" href=\"https://cdn.example.com\">\n\u003Clink rel=\"dns-prefetch\" href=\"https://analytics.example.com\">\n\n\u003C!-- 降低非关键资源优先级 -->\n\u003Cimg src=\"/below-fold.webp\" fetchpriority=\"low\" loading=\"lazy\" />\n",[957],[3336],{"type":27,"tag":605,"props":3337,"children":3338},{"__ignoreMap":7},[3339],{"type":32,"value":3333},{"type":27,"tag":75,"props":3341,"children":3343},{"id":3342},"inp-优化策略-2026",[3344],{"type":32,"value":3345},"INP 优化策略 2026",{"type":27,"tag":775,"props":3347,"children":3349},{"id":3348},"识别慢交互",[3350],{"type":32,"value":3348},{"type":27,"tag":954,"props":3352,"children":3355},{"code":3353,"language":3097,"meta":7,"className":3354},"// 使用 PerformanceObserver 监控慢交互\nconst slowInteractions = [];\n\nconst observer = new PerformanceObserver((list) => {\n  for (const entry of list.getEntries()) {\n    if (entry.duration > 200) { // INP 阈值\n      slowInteractions.push({\n        name: entry.name,\n        duration: entry.duration,\n        startTime: entry.startTime,\n        processingStart: entry.processingStart,\n        processingEnd: entry.processingEnd,\n        // 分解三个阶段\n        inputDelay: entry.processingStart - entry.startTime,\n        processingTime: entry.processingEnd - entry.processingStart,\n        presentationDelay: entry.duration - (entry.processingEnd - entry.startTime)\n      });\n      \n      console.warn('慢交互检测:', slowInteractions[slowInteractions.length - 1]);\n    }\n  }\n});\n\nobserver.observe({ type: 'event', buffered: true, durationThreshold: 16 });\n",[3099],[3356],{"type":27,"tag":605,"props":3357,"children":3358},{"__ignoreMap":7},[3359],{"type":32,"value":3353},{"type":27,"tag":775,"props":3361,"children":3363},{"id":3362},"优化输入延迟input-delay",[3364],{"type":32,"value":3365},"优化输入延迟（Input Delay）",{"type":27,"tag":954,"props":3367,"children":3370},{"code":3368,"language":3097,"meta":7,"className":3369},"// ❌ 长任务阻塞主线程\nfunction processLargeData(data) {\n  // 同步处理 100000 条数据\n  return data.map(item => heavyComputation(item));\n}\n\n// ✅ 使用 scheduler.yield() 拆分长任务\nasync function processLargeDataOptimized(data) {\n  const results = [];\n  const chunkSize = 1000;\n  \n  for (let i = 0; i \u003C data.length; i += chunkSize) {\n    const chunk = data.slice(i, i + chunkSize);\n    results.push(...chunk.map(item => heavyComputation(item)));\n    \n    // 让出主线程，允许处理用户交互\n    if (i + chunkSize \u003C data.length) {\n      await scheduler.yield();\n    }\n  }\n  \n  return results;\n}\n\n// ✅ 使用 requestIdleCallback 处理非关键任务\nfunction scheduleNonCriticalWork(callback) {\n  if ('requestIdleCallback' in window) {\n    requestIdleCallback(callback, { timeout: 1000 });\n  } else {\n    setTimeout(callback, 0);\n  }\n}\n",[3099],[3371],{"type":27,"tag":605,"props":3372,"children":3373},{"__ignoreMap":7},[3374],{"type":32,"value":3368},{"type":27,"tag":775,"props":3376,"children":3378},{"id":3377},"优化处理时间processing-time",[3379],{"type":32,"value":3380},"优化处理时间（Processing Time）",{"type":27,"tag":954,"props":3382,"children":3385},{"code":3383,"language":3097,"meta":7,"className":3384},"// ❌ 事件处理中包含大量同步操作\nbutton.addEventListener('click', () => {\n  // 同步数据处理\n  const result = processData(data);\n  \n  // 同步 DOM 更新\n  updateDOM(result);\n  \n  // 同步网络请求\n  fetch('/api/save', { method: 'POST', body: JSON.stringify(result) });\n});\n\n// ✅ 优化后：最小化同步操作\nbutton.addEventListener('click', async () => {\n  // 立即提供视觉反馈\n  button.disabled = true;\n  showLoadingState();\n  \n  // 使用 queueMicrotask 延迟非关键更新\n  queueMicrotask(() => {\n    // 数据处理移到微任务\n    const result = processData(data);\n    \n    // 使用 requestAnimationFrame 批量 DOM 更新\n    requestAnimationFrame(() => {\n      updateDOM(result);\n    });\n    \n    // 异步网络请求\n    fetch('/api/save', { method: 'POST', body: JSON.stringify(result) });\n  });\n});\n",[3099],[3386],{"type":27,"tag":605,"props":3387,"children":3388},{"__ignoreMap":7},[3389],{"type":32,"value":3383},{"type":27,"tag":775,"props":3391,"children":3393},{"id":3392},"优化呈现延迟presentation-delay",[3394],{"type":32,"value":3395},"优化呈现延迟（Presentation Delay）",{"type":27,"tag":954,"props":3397,"children":3400},{"code":3398,"language":3097,"meta":7,"className":3399},"// ❌ 触发强制同步布局\nelement.addEventListener('click', () => {\n  // 修改样式\n  element.style.width = '100px';\n  \n  // 立即读取布局信息 → 触发强制同步布局\n  const height = element.offsetHeight;\n  \n  // 再次修改样式 → 布局失效\n  element.style.height = height + 'px';\n});\n\n// ✅ 读写分离，使用 transform\nelement.addEventListener('click', () => {\n  // 使用 transform 避免布局计算\n  element.style.transform = 'scale(1.1)';\n  \n  // 批量读取\n  requestAnimationFrame(() => {\n    const rect = element.getBoundingClientRect();\n    // 批量写入\n    requestAnimationFrame(() => {\n      updateRelatedElements(rect);\n    });\n  });\n});\n",[3099],[3401],{"type":27,"tag":605,"props":3402,"children":3403},{"__ignoreMap":7},[3404],{"type":32,"value":3398},{"type":27,"tag":75,"props":3406,"children":3408},{"id":3407},"cls-优化策略-2026",[3409],{"type":32,"value":3410},"CLS 优化策略 2026",{"type":27,"tag":775,"props":3412,"children":3414},{"id":3413},"cls-来源分析",[3415],{"type":32,"value":3416},"CLS 来源分析",{"type":27,"tag":954,"props":3418,"children":3421},{"code":3419,"language":3097,"meta":7,"className":3420},"// 监控并分析 CLS 来源\nconst clsSources = [];\n\nconst observer = new PerformanceObserver((list) => {\n  for (const entry of list.getEntries()) {\n    if (!entry.hadRecentInput) { // 排除用户交互导致的偏移\n      for (const source of entry.sources || []) {\n        clsSources.push({\n          value: entry.value,\n          element: source.node,\n          previousRect: source.previousRect,\n          currentRect: source.currentRect\n        });\n      }\n    }\n  }\n});\n\nobserver.observe({ type: 'layout-shift', buffered: true });\n",[3099],[3422],{"type":27,"tag":605,"props":3423,"children":3424},{"__ignoreMap":7},[3425],{"type":32,"value":3419},{"type":27,"tag":775,"props":3427,"children":3429},{"id":3428},"_2026-年-cls-优化清单",[3430],{"type":32,"value":3431},"2026 年 CLS 优化清单",{"type":27,"tag":954,"props":3433,"children":3436},{"code":3434,"language":959,"meta":7,"className":3435},"\u003C!-- 1. 图片和视频预留空间 -->\n\u003Cimg \n  src=\"/image.webp\" \n  width=\"800\" \n  height=\"600\" \n  alt=\"...\"\n  style=\"aspect-ratio: 800/600;\"\n/>\n\n\u003C!-- 2. 使用 CSS aspect-ratio -->\n\u003Cstyle>\n.video-container {\n  aspect-ratio: 16/9;\n  width: 100%;\n}\n\u003C/style>\n\n\u003C!-- 3. 为动态内容预留空间 -->\n\u003Cstyle>\n.ad-slot {\n  min-height: 250px; /* 广告最小高度 */\n}\n.skeleton {\n  min-height: 200px; /* 骨架屏占位 */\n}\n\u003C/style>\n\n\u003C!-- 4. 避免在现有内容上方插入内容 -->\n\u003C!-- ❌ 错误 -->\n\u003Cdiv class=\"new-banner\" style=\"position: relative;\">新公告\u003C/div>\n\n\u003C!-- ✅ 正确：预留空间或使用 transform -->\n\u003Cdiv class=\"banner-slot\" style=\"min-height: 50px;\">\n  \u003Cdiv class=\"new-banner\">新公告\u003C/div>\n\u003C/div>\n",[957],[3437],{"type":27,"tag":605,"props":3438,"children":3439},{"__ignoreMap":7},[3440],{"type":32,"value":3434},{"type":27,"tag":75,"props":3442,"children":3444},{"id":3443},"搜索排名影响与应对策略",[3445],{"type":32,"value":3443},{"type":27,"tag":775,"props":3447,"children":3449},{"id":3448},"core-web-vitals-在排名中的权重",[3450],{"type":32,"value":3451},"Core Web Vitals 在排名中的权重",{"type":27,"tag":28,"props":3453,"children":3454},{},[3455],{"type":32,"value":3456},"根据 Google 官方说明和实际观察：",{"type":27,"tag":954,"props":3458,"children":3460},{"code":3459},"排名因素权重（估算）：\n├─ 内容相关性 ████████████████████ 40%+\n├─ 反向链接质量 ████████████ 25%\n├─ 页面体验信号\n│   ├─ HTTPS ██ 5%\n│   ├─ Mobile-Friendly ███ 7%\n│   ├─ No Intrusive Interstitials ██ 3%\n│   └─ Core Web Vitals ████ 8-10%\n└─ 其他因素 █████ 10%\n",[3461],{"type":27,"tag":605,"props":3462,"children":3463},{"__ignoreMap":7},[3464],{"type":32,"value":3459},{"type":27,"tag":28,"props":3466,"children":3467},{},[3468],{"type":27,"tag":548,"props":3469,"children":3470},{},[3471],{"type":32,"value":3472},"重要提示：",{"type":27,"tag":40,"props":3474,"children":3475},{},[3476,3481,3486],{"type":27,"tag":44,"props":3477,"children":3478},{},[3479],{"type":32,"value":3480},"Core Web Vitals 是\"入围资格\"而非\"排名加分\"",{"type":27,"tag":44,"props":3482,"children":3483},{},[3484],{"type":32,"value":3485},"当内容质量相近时，性能优势更明显",{"type":27,"tag":44,"props":3487,"children":3488},{},[3489],{"type":32,"value":3490},"差的 Core Web Vitals 可能导致排名下降",{"type":27,"tag":775,"props":3492,"children":3494},{"id":3493},"监控与预警系统",[3495],{"type":32,"value":3493},{"type":27,"tag":954,"props":3497,"children":3500},{"code":3498,"language":3200,"meta":7,"className":3499},"// 建立 Core Web Vitals 监控系统\ninterface VitalsThreshold {\n  good: number;\n  needsImprovement: number;\n}\n\nconst thresholds: Record\u003Cstring, VitalsThreshold> = {\n  LCP: { good: 2500, needsImprovement: 4000 },\n  INP: { good: 200, needsImprovement: 500 },\n  CLS: { good: 0.1, needsImprovement: 0.25 }\n};\n\nfunction analyzeVitals(metrics: Record\u003Cstring, number>) {\n  const report = {};\n  \n  for (const [name, value] of Object.entries(metrics)) {\n    const threshold = thresholds[name];\n    \n    let status: 'good' | 'needs-improvement' | 'poor';\n    if (value \u003C= threshold.good) {\n      status = 'good';\n    } else if (value \u003C= threshold.needsImprovement) {\n      status = 'needs-improvement';\n    } else {\n      status = 'poor';\n    }\n    \n    report[name] = { value, status };\n    \n    // 触发告警\n    if (status === 'poor') {\n      sendAlert(`${name} 指标严重不达标: ${value}`);\n    }\n  }\n  \n  return report;\n}\n",[3202],[3501],{"type":27,"tag":605,"props":3502,"children":3503},{"__ignoreMap":7},[3504],{"type":32,"value":3498},{"type":27,"tag":75,"props":3506,"children":3507},{"id":422},[3508],{"type":32,"value":422},{"type":27,"tag":28,"props":3510,"children":3511},{},[3512],{"type":32,"value":3513},"2026 年的 Core Web Vitals 以 INP 为核心，标志着性能评估从\"首次加载\"向\"全程交互\"的转变。",{"type":27,"tag":775,"props":3515,"children":3517},{"id":3516},"关键要点回顾",[3518],{"type":32,"value":3516},{"type":27,"tag":40,"props":3520,"children":3521},{},[3522,3534,3545,3556,3567],{"type":27,"tag":44,"props":3523,"children":3524},{},[3525,3527,3532],{"type":32,"value":3526},"✅ ",{"type":27,"tag":548,"props":3528,"children":3529},{},[3530],{"type":32,"value":3531},"INP 取代 FID",{"type":32,"value":3533},"：测量完整交互响应时间",{"type":27,"tag":44,"props":3535,"children":3536},{},[3537,3538,3543],{"type":32,"value":3526},{"type":27,"tag":548,"props":3539,"children":3540},{},[3541],{"type":32,"value":3542},"三大指标协同",{"type":32,"value":3544},"：LCP（加载）+ INP（交互）+ CLS（稳定）",{"type":27,"tag":44,"props":3546,"children":3547},{},[3548,3549,3554],{"type":32,"value":3526},{"type":27,"tag":548,"props":3550,"children":3551},{},[3552],{"type":32,"value":3553},"优化优先级",{"type":32,"value":3555},"：先保证 INP，再优化 LCP 和 CLS",{"type":27,"tag":44,"props":3557,"children":3558},{},[3559,3560,3565],{"type":32,"value":3526},{"type":27,"tag":548,"props":3561,"children":3562},{},[3563],{"type":32,"value":3564},"持续监控",{"type":32,"value":3566},"：建立实时监控和预警机制",{"type":27,"tag":44,"props":3568,"children":3569},{},[3570,3571,3576],{"type":32,"value":3526},{"type":27,"tag":548,"props":3572,"children":3573},{},[3574],{"type":32,"value":3575},"渐进优化",{"type":32,"value":3577},"：从高流量页面开始，逐步覆盖全站",{"type":27,"tag":775,"props":3579,"children":3581},{"id":3580},"立即行动",[3582],{"type":32,"value":3580},{"type":27,"tag":886,"props":3584,"children":3585},{},[3586,3591,3596,3601],{"type":27,"tag":44,"props":3587,"children":3588},{},[3589],{"type":32,"value":3590},"使用 web-vitals 库集成性能监控",{"type":27,"tag":44,"props":3592,"children":3593},{},[3594],{"type":32,"value":3595},"在 Chrome DevTools 中检查慢交互",{"type":27,"tag":44,"props":3597,"children":3598},{},[3599],{"type":32,"value":3600},"重点优化 INP > 200ms 的交互",{"type":27,"tag":44,"props":3602,"children":3603},{},[3604],{"type":32,"value":3605},"建立周期性的性能审计流程",{"type":27,"tag":75,"props":3607,"children":3609},{"id":3608},"相关资源",[3610],{"type":32,"value":3608},{"type":27,"tag":40,"props":3612,"children":3613},{},[3614,3625,3635,3645,3655],{"type":27,"tag":44,"props":3615,"children":3616},{},[3617],{"type":27,"tag":442,"props":3618,"children":3622},{"href":3619,"rel":3620},"https://web.dev/vitals/",[3621],"nofollow",[3623],{"type":32,"value":3624},"web.dev - Core Web Vitals",{"type":27,"tag":44,"props":3626,"children":3627},{},[3628],{"type":27,"tag":442,"props":3629,"children":3632},{"href":3630,"rel":3631},"https://developer.chrome.com/docs/devtools/performance/",[3621],[3633],{"type":32,"value":3634},"Chrome DevTools - 性能分析",{"type":27,"tag":44,"props":3636,"children":3637},{},[3638],{"type":27,"tag":442,"props":3639,"children":3642},{"href":3640,"rel":3641},"https://github.com/GoogleChrome/web-vitals",[3621],[3643],{"type":32,"value":3644},"web-vitals 库",{"type":27,"tag":44,"props":3646,"children":3647},{},[3648],{"type":27,"tag":442,"props":3649,"children":3652},{"href":3650,"rel":3651},"https://pagespeed.web.dev/",[3621],[3653],{"type":32,"value":3654},"PageSpeed Insights",{"type":27,"tag":44,"props":3656,"children":3657},{},[3658],{"type":27,"tag":442,"props":3659,"children":3662},{"href":3660,"rel":3661},"https://search.google.com/search-console/",[3621],[3663],{"type":32,"value":3664},"Search Console Core Web Vitals 报告",{"title":7,"searchDepth":467,"depth":467,"links":3666},[3667,3668,3672,3677,3682,3687,3693,3697,3701,3705],{"id":2790,"depth":470,"text":2793},{"id":2796,"depth":470,"text":2799,"children":3669},[3670,3671],{"id":2814,"depth":467,"text":2817},{"id":2918,"depth":467,"text":2921},{"id":3072,"depth":470,"text":3075,"children":3673},[3674,3675,3676],{"id":3078,"depth":467,"text":3081},{"id":3133,"depth":467,"text":3136},{"id":3153,"depth":467,"text":3156},{"id":3172,"depth":470,"text":3175,"children":3678},[3679,3680,3681],{"id":3178,"depth":467,"text":3181},{"id":3193,"depth":467,"text":3196},{"id":3210,"depth":467,"text":3213},{"id":3225,"depth":470,"text":3228,"children":3683},[3684,3685,3686],{"id":3231,"depth":467,"text":3234},{"id":3312,"depth":467,"text":3315},{"id":3328,"depth":467,"text":3328},{"id":3342,"depth":470,"text":3345,"children":3688},[3689,3690,3691,3692],{"id":3348,"depth":467,"text":3348},{"id":3362,"depth":467,"text":3365},{"id":3377,"depth":467,"text":3380},{"id":3392,"depth":467,"text":3395},{"id":3407,"depth":470,"text":3410,"children":3694},[3695,3696],{"id":3413,"depth":467,"text":3416},{"id":3428,"depth":467,"text":3431},{"id":3443,"depth":470,"text":3443,"children":3698},[3699,3700],{"id":3448,"depth":467,"text":3451},{"id":3493,"depth":467,"text":3493},{"id":422,"depth":470,"text":422,"children":3702},[3703,3704],{"id":3516,"depth":467,"text":3516},{"id":3580,"depth":467,"text":3580},{"id":3608,"depth":470,"text":3608},"content:topics:performance:core-web-vitals-2026-guide.md","topics/performance/core-web-vitals-2026-guide.md","topics/performance/core-web-vitals-2026-guide",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":3710,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":3711,"_type":478,"_id":479,"_source":480,"_file":481,"_stem":482,"_extension":483},[13,14,15,16,17],{"type":24,"children":3712,"toc":4065},[3713,3717,3721,3744,3748,3752,3756,3775,3779,3783,3787,3806,3810,3825,3829,3833,3837,3841,3856,3860,3875,3879,3883,3887,3891,3906,3910,3925,3929,3933,3948,3952,3956,3960,3975,3979,3998,4002,4006,4029,4033,4037,4041],{"type":27,"tag":28,"props":3714,"children":3715},{},[3716],{"type":32,"value":33},{"type":27,"tag":28,"props":3718,"children":3719},{},[3720],{"type":32,"value":38},{"type":27,"tag":40,"props":3722,"children":3723},{},[3724,3728,3732,3736,3740],{"type":27,"tag":44,"props":3725,"children":3726},{},[3727],{"type":32,"value":48},{"type":27,"tag":44,"props":3729,"children":3730},{},[3731],{"type":32,"value":53},{"type":27,"tag":44,"props":3733,"children":3734},{},[3735],{"type":32,"value":58},{"type":27,"tag":44,"props":3737,"children":3738},{},[3739],{"type":32,"value":63},{"type":27,"tag":44,"props":3741,"children":3742},{},[3743],{"type":32,"value":68},{"type":27,"tag":28,"props":3745,"children":3746},{},[3747],{"type":32,"value":73},{"type":27,"tag":75,"props":3749,"children":3750},{"id":77},[3751],{"type":32,"value":77},{"type":27,"tag":28,"props":3753,"children":3754},{},[3755],{"type":32,"value":84},{"type":27,"tag":40,"props":3757,"children":3758},{},[3759,3763,3767,3771],{"type":27,"tag":44,"props":3760,"children":3761},{},[3762],{"type":32,"value":92},{"type":27,"tag":44,"props":3764,"children":3765},{},[3766],{"type":32,"value":97},{"type":27,"tag":44,"props":3768,"children":3769},{},[3770],{"type":32,"value":102},{"type":27,"tag":44,"props":3772,"children":3773},{},[3774],{"type":32,"value":107},{"type":27,"tag":28,"props":3776,"children":3777},{},[3778],{"type":32,"value":112},{"type":27,"tag":75,"props":3780,"children":3781},{"id":115},[3782],{"type":32,"value":115},{"type":27,"tag":28,"props":3784,"children":3785},{},[3786],{"type":32,"value":122},{"type":27,"tag":40,"props":3788,"children":3789},{},[3790,3794,3798,3802],{"type":27,"tag":44,"props":3791,"children":3792},{},[3793],{"type":32,"value":130},{"type":27,"tag":44,"props":3795,"children":3796},{},[3797],{"type":32,"value":135},{"type":27,"tag":44,"props":3799,"children":3800},{},[3801],{"type":32,"value":140},{"type":27,"tag":44,"props":3803,"children":3804},{},[3805],{"type":32,"value":145},{"type":27,"tag":28,"props":3807,"children":3808},{},[3809],{"type":32,"value":150},{"type":27,"tag":40,"props":3811,"children":3812},{},[3813,3817,3821],{"type":27,"tag":44,"props":3814,"children":3815},{},[3816],{"type":32,"value":158},{"type":27,"tag":44,"props":3818,"children":3819},{},[3820],{"type":32,"value":163},{"type":27,"tag":44,"props":3822,"children":3823},{},[3824],{"type":32,"value":168},{"type":27,"tag":28,"props":3826,"children":3827},{},[3828],{"type":32,"value":173},{"type":27,"tag":75,"props":3830,"children":3831},{"id":176},[3832],{"type":32,"value":176},{"type":27,"tag":28,"props":3834,"children":3835},{},[3836],{"type":32,"value":183},{"type":27,"tag":28,"props":3838,"children":3839},{},[3840],{"type":32,"value":188},{"type":27,"tag":40,"props":3842,"children":3843},{},[3844,3848,3852],{"type":27,"tag":44,"props":3845,"children":3846},{},[3847],{"type":32,"value":196},{"type":27,"tag":44,"props":3849,"children":3850},{},[3851],{"type":32,"value":201},{"type":27,"tag":44,"props":3853,"children":3854},{},[3855],{"type":32,"value":206},{"type":27,"tag":28,"props":3857,"children":3858},{},[3859],{"type":32,"value":211},{"type":27,"tag":40,"props":3861,"children":3862},{},[3863,3867,3871],{"type":27,"tag":44,"props":3864,"children":3865},{},[3866],{"type":32,"value":219},{"type":27,"tag":44,"props":3868,"children":3869},{},[3870],{"type":32,"value":224},{"type":27,"tag":44,"props":3872,"children":3873},{},[3874],{"type":32,"value":229},{"type":27,"tag":28,"props":3876,"children":3877},{},[3878],{"type":32,"value":234},{"type":27,"tag":75,"props":3880,"children":3881},{"id":237},[3882],{"type":32,"value":240},{"type":27,"tag":28,"props":3884,"children":3885},{},[3886],{"type":32,"value":245},{"type":27,"tag":28,"props":3888,"children":3889},{},[3890],{"type":32,"value":250},{"type":27,"tag":40,"props":3892,"children":3893},{},[3894,3898,3902],{"type":27,"tag":44,"props":3895,"children":3896},{},[3897],{"type":32,"value":258},{"type":27,"tag":44,"props":3899,"children":3900},{},[3901],{"type":32,"value":263},{"type":27,"tag":44,"props":3903,"children":3904},{},[3905],{"type":32,"value":268},{"type":27,"tag":28,"props":3907,"children":3908},{},[3909],{"type":32,"value":273},{"type":27,"tag":40,"props":3911,"children":3912},{},[3913,3917,3921],{"type":27,"tag":44,"props":3914,"children":3915},{},[3916],{"type":32,"value":281},{"type":27,"tag":44,"props":3918,"children":3919},{},[3920],{"type":32,"value":286},{"type":27,"tag":44,"props":3922,"children":3923},{},[3924],{"type":32,"value":291},{"type":27,"tag":75,"props":3926,"children":3927},{"id":294},[3928],{"type":32,"value":294},{"type":27,"tag":28,"props":3930,"children":3931},{},[3932],{"type":32,"value":301},{"type":27,"tag":40,"props":3934,"children":3935},{},[3936,3940,3944],{"type":27,"tag":44,"props":3937,"children":3938},{},[3939],{"type":32,"value":309},{"type":27,"tag":44,"props":3941,"children":3942},{},[3943],{"type":32,"value":314},{"type":27,"tag":44,"props":3945,"children":3946},{},[3947],{"type":32,"value":319},{"type":27,"tag":28,"props":3949,"children":3950},{},[3951],{"type":32,"value":324},{"type":27,"tag":75,"props":3953,"children":3954},{"id":327},[3955],{"type":32,"value":330},{"type":27,"tag":28,"props":3957,"children":3958},{},[3959],{"type":32,"value":335},{"type":27,"tag":40,"props":3961,"children":3962},{},[3963,3967,3971],{"type":27,"tag":44,"props":3964,"children":3965},{},[3966],{"type":32,"value":343},{"type":27,"tag":44,"props":3968,"children":3969},{},[3970],{"type":32,"value":348},{"type":27,"tag":44,"props":3972,"children":3973},{},[3974],{"type":32,"value":353},{"type":27,"tag":28,"props":3976,"children":3977},{},[3978],{"type":32,"value":358},{"type":27,"tag":40,"props":3980,"children":3981},{},[3982,3986,3990,3994],{"type":27,"tag":44,"props":3983,"children":3984},{},[3985],{"type":32,"value":366},{"type":27,"tag":44,"props":3987,"children":3988},{},[3989],{"type":32,"value":371},{"type":27,"tag":44,"props":3991,"children":3992},{},[3993],{"type":32,"value":376},{"type":27,"tag":44,"props":3995,"children":3996},{},[3997],{"type":32,"value":381},{"type":27,"tag":28,"props":3999,"children":4000},{},[4001],{"type":32,"value":386},{"type":27,"tag":75,"props":4003,"children":4004},{"id":389},[4005],{"type":32,"value":389},{"type":27,"tag":40,"props":4007,"children":4008},{},[4009,4013,4017,4021,4025],{"type":27,"tag":44,"props":4010,"children":4011},{},[4012],{"type":32,"value":399},{"type":27,"tag":44,"props":4014,"children":4015},{},[4016],{"type":32,"value":404},{"type":27,"tag":44,"props":4018,"children":4019},{},[4020],{"type":32,"value":409},{"type":27,"tag":44,"props":4022,"children":4023},{},[4024],{"type":32,"value":414},{"type":27,"tag":44,"props":4026,"children":4027},{},[4028],{"type":32,"value":419},{"type":27,"tag":75,"props":4030,"children":4031},{"id":422},[4032],{"type":32,"value":422},{"type":27,"tag":28,"props":4034,"children":4035},{},[4036],{"type":32,"value":429},{"type":27,"tag":28,"props":4038,"children":4039},{},[4040],{"type":32,"value":434},{"type":27,"tag":40,"props":4042,"children":4043},{},[4044,4051,4058],{"type":27,"tag":44,"props":4045,"children":4046},{},[4047],{"type":27,"tag":442,"props":4048,"children":4049},{"href":444},[4050],{"type":32,"value":447},{"type":27,"tag":44,"props":4052,"children":4053},{},[4054],{"type":27,"tag":442,"props":4055,"children":4056},{"href":453},[4057],{"type":32,"value":456},{"type":27,"tag":44,"props":4059,"children":4060},{},[4061],{"type":27,"tag":442,"props":4062,"children":4063},{"href":462},[4064],{"type":32,"value":465},{"title":7,"searchDepth":467,"depth":467,"links":4066},[4067,4068,4069,4070,4071,4072,4073,4074],{"id":77,"depth":470,"text":77},{"id":115,"depth":470,"text":115},{"id":176,"depth":470,"text":176},{"id":237,"depth":470,"text":240},{"id":294,"depth":470,"text":294},{"id":327,"depth":470,"text":330},{"id":389,"depth":470,"text":389},{"id":422,"depth":470,"text":422},1776916091606]