[{"data":1,"prerenderedAt":237},["ShallowReactive",2],{"content-/blog/web-vitals":3,"related-blog":212},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":206,"_id":207,"_source":208,"_file":209,"_stem":210,"_extension":211},"/blog/web-vitals","blog",false,"","Core Web Vitals","优化核心网页指标：LCP、FID、CLS","Core Web Vitals, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":196},"root",[18,26,32,37,73,78,91,96,109,115,147,152,165,169,174],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"文章暂未完成",[24],{"type":25,"value":22},"text",{"type":19,"tag":27,"props":28,"children":29},"p",{},[30],{"type":25,"value":31},"Core Web Vitals 是衡量网页用户体验的关键集合：Largest Contentful Paint (LCP)、First Input Delay (FID)/Interaction to Next Paint (INP)、以及 Cumulative Layout Shift (CLS)。本文介绍如何在生成平台与编辑器场景下收集、分析并优化这些指标。",{"type":19,"tag":20,"props":33,"children":35},{"id":34},"关键指标简介",[36],{"type":25,"value":34},{"type":19,"tag":38,"props":39,"children":40},"ul",{},[41,53,63],{"type":19,"tag":42,"props":43,"children":44},"li",{},[45,51],{"type":19,"tag":46,"props":47,"children":48},"strong",{},[49],{"type":25,"value":50},"LCP",{"type":25,"value":52},"：衡量主要内容渲染完成的时间，理想值 \u003C 2.5s。",{"type":19,"tag":42,"props":54,"children":55},{},[56,61],{"type":19,"tag":46,"props":57,"children":58},{},[59],{"type":25,"value":60},"交互延迟（INP/FID）",{"type":25,"value":62},"：衡量用户首次或持续交互的响应性，目标低于 100ms（根据场景选择指标）。",{"type":19,"tag":42,"props":64,"children":65},{},[66,71],{"type":19,"tag":46,"props":67,"children":68},{},[69],{"type":25,"value":70},"CLS",{"type":25,"value":72},"：衡量布局移动造成的视觉不稳定，目标 \u003C 0.1。",{"type":19,"tag":20,"props":74,"children":76},{"id":75},"在生成系统中的关注点",[77],{"type":25,"value":75},{"type":19,"tag":38,"props":79,"children":80},{},[81,86],{"type":19,"tag":42,"props":82,"children":83},{},[84],{"type":25,"value":85},"生成产物的首屏资源体积直接影响 LCP；模板与样式应尽量减少阻塞资源。",{"type":19,"tag":42,"props":87,"children":88},{},[89],{"type":25,"value":90},"动态注入样式或图片延迟加载策略需谨慎，避免引起 CLS。",{"type":19,"tag":20,"props":92,"children":94},{"id":93},"测量与采集策略",[95],{"type":25,"value":93},{"type":19,"tag":38,"props":97,"children":98},{},[99,104],{"type":19,"tag":42,"props":100,"children":101},{},[102],{"type":25,"value":103},"在生产中使用 RUM（Real User Monitoring）收集实际用户的 Core Web Vitals，结合实验性 lab 测试（Lighthouse、WebPageTest）定位问题。",{"type":19,"tag":42,"props":105,"children":106},{},[107],{"type":25,"value":108},"对生成服务输出的页面启用自定义指标上报（例如在页面内注入小脚本发送 LCP/CLS/INP 到后端），并与用户会话 metadata 关联。",{"type":19,"tag":20,"props":110,"children":112},{"id":111},"优化建议实践",[113],{"type":25,"value":114},"优化建议（实践）",{"type":19,"tag":38,"props":116,"children":117},{},[118,123,137,142],{"type":19,"tag":42,"props":119,"children":120},{},[121],{"type":25,"value":122},"优化关键渲染路径：将关键 CSS 内联或按需加载，延迟非关键 JS。",{"type":19,"tag":42,"props":124,"children":125},{},[126,128,135],{"type":25,"value":127},"图片优化：预设尺寸、使用 responsive ",{"type":19,"tag":129,"props":130,"children":132},"code",{"className":131},[],[133],{"type":25,"value":134},"srcset",{"type":25,"value":136},"、以及合适的格式（AVIF/WebP），配合占位图避免布局跳动。",{"type":19,"tag":42,"props":138,"children":139},{},[140],{"type":25,"value":141},"减少字体阻塞：使用 font-display: swap 或预加载关键字体。",{"type":19,"tag":42,"props":143,"children":144},{},[145],{"type":25,"value":146},"控制动画与动态内容：避免在渲染时插入占位元素导致 CLS，使用 transform 而非改变布局的属性（如 width/height）进行动画。",{"type":19,"tag":20,"props":148,"children":150},{"id":149},"监控与回归防护",[151],{"type":25,"value":149},{"type":19,"tag":38,"props":153,"children":154},{},[155,160],{"type":19,"tag":42,"props":156,"children":157},{},[158],{"type":25,"value":159},"在 CI 中引入 Lighthouse 集成测试，记录基线并对回归设置阈值。",{"type":19,"tag":42,"props":161,"children":162},{},[163],{"type":25,"value":164},"将 RUM 指标与错误/版本信息关联，定位特定发布引起的变动。",{"type":19,"tag":166,"props":167,"children":168},"hr",{},[],{"type":19,"tag":27,"props":170,"children":171},{},[172],{"type":25,"value":173},"相关链接：",{"type":19,"tag":38,"props":175,"children":176},{},[177,187],{"type":19,"tag":42,"props":178,"children":179},{},[180],{"type":19,"tag":181,"props":182,"children":184},"a",{"href":183},"/blog",[185],{"type":25,"value":186},"返回博客分类",{"type":19,"tag":42,"props":188,"children":189},{},[190],{"type":19,"tag":181,"props":191,"children":193},{"href":192},"/blog/topic/multi-agent-system",[194],{"type":25,"value":195},"查看热门话题",{"title":7,"searchDepth":197,"depth":197,"links":198},3,[199,201,202,203,204,205],{"id":22,"depth":200,"text":22},2,{"id":34,"depth":200,"text":34},{"id":75,"depth":200,"text":75},{"id":93,"depth":200,"text":93},{"id":111,"depth":200,"text":114},{"id":149,"depth":200,"text":149},"markdown","content:blog:web-vitals.md","content","blog/web-vitals.md","blog/web-vitals","md",[213,221,229],{"_path":214,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":215,"description":216,"keywords":217,"author":11,"date":12,"category":13,"image":14,"_type":206,"_id":218,"_source":208,"_file":219,"_stem":220,"_extension":211},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":222,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":223,"description":224,"keywords":225,"author":11,"date":12,"category":13,"image":14,"_type":206,"_id":226,"_source":208,"_file":227,"_stem":228,"_extension":211},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":230,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":231,"description":232,"keywords":233,"author":11,"date":12,"category":13,"image":14,"_type":206,"_id":234,"_source":208,"_file":235,"_stem":236,"_extension":211},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945277473]