V.1 性能优化：提供快速用户体验

目的：优化网页以提供快速的用户体验。

• Core Web Vitals (LCP, INP, CLS)：Google 定义的衡量用户体验的指标，包括加载、交互性和视觉稳定性。
  • Largest Contentful Paint (LCP)：通过标记最大内容元素的渲染时间来衡量感知加载速度。
  • Interaction to Next Paint (INP)：通过评估页面对用户交互的整体响应能力来衡量交互性。
  • Cumulative Layout Shift (CLS)：通过测量意外的布局偏移来量化视觉稳定性。
• 技术：
  • 图像优化：压缩、调整大小、转换为现代格式（例如，WebP）。
  • 关键 CSS：内联首屏内容所需的基本 CSS。
  • 代码分割和惰性加载：仅在需要时加载组件/代码，以减少初始加载时间和包大小。
  • 缓存：浏览器缓存、CDN（内容分发网络）使用，以减少延迟和改善加载时间。
  • 字体传输优化：使用 link rel="preload" 和 font-display: optional 来防止布局偏移。
  • 压缩和连接文件：删除不必要的字符并组合文件以减少 HTTP 请求。
  • 避免布局偏移：为图像/视频添加 width/height 属性，为动态内容保留空间，使用 CSS 进行布局。
• 工具：Lighthouse（用于审计性能、可访问性、SEO 等的开源自动化工具）和 PageSpeed Insights。

性能优化不再事后考虑，而是核心设计原则，由用户期望和搜索引擎排名因素驱动。Core Web Vitals 提供了一个可衡量的框架，用于改善用户感知。关键 CSS 和惰性加载等技术直接解决了初始负载大与用户体验差之间的因果关系。

表格：Core Web Vitals 优化技术

Core Web Vital	解决的问题	关键技术（示例）	工具（示例）
LCP	感知加载速度慢	优化图像，关键 CSS，服务器响应时间，预加载英雄图像	Lighthouse
INP	交互响应慢	避免阻塞主线程的长时间任务，优化事件回调，减少 DOM 大小	Lighthouse
CLS	视觉稳定性差	为图像/视频设置尺寸，为广告/动态内容保留空间，优化字体传输	Lighthouse

这个表格提供了与可衡量性能指标直接相关的可操作策略。它帮助开发者理解如何改善 Web 性能以及为什么特定技术有效，将技术实现与用户体验和 SEO 联系起来。