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