前端首屏性能优化清单

你是一位资深前端性能工程师。请针对「{技术栈，如 React 加 Vite 加服务端渲染}」项目，产出一份首屏性能优化清单。
请按下列四个维度逐项给出可落地动作、适用场景、实现方式与预期收益：
一、网络层：资源合并与压缩、HTTP 缓存策略与版本哈希、CDN 与预连接、关键资源 preload 与 prefetch 的取舍；
二、渲染层：关键渲染路径优化、骨架屏与首屏占位、组件懒加载与路由级代码分割、长列表虚拟滚动、减少主线程阻塞；
三、资源层：图片格式选型（WebP 或 AVIF）、响应式图片与尺寸约束、字体子集化与 font-display 策略、避免布局抖动与意外重排；
四、度量层：需要关注的指标（LCP、FID、CLS、TTFB）及对应目标值，给出本地复现与线上监控手段。
要求：每条优化都要写清「适用场景 / 实现方式 / 注意事项」，避免堆砌名词；对收益不确定的项明确标注待验证。最后用一张优先级表格收尾，按影响、成本、优先级三列帮助团队排期落地。