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