网站流量过大可能导致性能问题、页面加载速度变慢以及转化率下降。
在本文中，我将分享一个简化流程以加快页面加载速度。其核心思路是不仅缓存图片和脚本，还要缓存 HTML 内容。毕竟，如果 HTML 加载时间过长，会延迟所有其他请求。
请注意下面来自 Macy’s 的截图。它显示了 Macys.com 在其内容分发网络（CDN）中未对首页 HTML 进行缓存所产生的影响。这会增加一秒的页面加载时间。所有其他页面资源都需在 HTML 内容下载并解析完成后才会加载。该页面加载耗时 16.84 秒，速度较慢。
Macys.com 未缓存其首页，导致加载时间额外增加一秒。点击图片放大。
—
现在来看看 Gap.com，我在三月曾将其作为慢速网站的例子。此后，The Gap 推出了一个新网站，该网站在其 CDN 中缓存 HTML 内容。HTML 请求现在仅增加 78.91 毫秒——首页加载时间为 3.60 秒，比三月份所需的 15 到 20 秒要好得多。
The Gap 正在缓存 HTML 内容，从而加快了页面加载速度。点击图片放大。
在电子商务网站——以及一般的动态网站——上缓存 HTML 内容颇具挑战性。CDN 默认并不会这样做。大多数 CDN 通常仅缓存静态页面资源，如图片、样式表和脚本。
动态内容与静态内容
对于页面内容静态的网站——即没有任何个性化设置的网站——页面缓存不会造成任何问题。但对于具有动态内容的网站（内容因用户而异），缓存 HTML 内容可能会引发错误。
例如，当访客将商品添加到购物车时，所有页面上的内容都会发生变化，以显示购物车中的商品数量。如果电商商家对该用户的页面进行了缓存，其他用户在查看自己的购物车时将看到不准确的商品数量。这一概念适用于任何类型的个性化设置。
解决此问题至少有两种方案：
- 将网页个性化功能实现在独立的 JavaScript 文件中，不对其进行缓存，或仅短时间缓存。
- 仅对匿名用户（即未登录或未向购物车添加任何商品的用户）缓存 HTML。
让我们逐一回顾这些选项。
脚本中的个性化
第一种方案是在独立的 JavaScript 文件中实现个性化，The Gap 正是这样做的。
The Gap 使用脚本进行用户个性化设置，因此它仍然可以缓存页面的 HTML。点击图片放大。
（为了确认 The Gap 的做法，我在 Chrome 浏览器的 查看 > 开发者 > 开发者工具 中禁用了 JavaScript。然后，我点击最右侧的三个点，并选择“设置”。“禁用 JavaScript”位于“调试器”偏好设置下。）
在脚本中实现用户个性化允许对页面的 HTML 进行缓存。然后，脚本可以在异步加载后修改页面。
除了使用 JavaScript 进行个性化外，The Gap 还对 HTML 进行了缓存。我是如何得知这一点的？Gap.com 设置了标准的 HTTP 缓存头 x-cache-status，用于报告缓存资源的状态。在下图中，首页 HTML 的缓存状态显示为“EXPIRED”（已过期）。
通过查看 Web 服务器 Nginx 的 EXPIRED 文档，我们可以判断 Gap.com 是否正在缓存 HTML。点击图片放大。
—
Nginx（Gap.com 的服务器）的文档指出，EXPIRED 表示：“缓存中的条目已过期。响应包含来自源服务器的新鲜内容。”
刷新页面后，x-cache-status 变为 HIT。点击图片放大。
我稍后刷新了页面，x-cache-status 变为“HIT”——HTML 是从缓存的 CDN 获取的。页面加载速度明显加快。
匿名用户
The Gap 推出了一个利用最新技术的新网站。但是，如果你需要在 现有 电子商务平台上缓存 HTML，匿名用户选项可能效果更好。
这种技术被称为在缓存中“打孔”。其工作原理如下。
Web 服务器或 CDN 会缓存每个页面，但会避免缓存任何符合排除条件的请求。最常见的情况是会话 Cookie，当用户登录或将商品加入购物车时，应用程序会设置该 Cookie。该 Cookie 对于单独追踪每个用户是必要的。
以下是一些流行电商和内容平台的示例会话 Cookie。
| 平台 | 会话 Cookie（通配符 * 表示任意字符） |
|---|---|
| WooCommerce | wp-.*|wordpress.*|comment_.*|woocommerce_.* |
| WordPress | wp-.*|wordpress.*|comment_.* |
| Magento 1 | external_no_cache|PHPSESSID|adminhtml |
| Magento 2 | admin| PHPSESSID|private_content_version |
| Drupal | SESS.*|phpsessid |
同样，这些是用于拥有个性化内容用户的 Cookie——例如已登录用户或将商品加入购物车的用户。将这些用户的页面排除在缓存之外并不会让他们享受到更快的页面加载速度。但他们可能只占总访客的一小部分。其余用户将体验到快速加载的页面。
假设您的网站服务器使用的是 Nginx，并且由 Magento 2 驱动您的商店。以下是为匿名用户启用缓存的配置设置。
location /{
proxy_cache my_cache;
proxy_cache_bypass $cookie_admin $cookie_PHPSESSID $cookie_private_content_version;
# ...
}在 Web 服务器或负载均衡器上启用此功能可以提升性能。但最大的收益来自于在 CDN 层实现这一功能。
以下是针对主流 CDN 的操作方法。请务必与 CDN 提供商确认。
- 使用 Cloudflare 进行 HTML 缓存。
- 使用 Fastly 控制缓存。
- 使用 Akamai 进行动态页面缓存。
最后，对于某些网站来说，可能无法找到可以绕过的 Cookie。在这种情况下，我们可以显式地缓存关键页面，如首页、主要分类页面、产品列表页面和产品详情页面。这种方法的缺点是，必须为新页面和分类更新规则。