一、 CSS & JavaScript (代码与脚本优化)
目标：减少浏览器下载负担，提升响应速度。
| 功能名称 | 白话解释 | 技术原理 | 专家建议 |
| Minify CSS & JS | 把代码里的“废话”删掉。 | 删除源码中的空格、换行和注释，减小文件体积。 | 保持开启。最基础、最安全的优化。 |
| Remove Unused CSS | 进门只搬今天要用的家具。 | 提取关键路径 CSS。只加载首屏需要的样式，剩下的延后。 | 建议开启。解决 Google 报错“减少未使用的 CSS”。 |
| Delay All JavaScript | 访客不点、不划，服务不启动。 | 降低 TBT (总阻塞时间)。等用户产生交互动作后再执行 JS 脚本。 | 提分核心。若菜单点不动，需在排除项中加入对应脚本。 |
| Self-host External | 自家仓库有货，不去邻居家借。 | 减少 DNS 查询。把外部服务器的资源下载到本地服务器。 | 推荐开启。减少浏览器跑路时间。 |
二、 Images & Video (多媒体优化)
目标：让图片不再成为拖慢网站的“大块头”。
| 功能名称 | 白话解释 | 技术原理 | 专家建议 |
| Lazy Load | 屏幕外的图先不画，翻到再画。 | 延迟加载视口外资源。只请求当前看到的画面，节省流量。 | 必开。但要在排除项中去掉顶部的 Logo 图。 |
| Properly Size Images | 看人下菜碟，手机给小图。 | 生成 响应式图片。避免手机用户下载 4K 高清原图。 | 保持开启。显著降低移动端的 LCP 指标。 |
| Image Format (WebP) | 厚羽绒服压缩成轻便冲锋衣。 | 将 JPG/PNG 转换成 WebP。画质几乎不变，体积减小 30%+。 | 必选 WebP。这是目前兼容性最好的高性能格式。 |
| Auto-optimize | 只要传图，自动瘦身。 | 挂载上传钩子。在保存图片瞬时完成格式转换和压缩。 | 强烈建议开启。省去后续手动处理的麻烦。 |
三、 Caching (缓存优化)
目标：减少服务器重复劳动，直接给访客“现成的”。
| 功能名称 | 白话解释 | 技术原理 | 专家建议 |
| Preload on Hover | 预判客人的预判。 | 鼠标碰到链接还没点时，后台提前下载该页面的 HTML。 | 建议开启。会让用户感觉点击链接后“秒开”。 |
| Separate Mobile Cache | 手机和电脑“分灶吃饭”。 | 为移动端和 PC 端生成不同的缓存文件，防止排版错乱。 | 强烈建议开启。确保不同设备显示正常。 |
| Auto-refresh Cache | 隔段时间，把旧菜倒了换新的。 | 定时缓存失效。自动清除旧缓存并触发预取生成新内容。 | 设为 12 或 24 小时。2 小时太快，会增加服务器负担。 |
四、 Fonts & Elements (字体与渲染)
目标：消除文字闪烁，让滚动更丝滑。
| 功能名称 | 白话解释 | 技术原理 | 专家建议 |
| Preload Fonts | 还没开饭，先把筷子摆好。 | 在 HTML 加入 rel="preload"。强制浏览器第一时间下载字体。 | 建议开启。防止文字从丑变美的“闪烁”现象。 |
| Use System Fonts | 高级碗没刷出来，先给个一次性碗。 | 先用系统默认字体显字，背景下载好高级字体后再替换。 | 开启。解决网页加载瞬间“白屏无字”的尴尬。 |
| Lazy Render Elements | 还没上二楼，先把二楼灯关了。 | 降低 DOM 节点复杂度。告诉浏览器页脚等元素先不用算坐标。 | 性能加分项。长页面滚动会更流畅。 |