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