WoodMart 网站速度优化：图片、缓存、CDN

一、WoodMart 主题性能设置

在安装任何缓存插件或 CDN 之前，先把 WoodMart 主题自带的性能选项调到最优。主题层面的优化是地基——地基没打好，上面叠加再多的缓存插件也白搭。

所有选项位于 主题设置（Theme Settings）→ Performance，分为 CSS、JS、Fonts & Icons、Lazy Loading、Plugins、Preloader、Other 几个区域。

🎨 1.1 CSS 优化

进入 Performance → CSS：

1. 禁用 Gutenberg 默认区块样式（Disable default Gutenberg block styles）：开启。它只移除 WordPress 自带区块的样式，不影响 WoodMart 自己的 Gutenberg 区块，也不影响 Elementor / WPBakery——无论你用哪个编辑器都建议开启。
2. 内联样式体积上限（Inline styles size limit）：建议设为 40–80 KB。体积小于该值的 CSS 文件会直接以 <style> 标签内联进 HTML，减少 HTTP 请求数量。

💡 WoodMart 8.5 起，主题已自动把非关键 CSS 延迟到页面主体渲染完成后加载，并把核心 CSS 体积压缩了约 30%——这些是主题内置行为，无需手动开关，保持主题更新即可获得。

📜 1.2 JS 优化

进入 Performance → JS：

1. 移除 jQuery Migrate（Remove jQuery Migrate）：建议开启。jQuery Migrate 是给老旧插件准备的兼容脚本，现代插件（包括 WoodMart 和 WooCommerce）不需要它。移除后少一个请求、少一个阻塞渲染的脚本，对 FCP 和 LCP 都有帮助。
2. 开启后测试前台功能，如果某个老插件出现异常，把它改回来即可。

🔤 1.3 字体与图标优化

进入 Performance → Fonts & Icons：

1. 本地化 Google 字体（Load Google Fonts locally）：开启。主题会把你在 Typography 中选择的 Google 字体下载到自己的服务器加载（存于 wp-content/uploads/woodmart/google-fonts/），省去对 Google 服务器的 DNS 查询和外部请求，是对 Core Web Vitals 收益最高的开关之一。下载失败的字体会自动回退到 Google CDN，不会破版。
2. font-display for text fonts（文本字体）：设为 Swap。浏览器先用系统字体渲染文字，网络字体下载完成后再替换，避免文字长时间不可见。
3. font-display for icon fonts（图标字体）：选 Swap 可以避免图标字体阻塞渲染，代价是首屏图标会短暂闪烁；如果接受不了闪烁，选 Fallback 并配合 Preload key request 预加载 woodmart-font 字体文件。

🦥 1.4 懒加载

进入 Performance → Lazy Loading：

1. 图片懒加载（Lazy loading for images）：开启。页面加载时只加载首屏可见的图片，下方图片滚动到附近时才加载。
2. 背景图懒加载（Lazy loading for background images）：开启。Gutenberg 区块等元素中的背景图按需加载。
3. Offset（提前量）：建议 100–200 像素。图片在进入视口前提前开始加载，避免用户看到占位图。
4. Appearance effect（出现效果）：可选 Fade（淡入），加载完成的视觉过渡更平滑。
5. 自定义占位图：可上传一张小体积占位图（建议 10KB 以内），保持加载过程中的视觉一致。

💡 懒加载只开一处。如果你后续安装 WP Rocket 或其他缓存插件，不要在插件中重复开启懒加载——官方明确警告多套懒加载系统同时运行会互相冲突。另外面板里还有「Disable native WordPress lazy loading」选项，开启主题懒加载后建议把 WP 原生懒加载关掉，统一管理。

🧰 1.5 其他性能选项

进入 Performance → Other 及相关区域：

1. 移动端 DOM 优化（Mobile DOM optimization）：开启。为移动端生成精简版 DOM，移除移动设备不需要的桌面元素。
2. 关闭不用的功能：站点没有用到的心愿单、对比等功能，在其对应设置区关闭，避免加载多余的 CSS 和 JS。

💡 每次修改主题性能选项后，清除缓存插件缓存并刷新页面测试，确认功能正常。一次只改一个选项，出问题时能快速定位。

---

二、图片优化

图片是网页中最重的资源，通常占页面总体积的 50%–80%。优化图片是提升速度性价比最高的手段。

🗜️ 2.1 Cimo Image Optimizer

Cimo 是一款浏览器端图片压缩插件：你往媒体库上传图片时，它在你的浏览器里即时完成压缩并转为 WebP，服务器收到的直接就是优化后的文件，全程不占服务器 CPU、不走第三方服务、免费且无配额限制。

1. 在 WordPress 后台进入 插件 → 安装新插件，搜索 Cimo，安装并启用。
2. 进入 设置 → Cimo，确认 WebP 转换已开启（默认开启，质量默认 80%，可按需调整）。
3. 之后所有新上传的图片会自动压缩并转换为 WebP 格式。

⚠️ 两个容易误解的点：
– 历史图片批量优化是 Cimo Premium（付费版）的功能，免费版只处理上传过程中的新图片。已有图片较多时，可以配合其他批量工具处理历史图，或评估是否升级 Premium（付费版还含视频/音频优化和低质量占位图 LQIP）。
– Cimo 目前不支持 Safari 浏览器——用 Safari 上传时图片会原样上传不压缩。日常上传请用 Chrome、Firefox 或 Edge。

📐 2.2 图片尺寸设置

WooCommerce 和 WordPress 各有一处图片尺寸设置，需要配合调整，确保上传的图片生成合适的缩略图尺寸，既清晰又不浪费带宽。

设置位置	设置项	默认值	建议值	用途
设置 → 媒体	缩略图尺寸	150×150	300×300	产品网格缩略图
设置 → 媒体	中等尺寸	300×300	600×600	文章内嵌图片
设置 → 媒体	大尺寸	1024×1024	1200×1200	大图展示
外观 → 自定义	Main image width	600	800–1000	产品详情页主图
外观 → 自定义	Thumbnail width	300	300	产品网格缩略图
外观 → 自定义	Thumbnail cropping	1:1	1:1	裁剪比例

关键点：WordPress 缩略图尺寸从默认的 150×150 改为 300×300，与 WooCommerce 的 Thumbnail width（300px）对齐。这样同一张产品图上传后，300×300 的缩略图副本两边都能复用，不必生成两份不同尺寸的文件，节约硬盘空间。

WooCommerce 的裁剪比例有三个选项：1:1（正方形） 所有网格图片裁剪为正方形，排列整齐，电商站点最常用；Custom（自定义比例） 可输入自定义宽高比，如 3:4 适合服装类竖图；Uncropped（不裁剪） 保持原始比例，但网格中图片高度可能不一致。

⚠️ 修改尺寸后，之前已上传的图片不会自动重新生成新尺寸。需要安装 Regenerate Thumbnails 插件批量重新生成，或进入 WooCommerce → 状态 → 工具 → Regenerate shop thumbnails 处理产品图片。

---

三、缓存插件配置

🧱 3.1 缓存的作用

缓存插件将动态生成的 WordPress 页面保存为静态 HTML 文件，用户访问时直接返回静态文件，跳过数据库查询和 PHP 执行，速度可提升 5–10 倍。

对于 WordPress + WoodMart + WooCommerce 这套架构，缓存插件的配置需要特别注意：WooCommerce 有大量动态页面不能缓存（购物车、结账、我的账户），WoodMart 的 AJAX 功能（加购、筛选器、快速查看）也需要正确排除，否则功能会异常。

🆚 3.2 推荐缓存插件

插件	说明	价格	适用服务器
WP Rocket	功能最全、WoodMart 官方性能指南推荐的付费缓存插件	付费（约 $59/年起，以官网实时价格为准）	所有服务器
LiteSpeed Cache	性能极佳，但需要 LiteSpeed 服务器	免费	仅 LiteSpeed 服务器

💡 两个插件选一个就行，不要同时安装。如果你的服务器是 LiteSpeed（如大部分香港/美国主机商提供的方案），优先选 LiteSpeed Cache——免费且性能出色。其他服务器选 WP Rocket，WoodMart 主题还内置了专门针对 WP Rocket 的优化开关（见 4.10.3）。

🚀 3.3 WP Rocket 配置（针对 WoodMart + WooCommerce）

⚙️ 3.3.1 基础缓存设置

1. 安装并启用 WP Rocket。
2. 进入 设置 → WP Rocket → Cache：
3. ✅ 开启页面缓存（Page Caching）——WP Rocket 检测到 WooCommerce 后会自动排除 Cart、Checkout、My Account 页面，无需手动配置。
4. ✅ 开启移动端单独缓存（Separate cache for mobile devices）——配合 WoodMart 的移动端 DOM 优化功能，为手机和电脑分别生成缓存。
5. 进入 设置 → WP Rocket → Advanced Rules：
6. Never Cache URL(s)：手动添加 /wishlist/（WoodMart 愿望清单页面，WP Rocket 不会自动排除）。
7. Never Cache Cookies：添加 woocommerce_cart_hash、woocommerce_items_in_cart、wp_woocommerce_session_——当用户购物车有商品时，绕过缓存确保购物车内容实时更新。

💡 Cart、Checkout、My Account 页面 WP Rocket 会自动排除，不需要手动添加。WooCommerce 官方文档确认了这一点。

⚙️ 3.3.2 文件优化设置

进入 设置 → WP Rocket → File Optimization：

1. ✅ 优化 CSS（Minify CSS）——压缩 CSS 文件，移除空格和注释。
2. ✅ 合并 CSS 文件（Combine CSS files）——将多个 CSS 合并为一个，减少 HTTP 请求。
3. ✅ 优化 JS（Minify JavaScript）——压缩 JS 文件。
4. ✅ 延迟加载 JS（Load JS deferred）——JS 在页面内容加载完成后再执行，不阻塞首屏渲染。
5. ⚠️ 合并 JS 文件（Combine JavaScript files）：建议先不开启。WoodMart 和 WooCommerce 依赖大量 JS 文件，合并后容易导致 AJAX 加购、产品筛选器等功能异常。测试后再决定。
6. ⚠️ 延迟执行 JS（Delay JavaScript execution）：谨慎开启。开启后所有 JS 在用户交互（移动鼠标、滚动）后才执行，能显著提升 PageSpeed 分数，但可能影响用户体验。

⚠️ 如果你开启延迟执行 JS，必须同时进入 主题设置 → Performance → Plugins → WP Rocket delay JS exclusions 开启此项。WoodMart 会自动将主题核心 JS 文件添加到 WP Rocket 的排除列表中，确保加购按钮、AJAX 筛选器、快速查看等功能在延迟加载模式下仍然正常工作。

⚙️ 3.3.3 媒体与预加载设置

1. 进入 设置 → WP Rocket → Media：
2. ⚠️ 懒加载（LazyLoad）：如果你已在 WoodMart 主题设置中开启了懒加载，不要在这里重复开启。
3. 进入 设置 → WP Rocket → Preload：
4. ✅ 开启预加载（Preload）：自动生成缓存，用户首次访问也不慢。
5. ✅ 开启站点地图预加载（Sitemap preload）。

⚙️ 3.3.4 WooCommerce 专属注意事项

WP Rocket 检测到 WooCommerce 后会自动：

• 排除 Cart、Checkout、My Account 页面的缓存。
• 优化 get_refreshed_fragments 请求（迷你购物车 AJAX 刷新）。
• 在产品库存变化时自动清除对应产品的缓存，保持库存数字准确。

⚠️ 如果你发现购物车小部件显示错误的商品数量，尝试在 WP Rocket → File Optimization → Exclude JavaScript files 中排除 WooCommerce 的 add-to-cart.js 和 cart-fragments.js。

🐆 3.4 LiteSpeed Cache 配置（针对 WoodMart + WooCommerce）

⚙️ 3.4.1 基础缓存设置

1. 安装并启用 LiteSpeed Cache。
2. 进入 LiteSpeed Cache → Cache：
3. ✅ 开启缓存（Enable Cache）。
4. ✅ 开启移动端缓存（Mobile Cache）——配合 WoodMart 移动端 DOM 优化。

⚙️ 3.4.2 WooCommerce 排除设置

LiteSpeed Cache 检测到 WooCommerce 后也会自动排除 Cart、Checkout、My Account 页面。但需要手动添加以下排除项：

1. 进入 LiteSpeed Cache → Cache → Do Not Cache URIs，添加：
2. /wishlist/（WoodMart 愿望清单页面）
3. /compare/（WoodMart 产品对比页面，如启用）
4. 进入 LiteSpeed Cache → Cache → Do Not Cache Cookies，添加：
5. woocommerce_cart_hash
6. woocommerce_items_in_cart
7. wp_woocommerce_session_

⚙️ 3.4.3 已知兼容性问题

WoodMart 与 LiteSpeed Cache 存在一个已知问题：AJAX 加购按钮在缓存开启后可能失效（点击无反应）。解决方案：

1. 进入 LiteSpeed Cache → Cache → Do Not Cache URIs，添加 /admin-ajax.php。
2. 或在 LiteSpeed Cache → Page Optimization → JS Settings → JS Excludes 中排除以下文件：
3. /wp-content/themes/woodmart/js/scripts/wc/addToCartAllTypes.min.js
4. /wp-content/themes/woodmart/js/scripts/combine.min.js
5. wc-add-to-cart

⚠️ WoodMart 主题设置 → Performance → Plugins 中的「WP Rocket delay JS exclusions」开关对 LiteSpeed Cache 不生效。LiteSpeed 用户需要手动参照 WoodMart 官方论坛提供的排除文件列表配置。

⚙️ 3.4.4 图片优化

LiteSpeed Cache 自带图片优化功能（通过 QUIC.cloud 服务），可以替代第三方压缩插件。但如果你已安装 Cimo Image Optimizer，不要同时开启 LiteSpeed 的图片优化，两者会产生冲突。选择一个使用即可。

---

四、CDN 接入——Cloudflare 配置详解

🌍 4.1 CDN 的作用

CDN（Content Delivery Network，内容分发网络）将你的静态资源（图片、CSS、JS）缓存到全球各地的服务器节点上。用户访问时从最近的节点获取资源，减少延迟。

🤔 4.2 为什么选 Cloudflare

Cloudflare 是全球最大的免费 CDN 服务商。对 WordPress + WoodMart + WooCommerce 这套架构来说是最优选择：

优势	说明
免费	免费计划已包含 CDN、DDoS 防护、SSL 证书，足够中小站点使用
一体化	CDN + DNS + 安全防护 + SSL，一个平台全部搞定
配置简单	不需要改代码，只需要更换域名的 NS 记录
兼容性	与 WP Rocket 有官方联动，缓存规则可精准保护 WooCommerce 动态页面

➕ 4.3 第一步：添加域名到 Cloudflare

1. 访问 https://dash.cloudflare.com/，注册账号并登录。
2. 点击「Add a Site」，输入你的域名（如 example.com，不带 www）。
3. 选择 Free 计划（免费版功能够用，后续可随时升级）。
4. Cloudflare 会自动扫描你当前的 DNS 记录。

🔍 4.4 第二步：检查 DNS 记录

扫描完成后，Cloudflare 会显示所有检测到的 DNS 记录。这一步非常重要，漏掉记录会导致对应功能失效：

1. 确认 A 记录：你的主域名和 www 子域名指向你的服务器 IP。
2. 确认 MX 记录：邮件相关记录，如果有的话必须保留。
3. 确认 CNAME 记录：如 mail、ftp 等子域名记录。
4. 确认 TXT 记录：如 SPF、DKIM 等邮件验证记录。

橙色云 vs 灰色云：

图标	模式	说明	使用场景
🟠 橙色云	Proxied（代理）	流量经过 Cloudflare，享受 CDN、缓存、安全防护	网站域名（@、www）
⚪ 灰色云	DNS Only（仅 DNS）	Cloudflare 只做 DNS 解析，流量直接到你的服务器	邮件（mail）、FTP、SSH 等非 HTTP 服务

⚠️ 邮件相关记录必须设为灰色云（DNS Only）。如果 mail 记录设为橙色云，邮件收发会中断——Cloudflare 只代理 HTTP/HTTPS 流量，不代理 SMTP 流量。这是最常见的 Cloudflare 接入失误。

🔁 4.5 第三步：更换域名 NS 记录

1. Cloudflare 会给你两个 NS 地址（如 ada.ns.cloudflare.com 和 bob.ns.cloudflare.com）。
2. 登录你的域名注册商（如 Namecheap、GoDaddy、阿里云等）。
3. 找到域名的 DNS / Name Server 设置。
4. 将原有 NS 替换为 Cloudflare 提供的两个 NS。
5. 保存。DNS 生效时间通常 1–24 小时，大部分情况 1–2 小时内完成。

⚠️ 更换 NS 前务必确认上一步的 DNS 记录已全部正确导入。NS 一旦生效，所有 DNS 查询都会走 Cloudflare，漏掉的记录会导致对应服务中断。

🔒 4.6 第四步：配置 SSL

NS 生效后，进入 SSL/TLS → Overview，选择 Full (Strict) 模式。Cloudflare 提供四种 SSL 模式：Off（不用加密，绝对不用）、Flexible（只加密浏览器到 Cloudflare 这段，Cloudflare 到你的服务器仍走 HTTP，会导致 WordPress 无限重定向，绝对不要用）、Full（端到端加密但不验证证书，可用但不理想）、Full (Strict)（端到端加密且验证证书，推荐使用）。配错 SSL 模式会导致网站无限重定向打不开，这一步是最关键的。

💡 使用 Full (Strict) 需要你的服务器有有效的 SSL 证书。如果你用宝塔面板，可以申请 Let’s Encrypt 免费证书；或者直接在 Cloudflare 的 SSL/TLS → Origin Server 中生成 Cloudflare 源服务器证书，安装到你的服务器上。

↪️ 4.7 第五步：开启 Always Use HTTPS

1. 进入 SSL/TLS → Edge Certificates。
2. 开启 Always Use HTTPS。
3. 开启后，所有 HTTP 请求会自动 301 重定向到 HTTPS。

🗄️ 4.8 第六步：配置缓存（重要）

这是 Cloudflare 配置中最关键的一步。配好了，海外访客从最近的边缘节点获取页面，速度极快；配错了，用户看到别人的购物车、结账金额错乱、后台登录异常。

核心策略是 “缓存一切，精准排除”：默认缓存所有页面（包括 HTML），同时确保动态页面的请求不会被缓存规则命中。这样匿名访客（你的绝大多数海外消费者）访问产品页、分类页、首页时全部从 CDN 边缘节点直接返回，不经过你的服务器，速度可以从几百毫秒降到几十毫秒。

⚙️ 4.8.1 关闭会冲突的功能

1. 打开 Cloudflare → 进入 Speed → Optimization。
2. Rocket Loader：确认关闭。它会改写 JavaScript 加载方式，和 WoodMart、WooCommerce、Elementor 存在兼容性问题，开启后可能导致页面白屏、加购按钮失效、AJAX 筛选器不工作、结账页报错。
3. Mirage / Polish：这两个是 Pro 付费计划的功能，免费计划没有。如果你用的是付费计划，建议关闭——Mirage 与 WoodMart 的响应式图片和懒加载冲突，Polish 与已安装的图片压缩插件功能重叠。

⚠️ 如果之前误开过以上任何一项，关闭后需要清除一次 Cloudflare 缓存（Caching → Caching → Purge Everything）。

⚙️ 4.8.2 压缩与 Minify 的分工

这里有一个重要的时效信息：Cloudflare 已于 2024 年 8 月 5 日彻底移除了 Auto Minify 功能（官方数据显示它在全网络只节省不到 0.1% 的页面体积，收益极低）。所以：

1. 不需要在 Cloudflare 端找 Minify 开关——它已经不存在了。CSS/JS 的压缩与合并全部交给缓存插件层（WP Rocket / LiteSpeed Cache）完成，在那里可以测试、可以排除文件，出问题容易定位。
2. Brotli 压缩现在是默认常开，Cloudflare 会自动为支持的浏览器启用，无需手动配置。

💡 功能不重复是核心原则。WoodMart 主题层负责精简和内联 CSS，缓存插件层负责压缩与合并，Cloudflare 层负责 Brotli 传输压缩和边缘缓存。三层各管一段。

⚙️ 4.8.3 配置缓存级别

1. 打开 Cloudflare → 进入 Caching → Configuration。
2. Caching Level 设为 Standard（标准）——默认值，不用改。
3. Browser Cache Expiration 设为 Respect Origin Headers（遵循源站设置），让浏览器缓存时间由你的服务器/缓存插件控制。

⚙️ 4.8.4 开启 Tiered Cache

Tiered Cache 让 Cloudflare 的边缘节点之间互相缓存，减少回源请求。开启后，当欧洲访客请求一个尚未缓存到欧洲节点的页面时，会从同区域的另一个 Cloudflare 节点获取，而不是千里迢迢回你的源服务器。

1. 打开 Cloudflare → 进入 Caching → Tiered Cache。
2. 开启 Tiered Cache（智能分层拓扑，免费方案可用）。

💡 开启 Tiered Cache 后，你会在 Cloudflare 分析面板中看到缓存命中率明显提升。对于海外访客占比高的跨境独立站，这个功能尤其有价值——亚洲访客和欧美访客访问同一产品页时，各自从最近的区域节点获取缓存，互不等待。

⚙️ 4.8.5 创建缓存规则（缓存什么 + 不缓存什么）

核心配置在这里。打开 Cloudflare → 进入 Caching → Cache Rules（旧版 Page Rules 已废弃，现在统一用 Cache Rules）。

先理解现代 Cache Rules 的匹配逻辑：与旧版 Page Rules”第一条命中即停”不同，Cache Rules 是堆叠执行——所有匹配的规则会按顺序叠加生效，后匹配的规则优先。因此关键原则是：主动缓存规则的匹配表达式本身必须排除所有动态场景，让动态请求根本命中不到它，只被绕过规则接管。

先创建 7 条绕过规则（从上到下排列）：

规则 1：绕过后台和登录页面

• 匹配条件：URI Path 包含 /wp-admin 或 /wp-login.php
• 操作：Bypass Cache
• 原因：缓存后台会导致管理员看到过期内容、设置无法保存。

规则 2：绕过 WooCommerce 动态页面

• 匹配条件：URI Path 包含 /cart 或 /checkout 或 /my-account
• 操作：Bypass Cache
• 原因：购物车显示当前用户的商品，结账页包含订单金额和个人信息，我的账户页包含用户隐私数据。缓存这些页面等于把 A 用户的购物车内容展示给 B 用户。

规则 3：绕过 WoodMart 愿望清单页面

• 匹配条件：URI Path 包含 /wishlist
• 操作：Bypass Cache
• 原因：WoodMart 内置愿望清单功能，每个用户收藏的商品不同，缓存后会显示别人的收藏列表。

规则 4：绕过 REST API

• 匹配条件：URI Path 包含 /wp-json/
• 操作：Bypass Cache
• 原因：WooCommerce REST API 返回用户特定数据和实时库存信息，缓存会返回过时数据或其他用户的隐私信息。

规则 5：绕过已登录用户

• 匹配条件：Cookie 包含 wordpress_logged_in
• 操作：Bypass Cache
• 原因：登录用户看到的内容和访客不同（管理工具栏、个人化设置等）。如果缓存了登录用户的页面，访客会看到管理工具栏。

规则 6：绕过有购物车 Cookie 的请求

• 匹配条件：Cookie 包含 woocommerce_cart_hash 或 woocommerce_items_in_cart
• 操作：Bypass Cache
• 原因：用户把商品加入购物车后，WooCommerce 会写入这两个 Cookie。如果此时页面被缓存，用户刷新后看到空购物车或别人的商品。

规则 7：绕过 AJAX 请求

• 匹配条件：URI Path 包含 /admin-ajax.php 或 URI Query 包含 wc-ajax=
• 操作：Bypass Cache
• 原因：WoodMart 大量功能依赖 AJAX——加购按钮、产品筛选器、快速查看、愿望清单添加、迷你购物车刷新等。这些请求返回的是动态数据，缓存会导致按钮点击无响应或返回错误数据。

规则 8：缓存匿名访客的 HTML 页面

• 匹配条件（全部满足）：Hostname 等于你的域名，且 URI Path 不包含 /wp-admin、/wp-login.php、/cart、/checkout、/my-account、/wishlist、/wp-json/、/admin-ajax.php，且 Cookie 不包含 wordpress_logged_in、woocommerce_cart_hash、woocommerce_items_in_cart
• 操作：Eligible for cache（注意：选择此项后默认即启用 Cache Everything，缓存包括 HTML 在内的全部内容）
• Edge Cache TTL：2 小时（边缘节点缓存时间，超时后自动回源刷新）
• Browser Cache TTL：1 小时（浏览器缓存时间）

⚠️ 规则 8 的排除条件必须写全——因为在堆叠匹配逻辑下，如果某个购物车请求同时命中了规则 2（绕过）和规则 8（缓存），后匹配的规则 8 会胜出，购物车就被缓存了，造成严重数据泄露。把排除条件写进规则 8 的表达式后，动态请求只命中绕过规则、静态页面只命中缓存规则，互不干扰。

⚙️ 4.8.6 配置 Cache Key（忽略跟踪参数）

广告链接和社交媒体分享链接通常带有 UTM 参数（如 ?utm_source=google&utm_medium=cpc）。这些参数不会改变页面内容，但 Cloudflare 会把不同参数的 URL 视为不同页面分别缓存，导致缓存命中率暴跌。

1. 打开 Cloudflare → 进入 Caching → Cache Rules。
2. 在规则 8 的 Cache Key 设置中：
3. Query String：选择 Ignore specific query string parameters。
4. 输入以下参数名（逗号分隔）：utm_source, utm_medium, utm_campaign, utm_term, utm_content, fbclid, gclid, ttclid, twclid, msclkid, yclid, _ga, mc_cid, mc_eid。

💡 配置后，yoursite.com/product-1 和 yoursite.com/product-1?utm_source=google 会共用同一份缓存，不会因为广告参数而多生成一份。这对广告投放的站点尤其重要——不配的话，每个广告链接都会打穿缓存回源，服务器压力倍增。

⚙️ 4.8.7 开启 HSTS

HSTS（HTTP Strict Transport Security）告诉浏览器：以后访问这个域名一律走 HTTPS，不要先发 HTTP 再重定向。少一次重定向往返，首个请求就快几十到几百毫秒。

1. 打开 Cloudflare → 进入 SSL/TLS → Edge Certificates。
2. 找到 HTTP Strict Transport Security (HSTS)。
3. 开启 HSTS，设置：Max Age 为 6 months（6 个月），勾选 Include Sub Domains，Preload 可暂不勾选。

⚠️ 开启 HSTS 前确保所有子域名都已支持 HTTPS，否则不支持 HTTPS 的子域名将被浏览器拒绝访问。首次配置建议先设为 1 month（1 个月）观察一个月，确认无问题后改为 6 months。

⚠️ 同时确认 Always Use HTTPS 已开启（在 4.7 节中操作过）。HSTS 和 Always Use HTTPS 互补：Always Use HTTPS 处理首次 HTTP 请求的重定向，HSTS 让浏览器以后不再发 HTTP 请求。

⚙️ 4.8.8 验证缓存是否正常工作

配置完成后，务必测试一遍：

1. 匿名访客页面缓存：浏览器无痕模式打开产品和分类页 → 右键检查 → Network 面板 → 查看响应头，第一次应为 cf-cache-status: MISS，刷新后应为 cf-cache-status: HIT。
2. 购物车：加入一个商品 → 访问 /cart/ → 刷新 → 购物车商品数量应该保持不变。如果刷新后购物车空了，说明绕过规则没生效。
3. 结账页：访问 /checkout/ → 应该能正常加载，不报错。
4. 后台登录：访问 /wp-admin/ → 能正常登录，不会重定向循环。
5. 登录用户：登录后刷新页面 → 应该看到管理工具栏。如果没有，说明登录用户的 Cookie 绕过规则没生效。
6. 广告链接：用带 UTM 参数的链接访问产品页 → 查看响应头，如果已有不带参数的缓存，应直接返回 cf-cache-status: HIT。

💡 如果测试发现问题，临时开启 Development Mode（见下一步），然后逐条检查 Cache Rules 的匹配条件和规则 8 的排除表达式是否写全。

🛠️ 4.9 第七步：开发模式（Development Mode）

当你正在修改网站内容、调试样式时，Cloudflare 的缓存会让你看不到修改效果。这时可以临时开启开发模式：

1. 进入 Caching → Configuration。
2. 开启 Development Mode。
3. 开启后，Cloudflare 在 3 小时内不缓存任何资源，所有请求直接到你的服务器。
4. 3 小时后自动关闭，或者你手动关闭。

💡 每次更新网站内容后，建议手动清除 Cloudflare 缓存：Caching → Caching → Purge Everything。或者只清除单个 URL：Purge → Custom Purge → 输入 URL。

🥞 4.10 三层缓存协作：WoodMart + 缓存插件 + Cloudflare

你的站点有三层缓存同时工作，每层职责不同。配好了互相补位、加速效果叠加；配错了功能重复、互相冲突、反而变慢。

⚙️ 4.10.1 三层各管什么

层级	负责的内容	不该做的事
WoodMart 主题层	禁用未使用的 CSS/JS、Google 字体本地化、font-display 设置、懒加载、LCP 图片预加载、移动端 DOM 优化	不做页面缓存、不做 CDN 分发
缓存插件层（WP Rocket / LiteSpeed Cache）	页面缓存（生成静态 HTML）、CSS/JS 压缩与合并、数据库缓存、预加载、懒加载（如主题未开启）	不做边缘缓存、不做全球分发
Cloudflare 层	全球 CDN 分发、边缘缓存、DDoS 防护、SSL 终端、Brotli 传输压缩、WooCommerce 动态页面绕过	不做页面 HTML 生成、不做 Minify

⚙️ 4.10.2 功能不重复原则

以下功能只需在一层开启，多开反而冲突：

功能	推荐在哪层开启	不要在另一层开
CSS/JS 压缩（Minify）	缓存插件（WP Rocket）	Cloudflare 端已无此功能，无需操作
懒加载（LazyLoad）	WoodMart 主题设置（Performance → Lazy Loading）	WP Rocket 不用开
Brotli 传输压缩	Cloudflare（自动常开）	服务器端不用再单独配 Gzip
移动端缓存分离	WP Rocket（Separate cache for mobile devices）	Cloudflare 不需要额外配置

⚙️ 4.10.3 WoodMart 与 WP Rocket 的专属联动

WoodMart 主题设置中有一个专门针对 WP Rocket 的优化开关：

1. 进入 主题设置 → Performance → Plugins。

2. 开启 WP Rocket delay JS exclusions。
3. 开启后，WoodMart 会自动将主题核心 JS 文件添加到 WP Rocket 的「延迟加载排除列表」中，确保加购按钮、AJAX 筛选器、快速查看等主题功能在延迟加载模式下仍然正常工作。

⚠️ 如果你使用 LiteSpeed Cache 而非 WP Rocket，这个开关不会生效。LiteSpeed 用户需要手动在 LiteSpeed Cache → Page Optimization → JS Settings 中添加排除项。具体的排除文件列表可在 WoodMart 官方文档中查找。

⚙️ 4.10.4 Cloudflare 与 WP Rocket 的联动

如果你同时使用 WP Rocket 和 Cloudflare：

1. 进入 设置 → WP Rocket → CDN。
2. 开启 Enable CDN。
3. Cloudflare 使用 Proxy 模式时，不需要额外配置 CDN URL——Cloudflare 在 DNS 层面自动接管静态资源分发。
4. 在 WP Rocket 的 Tools → Cloudflare 标签页中，填入 Cloudflare API Token 和 Zone ID，开启自动清除 Cloudflare 缓存——这样每次你在 WP Rocket 中清除缓存时，Cloudflare 的边缘缓存也会同步清除，不用手动去 Cloudflare 后台操作。

💡 WP Rocket 自动排除 WooCommerce 的 Cart、Checkout、My Account 页面，无需手动配置。但 WoodMart 的愿望清单 /wishlist 页面需要你在 WP Rocket → Advanced Rules → Never Cache URL(s) 中手动添加。

---

五、速度测试

📊 5.1 使用 Google PageSpeed Insights

1. 访问 https://pagespeed.web.dev/。
2. 输入你的网站 URL。
3. 分别测试桌面端和移动端。
4. 查看以下核心指标：

指标	说明	目标值
LCP（Largest Contentful Paint）	最大内容绘制时间	< 2.5 秒
INP（Interaction to Next Paint）	交互响应延迟	< 200 毫秒
CLS（Cumulative Layout Shift）	累积布局偏移	< 0.1

📈 5.2 使用 GTmetrix

1. 访问 https://gtmetrix.com/。
2. 输入你的网站 URL。
3. GTmetrix 会给出 Performance Score 和详细优化建议。
4. 重点关注：
5. 总页面大小（Total Page Size）：建议 < 2MB
6. 请求数量（Requests）：建议 < 100
7. 完全加载时间（Fully Loaded Time）：建议 < 3 秒

🏎️ 5.3 WoodMart LCP 预加载

WoodMart 提供了 LCP 图片预加载功能，帮助浏览器优先加载页面上最大的可见图片：

1. 进入 主题设置 → Performance → LCP。

2. 开启 Preload LCP image。
3. 选择 Auto mode（自动模式，推荐），WoodMart 会自动检测每页的 LCP 图片。
4. 如果自动检测失败，可切换到手动模式，在页面编辑器底部的页面设置中手动指定 LCP 图片。

💡 LCP 预加载是提升 LCP 分数最直接有效的方法之一。开启后，浏览器会在解析 HTML 时就提前下载 LCP 图片，而不是等到 CSS 加载完成后才发现需要下载。

---

六、优化检查清单

优化项	检查方式	目标状态
图片压缩	查看产品图片文件大小	单张 < 200KB
WebP 格式	浏览器开发者工具查看图片格式	WebP
缓存插件	查看页面源码是否有缓存标记	缓存已生效
CDN	查看响应头是否有 cf-cache-status	CDN 已接入
懒加载	滚动页面查看图片是否延迟加载	懒加载生效
LCP 预加载	查看页面 HTML 中是否有 preload 标签	已预加载
PageSpeed 移动端	PageSpeed Insights 测试	分数 > 70
PageSpeed 桌面端	PageSpeed Insights 测试	分数 > 85