网站性能优化 是做什么的？
加载 brand-guide（这样速度修复永远不会改变品牌外观）并遵循 website-change-safety。
方法
- 使用 PageSpeed Insights 移动端建立基线，每个页面运行 2-3 次，并结合现场数据。记录 LCP 元素。
- 在报告中查找原因：长任务、启动时间/第三方总结、渲染阻塞请求、LCP 分解（加载延迟 vs 渲染延迟）、DOM 大小、强制回流。
- 一次修复一个原因，再次测量，只保留有效的内容。
- 如果可以，在发布前进行本地 A/B 测试：通过请求拦截将新的 JS/HTML/CSS 应用到实时页面上，并以相同方式提供两个版本（未压缩的本地文件与 gzipped 实时文件会扭曲模拟时间结果）。比较主线程时间、DOM 大小、样式/布局时间。
真正能提高分数的修复方案（优先检查这些）
第三方和平台臃肿（通常是最大的问题）
- 已卸载但仍在加载的应用。 删除残留的页面构建器组件和脚本条目。某些平台即使应用被删除后仍会注入集成代码（例如包含 50+ 文件的可视化编辑器运行时）；寻找频道/商店级别的“禁用”开关，否则联系平台支持。
- 按需加载，而非每页加载： 视频播放器（显示海报图片 + 播放按钮，点击时创建 iframe）、验证码（表单打开时加载）、聊天组件、忠诚度/奖励组件（仅在有需要的页面加载）、折叠下方的评论组件。
- 通过页面构建器添加的内嵌视频块 无法被主题延迟加载；将这些视频移动到主题自带的视频区域，使用点击加载的 facade 模式。
- 重复项： 两个分析库、同一个标签出现两次、新旧像素代码。
- 未经所有者同意，不要将广告/分析标签延迟到交互时加载；这会影响他们的数据采集。
JavaScript 在加载时执行过多操作
- 轮播图/滑块： 桌面优先的滑块设置通常会构建桌面布局，然后再为手机重建；切换到移动优先的设置。"无限/循环"模式会使每个幻灯片克隆 2-3 次（产生数百个额外元素）；在不需要的地方关闭循环。仅在第一屏以下开始的滑块，在其接近视口时才初始化（使用 IntersectionObserver），并通过 CSS 显示具有相同高度的未初始化行，以避免页面跳动。
- 页面构建器和插件（特别是 WordPress/Wix/Squarespace）：每个插件可能会向每个页面添加自己的 CSS/JS；禁用未使用的插件，并仅在有需要的页面加载其余插件。
- 隐藏的重复标记： 例如，列表页面渲染了一个网格和一个隐藏的列表视图，其中包含每个产品。只渲染一个。
- 删除残留的调试日志和仍然运行的无效代码路径。
最大内容绘制 (LCP)
- 识别真正的 LCP 元素。如果是 CSS 背景图片，浏览器发现它较晚；仅在该页面上添加
<link rel="preload" as="image" fetchpriority="high">，URL 必须与 CSS 解析的 URL 字节完全相同（否则会下载两次）。 - 只有第一行可见的图片获得
fetchpriority="high"（例如，2 列手机网格上的前 2 张图片）；更多高优先级图片会与真正的 LCP 图片争夺带宽。 - 绝对不要延迟加载 LCP 图片。延迟加载折叠下方的一切。
- 检查平台已提供的格式（许多 CDN 会自动转换为 WebP/AVIF）；重新保存图片可能毫无收获。大的收益来自过大的源图片和错误的
sizes属性。
首次绘制 / 渲染阻塞
- 主题的主样式表通常是瓶颈。可以将页面特定的 CSS 拆分出来或内联关键 CSS，但这是一个更大、风险更高的项目；可以提出建议，但不要偷偷植入。
<head>中每一个额外的渲染阻塞样式表或同步脚本（通常由应用注入）都会增加延迟。- 字体：有意选择
font-display设置（图标字体需要block；文本字体可以swap，前提是后备字体的度量标准足够接近以避免布局偏移）。
布局偏移
- 为图片保留空间（宽度/高度），为嵌入元素保留空间（aspect-ratio 容器），为后期出现的横幅和组件保留空间。
- 由 JS 初始化的任何内容都必须具有相同尺寸的预初始化 CSS。
报告格式
每页的优化前后指标（以范围形式呈现）、现场数据状态、具体变更以及需要所有者决策的剩余内容（第三方权衡）。提醒他们实验室评分会发生变化；趋势和现场数据比单次运行更重要。