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