从代码优化到资源加载，全面提升网站加载速度与运行性能。
高端网站既要好看，也要跑得快。研究显示，页面每慢 1 秒，移动端流失率上升约 7%；同时，加载速度也是搜索引擎排名的重要因子。本文档围绕 Google 提出的 Core Web Vitals 三大核心指标，系统讲解从资源、图片、缓存到监测的完整优化链路，所有方法都经过华瑞富博 680+ 项目的实战验证。
优化之前，先明确"快"要被什么度量。
首屏最大元素（通常是主图或大标题）呈现完成时间，目标 ≤ 2.5 秒。
页面首次可交互的延迟，目标 ≤ 100ms，决定操作是否"跟手"。
页面加载过程中元素意外位移的总和，目标 ≤ 0.1，避免"点的时候跳了"。
测量工具：Chrome 开发者工具 Lighthouse、WebPageTest、以及浏览器自带的「网页 Vital」面板，均可在上线前与上线后持续观测这三项指标。
能少传一个字节，就不多传一个字节。
图片往往占页面体积的 60% 以上，是优化的第一优先级。
照片用 WebP / AVIF，比 JPEG 小 25%—50%；图标用 SVG；色彩简单的图用 PNG。
根据展示尺寸输出，手机端不加载桌面大图；提供 srcset 响应式图片。
肉眼无差别的前提下压缩质量，高端站建议质量控制在 75—82 之间。
首屏之外的内容，等用户快看到时再加载。
让回访用户"秒开"，靠的是合理的缓存。
让服务器离访客更近。
不让用户为他不会看到的页面买单。
用浏览器的"空闲时间"提前做准备。
提前加载首屏关键资源（如主图、关键字体），缩短 LCP。
提前与 CDN、字体、统计域名建立连接，省去握手等待。
预取用户下一步可能访问的页面资源，实现"秒切页"。
对次要第三方域名提前解析 DNS，减少阻塞。
性能不是一次调优，而是长期守护。
用 Lighthouse 跑通三项指标，达到"良好"标准再发布。
接入真实用户监测（RUM），看真实设备与网络下的体验。
每次内容更新、素材替换后复测，防止性能随运营退化。
慢多半在网络与第三方脚本。建议先看 Lighthouse 报告定位瓶颈，重点排查未异步的统计、客服、广告脚本。
合理的 transform/opacity 动画走 GPU 合成，影响很小；避免频繁触发 layout 的动画。我们会优先使用高性能属性。
不冲突。我们通过懒加载、按需渲染、现代图片格式，让大图和动效同样可以丝滑呈现——这正是高端站该有的样子。
