EP04. “LiteSpeed Cache：页面优化（Page Optimization）设置详解”
🔒 登录后可标记已读这篇笔记讲 LiteSpeed Cache 插件里内容最丰富的 Page Optimization（页面优化） 分类，底下有 CSS 设置、JS 设置、HTML 设置、媒体设置、VPI（视口图像）、媒体排除、本地化、调整-JS、调整-CSS 共 9 个子选项，是这个插件里对网站速度影响最直接的一批设置。前置知识看《插件简介与 Dashboard/Presets/常规设置》。
重点内容
7.1 CSS 设置
| 选项 | 建议 | 说明 |
|---|---|---|
| CSS 最小化 | 开启 | 删除 CSS 代码里不必要的空白，提升 LCP/FCP/TBT/Speed Index 分数 |
| CSS 合并 | 视情况而定 | 可能会破坏网站排版，改动前先测试 |
| 生成 UCSS（唯一 CSS） | 视情况而定，需要 Domain Key | QUIC.cloud 提供的服务，能删除每个页面上没用到的 CSS，大幅提升核心网站指标，有 QUIC.cloud 的话强烈建议开 |
| UCSS Inline | 视情况而定 | 如果开了「生成 UCSS」，这个也要打开 |
| 合并外部和内部 CSS | 关闭 | 合并单个 CSS 文件（内部+外部）容易破坏网站设计 |
| 异步加载 CSS | 视情况而定，需要 Domain Key | 会生成关键 CSS 并异步加载其余部分，能提升核心网站指标，但可能造成布局偏移，启用前先测试 |
| 每个 URL 的 CCSS | 关闭 | 保持默认 |
| 内联 CSS 异步 Lib | 开启 | 关闭会导致 CSS 阻塞渲染 |
| 字体显示优化 | 选 Swap | 能提升 PageSpeed Insights 分数 |
[截图：Page Optimization 分类下 CSS Settings 子页面的选项列表]
7.2 JS 设置
- JS Minify（最小化）：开启——删除 JS 文件里不需要的内容，能提升 LCP/INP/FCP/FID/TBT/Speed Index 分数
- JS Combine（合并）：关闭——可能破坏网站功能，不建议开
- JS 结合外部和内部：关闭——合并 Google Analytics、Meta Pixel 这类外部脚本没有意义
- 延迟加载 JS：建议设成「延迟」，需要自己测试哪种设置最适合自己的网站。把 JS 推迟到用户有动作（移动鼠标、点击）时才加载，能显著缩短初始加载时间，提升 LCP/INP/FCP/FID/TBT/Speed Index 分数
7.3 HTML 设置
| 选项 | 建议 | 说明 |
|---|---|---|
| HTML Minify | 开启 | 删除 HTML 代码里不必要的字符和空格 |
| DNS 预取 | 视情况而定 | 在浏览器请求资源前先解析域名，加进外部域名（用 GTmetrix 找出哪些是外部域），并把 CDN URL 从这里删掉 |
| DNS 预取控制 | 开启 | 自动为所有 URL 启用 DNS 预取 |
| DNS 预连接 | 开启 | 加入 Google AdSense、Google Analytics 这类第三方域名，能提升 LCP/FCP/TTFB/Speed Index 分数 |
| HTML 懒加载选择器 | 视情况而定 | 可以懒加载 #comments、#footer 这类 HTML 结构，评论多的网站特别适合 |
| 删除查询字符串 | 关闭 | 不需要开 |
| 异步加载 Google 字体 | 关闭 | 关闭通常对用户体验更好 |
| 移除 Google 字体 | 关闭（如果有用 Google 字体） | 建议改成本地托管字体以提升性能 |
| 移除 WordPress Emoji | 开启 | 不用表情符号功能的话关掉能提速 |
| 移除 NoScript 标记 | 关闭 | 保留以兼容旧版浏览器 |
7.4 媒体设置
- 懒加载图片：开启——能提升 LCP/FCP/TBT/Speed Index 分数
- 基本图像占位符：关闭——会在首屏造成累积布局偏移，改用下面的响应式占位符
- 响应式占位符：开启——显示跟原图同尺寸的占位符，改善 CLS 和访客体验
[截图：媒体设置页面开启响应式占位符后，图片加载前显示的占位效果]
- 响应式占位符 SVG / 颜色：可以自定义，默认值也能接受
- LQIP 云生成器：开启——加载真实图片前先显示低质量图像占位符，需要正确的 Domain Key 才能生成
- LQIP 质量：4（默认可接受）
- LQIP 最小尺寸：150×150（默认可接受）
- Generate LQIP In Background：开启——在后台生成，不拖慢前台速度
- 懒加载 iFrames：开启——嵌入 YouTube 等平台视频时特别适合
- 添加缺失尺寸：开启——补上缺失的图片尺寸信息，能改善 CLS 并提升 LCP/FCP/TBT/Speed Index
7.5 VPI（视口图像，Viewport Images）
只有两个选项：
- Viewport Images：开启——首屏（折叠上方）的图片会被排除在懒加载之外，直接加载，避免因懒加载造成的 CLS 问题
- 视口图像 Cron：开启——让图片在后台自动生成，不影响前台速度
7.6 媒体排除
如果有某些图片/iframe 不想被懒加载（比如 Logo、背景图、精选图片、侧边栏图片），可以在这里排除：
- 懒加载图像排除（按文件路径）
- 懒加载图片类名称排除（按 CSS class）
- 懒加载图像父类名排除
- 懒加载 Iframe 类名排除 / 父类名排除
- 懒加载 URI 排除项（按完整 URL）
- LQIP 排除项
7.7 本地化
- Gravatar 缓存：开启——评论多的网站尤其该开，能减少服务器资源消耗
- Gravatar Cache Cron：开启（配合上面）
- Gravatar 缓存 TTL：默认即可
- 本地化资源：开启——把外部 JS 文件（Google AdSense、Gravatar、Google Analytics 等）本地化托管，减少对外部请求的依赖；💡 也可以考虑改成「用户交互时才延迟加载」这些外部文件
- 本地化文件：填入需要本地化的外部 JS 文件路径，常见的有 Cloudflare/Google/CDN 相关脚本、Google Analytics、GTM、reCAPTCHA、Facebook Pixel 等
7.8 调整（Tuning）– JS
用来把特定 JS 文件排除在优化之外（可用完整 URL 或部分字符串匹配）：
- JS 延迟包含 / JS 排除 / JS 推迟延迟排除 / 访客模式 JS 排除项 / 排除的 URI
- 仅为访客优化：开启——可以选择只针对访客做优化，不影响登录用户
- 角色排除：把特定用户角色（比如管理员）排除在所有优化之外，方便后台操作时不受影响
7.9 调整（Tuning）– CSS
- CSS 排除、UCSS 文件排除和内联、UCSS 选择器允许列表（支持通配符
*）、UCSS URI 排除 - 单独的 CCSS 缓存发布类型 / URI：可以针对特定文章类型或含特定字符串的 URL 生成单独的关键 CSS（支持前缀
^后缀$精确匹配） - 关键 CSS 规则：如果开了异步加载 CSS，应该为首屏内容额外添加关键 CSS 样式，改善用户体验
常见误区
- ❌ 直接打开 CSS/JS 合并选项——这两个选项都容易破坏网站排版或功能，改动前一定要先在测试环境验证
- ❌ 图片懒加载全站通用，没有排除 Logo 等首屏元素——Logo、首屏背景图这类内容应该在「媒体排除」里手动排除，不然可能反而拖慢首屏加载体验
- ❌ 开了异步加载 CSS 却没做好布局偏移测试——这个功能虽然能提升核心网站指标分数，但也可能引发访客看到的布局跳动，上线前务必实际测试
- ❌ 优化设置改完直接对全站生效，没考虑管理员自己的操作体验——可以用「角色排除」把管理员排除在优化之外，避免后台编辑时被这些优化规则干扰
Sources
YouTube：
- LiteSpeed Cache Settings Tutorial 2023 | Step-by-step Setup — https://youtu.be/HLHDKzdiUDs
Blog / Website：
- 最佳LiteSpeed Cache插件设置图文教程 — https://www.wbolt.com/best-litespeed-cache-settings.html
官方文档：
- Page Optimization | Screen-by-Screen | LSCache for WordPress — https://docs.litespeedtech.com/lscache/lscwp/pageopt/