上一篇 下一篇 分享链接 返回 返回顶部

Cloudflare 加速实战:从缓存规则到 Nginx 配置,一次调好网站性能

发布人:慈云数据-客服中心 发布时间:1 天前 阅读量:4

Cloudflare 性能优化教程|附配置文件

Cloudflare 是目前最常用的网站性能优化与安全防护平台之一。它通过全球 Anycast CDN、智能缓存、HTTP/3、Brotli 压缩、WAF、防 DDoS、DNS 加速等能力,帮助网站降低源站压力、提升访问速度,并增强整体安全性。

不过,很多站点虽然接入了 Cloudflare,但只是简单修改了 DNS,并没有充分利用它的性能优化能力。尤其是对于 WordPress、静态网站、API 服务、跨境访问站点来说,Cloudflare 的配置是否合理,会直接影响首屏速度、缓存命中率、TTFB、稳定性以及源站负载。

本文将系统讲解 Cloudflare 的性能优化思路,并提供可直接参考的配置方案,包括 DNS、SSL/TLS、缓存规则、页面规则、压缩、HTTP/3、源站 Nginx 配置、WordPress 优化建议等内容。


一、Cloudflare 性能优化的核心思路

在开始配置之前,先理解 Cloudflare 的优化逻辑。

Cloudflare 的性能优化主要围绕以下几个方向:

  1. DNS 加速

    • 使用 Cloudflare 的全球 DNS 解析网络,缩短 DNS 查询时间。
    • 支持代理模式,将用户请求接入 Cloudflare 边缘节点。
  2. CDN 缓存

    • 静态资源可缓存在 Cloudflare 节点。
    • 用户访问时优先从离用户最近的边缘节点返回资源。
    • 降低源站带宽和服务器压力。
  3. 协议优化

    • 支持 HTTP/2、HTTP/3、QUIC。
    • 启用 Brotli 压缩。
    • 开启 TLS 1.3,减少 HTTPS 握手耗时。
  4. 图片与前端优化

    • 可启用 Polish、Mirage、Rocket Loader 等功能。
    • 免费套餐也可通过缓存规则、压缩和合理配置实现不错的优化效果。
  5. 源站配合优化

    • Cloudflare 不是万能的。
    • 如果源站响应慢、动态页面过重、数据库查询过多,即使套了 CDN,首次动态请求仍可能慢。
    • 因此需要配合 Nginx、PHP、缓存插件或静态化策略。

二、接入 Cloudflare 前的准备工作

在正式配置前,建议先完成以下检查。

1. 确认域名 DNS 记录

进入 Cloudflare 后,系统会自动扫描现有 DNS 记录,但扫描结果不一定完整。

常见记录包括:

类型 名称 内容 用途
A @ 服务器 IP 根域名
A www 服务器 IP www 子域名
CNAME cdn example.com CDN 子域名
MX @ 邮件服务器 邮件收发
TXT @ SPF/DKIM/验证记录 域名验证

需要特别注意:

  • 网站相关记录可开启 Cloudflare 代理,也就是橙色云朵。
  • 邮件相关记录不要开启代理,应保持灰色云朵。
  • SSH、FTP、面板端口等服务不建议直接通过 Cloudflare 免费代理访问。

2. 确认源站支持 HTTPS

建议源站服务器提前部署有效 SSL 证书。

可以使用:

  • Let's Encrypt 免费证书;
  • ZeroSSL;
  • 商业 SSL 证书;
  • Cloudflare Origin Certificate。

如果源站没有 HTTPS,只使用 Cloudflare 的前端 HTTPS,容易造成安全隐患,也可能出现跳转循环或 mixed content 问题。


三、DNS 配置优化

Cloudflare 的 DNS 本身速度较快,但配置时要注意代理状态。

推荐 DNS 配置示例

A      @        192.0.2.10       Proxied
A      www      192.0.2.10       Proxied
A      api      192.0.2.10       Proxied 或 DNS Only
CNAME  static   example.com      Proxied
MX     @        mail.example.com DNS Only
A      mail     192.0.2.20       DNS Only
TXT    @        v=spf1 mx ~all   DNS Only

说明:

  • @www 是网站主入口,建议开启代理。
  • static 用于静态资源域名,建议开启代理。
  • api 是否代理取决于业务:
    • 普通接口可代理;
    • WebSocket、特殊端口、长连接业务需测试;
    • 对真实客户端 IP 有强依赖的接口需正确配置回源 IP。
  • mail 必须关闭代理,否则邮件服务可能异常。

四、SSL/TLS 配置优化

Cloudflare 的 SSL/TLS 设置非常关键,错误配置会导致跳转循环、访问不安全或性能下降。

进入:

Cloudflare 控制台 → SSL/TLS

1. 加密模式选择

推荐使用:

Full (strict)

不同模式说明:

模式 说明 是否推荐
Off 不启用 HTTPS 不推荐
Flexible 用户到 Cloudflare 是 HTTPS,Cloudflare 到源站是 HTTP 不推荐
Full 用户到 Cloudflare 和 Cloudflare 到源站都是 HTTPS,但不验证源站证书 一般
Full (strict) 全链路 HTTPS,并验证源站证书 推荐

如果源站已经安装有效证书,建议直接使用 Full (strict)

2. 开启 Always Use HTTPS

路径:

SSL/TLS → Edge Certificates → Always Use HTTPS

建议开启:

Always Use HTTPS: On

作用是将所有 HTTP 请求重定向到 HTTPS。

3. 开启 TLS 1.3

路径:

SSL/TLS → Edge Certificates → TLS 1.3

建议:

TLS 1.3: On

TLS 1.3 可以减少握手次数,提高 HTTPS 连接速度。

4. 最低 TLS 版本

推荐设置:

Minimum TLS Version: TLS 1.2

如果需要兼容非常老的浏览器,可设为 TLS 1.0 或 1.1,但不建议。


五、Speed 性能配置

进入:

Cloudflare 控制台 → Speed → Optimization

1. Brotli 压缩

建议开启:

Brotli: On

Brotli 对 HTML、CSS、JS、SVG、JSON 等文本资源压缩效果较好,通常比 Gzip 更高效。

2. HTTP/2 与 HTTP/3

进入:

Network

推荐:

HTTP/2: On
HTTP/3 with QUIC: On
0-RTT Connection Resumption: On

说明:

  • HTTP/2 可提升多资源并发加载效率。
  • HTTP/3 基于 QUIC,在弱网、高丢包环境下体验更好。
  • 0-RTT 可减少重复访问时的连接延迟,但对极少数安全敏感业务需评估重放风险。

3. Auto Minify

建议谨慎开启:

Auto Minify HTML: On
Auto Minify CSS: On
Auto Minify JS: 视情况

说明:

  • HTML、CSS 通常可以开启。
  • JS 压缩有时会导致某些脚本异常,尤其是已经经过构建工具压缩的网站。
  • 如果你的站点使用 Vite、Webpack、Next.js、Nuxt、WordPress 缓存插件等已经压缩过资源,可以关闭 Cloudflare 的 JS Minify。

推荐配置:

Auto Minify:
- HTML: On
- CSS: On
- JavaScript: Off 或测试后开启

4. Rocket Loader

Rocket Loader 可以延迟加载 JavaScript,但也容易影响前端交互、统计代码、广告代码或框架初始化。

建议:

Rocket Loader: Off

除非你的网站是传统页面,并且已经充分测试兼容性。


六、缓存配置优化

Cloudflare 的性能提升,很大程度来自缓存。

进入:

Caching → Configuration

1. Caching Level

推荐:

Caching Level: Standard

说明:

  • Standard:根据 URL 缓存静态资源,适合大多数网站。
  • Ignore Query String:忽略查询参数缓存,可能导致动态资源错乱。
  • No Query String:只缓存无查询参数的资源。

一般站点使用 Standard 即可。

2. Browser Cache TTL

推荐设置:

Browser Cache TTL: 1 month

如果你的网站静态资源文件名带 hash,例如:

app.8f3a1c.js
style.9c23b.css

可以设置更长:

Browser Cache TTL: 6 months 或 1 year

如果静态资源文件名不变,则建议不要设置太长,否则更新后用户端可能仍加载旧文件。

3. Always Online

建议:

Always Online: On

当源站临时不可用时,Cloudflare 可能返回已缓存页面,提高可用性。


七、缓存规则配置示例

Cloudflare 新版更推荐使用 Cache Rules,而不是旧版 Page Rules。

进入:

Rules → Cache Rules

下面给出几个常用规则。


规则一:缓存静态资源

适用于 CSS、JS、图片、字体等资源。

匹配表达式

(http.request.uri.path matches "(?i)\.(css|js|jpg|jpeg|png|gif|webp|avif|svg|ico|woff|woff2|ttf|eot)$")

配置动作

Cache eligibility: Eligible for cache
Edge TTL: 30 days
Browser TTL: 30 days

说明

该规则能有效提升静态资源命中率。对于带版本号或 hash 的资源,可以将 Edge TTL 和 Browser TTL 设置为 6 个月或 1 年。


规则二:缓存 HTML 页面,适合静态网站

如果你的网站是静态博客、文档站、纯前端站点,可以缓存 HTML。

匹配表达式

(hostname eq "example.com" or hostname eq "www.example.com")

配置动作

Cache eligibility: Eligible for cache
Edge TTL: 1 hour
Browser TTL: 10 minutes
Cache key: default

如果页面更新不频繁,可以设置:

Edge TTL: 1 day
Browser TTL: 30 minutes

注意

不建议对登录后台、用户中心、购物车、支付页缓存 HTML,否则可能造成用户数据错乱。


规则三:绕过后台与登录页缓存

适用于 WordPress、Discuz、Typecho、Laravel 等动态网站。

匹配表达式

(http.request.uri.path contains "/wp-admin" 
or http.request.uri.path contains "/wp-login.php"
or http.request.uri.path contains "/admin"
or http.request.uri.path contains "/login"
or http.request.uri.path contains "/cart"
or http.request.uri.path contains "/checkout"
or http.request.uri.path contains "/user")

配置动作

Cache eligibility: Bypass cache

说明

该规则应放在缓存 HTML 规则之前,避免后台页面被缓存。


规则四:绕过带登录 Cookie 的请求

对于 WordPress,登录用户访问前台时通常不应返回缓存 HTML。

匹配表达式

(http.cookie contains "wordpress_logged_in_" 
or http.cookie contains "wp-postpass_" 
or http.cookie contains "comment_author_")

配置动作

Cache eligibility: Bypass cache

八、Page Rules 旧版配置参考

如果你仍在使用 Page Rules,可以参考以下配置。

Page Rule 1:后台不缓存

URL:
example.com/wp-admin/*

Settings:
Cache Level: Bypass
Disable Performance

Page Rule 2:登录页不缓存

URL:
example.com/wp-login.php*

Settings:
Cache Level: Bypass
Disable Performance

Page Rule 3:全站静态资源缓存

URL:
example.com/*

Settings:
Cache Level: Standard
Edge Cache TTL: 1 month
Browser Cache TTL: 1 month

如果是静态站点,可以使用:

Cache Level: Cache Everything
Edge Cache TTL: 1 day

但动态站点不要轻易全站 Cache Everything。


九、WordPress 推荐配置

WordPress 是动态 CMS,如果配置不当,很容易出现后台异常、评论不刷新、登录用户看到缓存页面等问题。

1. 推荐 Cloudflare 配置

SSL Mode: Full (strict)
Always Use HTTPS: On
Brotli: On
HTTP/2: On
HTTP/3: On
Rocket Loader: Off
Caching Level: Standard
Browser Cache TTL: 1 month

2. WordPress 缓存策略

推荐组合:

Cloudflare CDN + WordPress 页面缓存插件 + 对登录用户绕过缓存

常见插件:

  • WP Rocket;
  • LiteSpeed Cache;
  • W3 Total Cache;
  • WP Super Cache;
  • Cache Enabler。

如果服务器使用 OpenLiteSpeed 或 LiteSpeed Enterprise,建议使用 LiteSpeed Cache。

3. WordPress Cloudflare Cache Rules 示例

后台与登录绕过缓存

(http.request.uri.path contains "/wp-admin" 
or http.request.uri.path contains "/wp-login.php")

动作:

Bypass cache

登录 Cookie 绕过缓存

(http.cookie contains "wordpress_logged_in_")

动作:

Bypass cache

静态资源缓存

(http.request.uri.path matches "(?i)\.(css|js|jpg|jpeg|png|gif|webp|avif|svg|ico|woff|woff2)$")

动作:

Eligible for cache
Edge TTL: 30 days
Browser TTL: 30 days

4. 是否缓存 WordPress HTML?

可以,但要谨慎。

适合缓存 HTML 的情况:

  • 主要是博客文章;
  • 没有复杂会员系统;
  • 评论不要求实时;
  • 已设置登录 Cookie 绕过;
  • 已设置后台绕过;
  • 有清理缓存机制。

不适合缓存 HTML 的情况:

  • 电商网站;
  • 会员中心;
  • 在线课程系统;
  • 论坛;
  • 频繁个性化页面;
  • 多用户动态内容站。

十、Nginx 源站配置文件示例

Cloudflare 可以加速边缘访问,但源站仍然需要合理配置。下面给出一份适合常见 PHP/WordPress 站点的 Nginx 示例配置。

请将 example.com、证书路径、PHP-FPM socket 根据实际环境修改。

server {
    listen 80;
    server_name example.com www.example.com;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com www.example.com;

    root /var/www/example.com;
    index index.php index.html index.htm;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;

    # 获取 Cloudflare 真实访客 IP
    real_ip_header CF-Connecting-IP;

    set_real_ip_from 173.245.48.0/20;
    set_real_ip_from 103.21.244.0/22;
    set_real_ip_from 103.22.200.0/22;
    set_real_ip_from 103.31.4.0/22;
    set_real_ip_from 141.101.64.0/18;
    set_real_ip_from 108.162.192.0/18;
    set_real_ip_from 190.93.240.0/20;
    set_real_ip_from 188.114.96.0/20;
    set_real_ip_from 197.234.240.0/22;
    set_real_ip_from 198.41.128.0/17;
    set_real_ip_from 162.158.0.0/15;
    set_real_ip_from 104.16.0.0/13;
    set_real_ip_from 104.24.0.0/14;
    set_real_ip_from 172.64.0.0/13;
    set_real_ip_from 131.0.72.0/22;

    # 静态资源缓存
    location ~* \.(css|js|jpg|jpeg|png|gif|webp|avif|svg|ico|woff|woff2|ttf|eot)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000, immutable";
        access_log off;
        log_not_found off;
    }

    # 禁止访问隐藏文件
    location ~ /\.(?!well-known) {
        deny all;
    }

    # WordPress 固定链接
    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    # PHP 处理
    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

        # 避免 PHP 输出被过度缓存
        fastcgi_buffer_size 32k;
        fastcgi_buffers 8 32k;
        fastcgi_busy_buffers_size 64k;
    }

    # 安全响应头,可根据业务调整
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
}

十一、静态网站推荐配置

如果你的网站是 Hugo、Hexo、VuePress、VitePress、Astro、Next.js 静态导出等类型,可以更激进地缓存。

Cloudflare 推荐配置

Cache Rules:
1. 缓存所有静态资源
2. 缓存 HTML 页面

Edge TTL:
- HTML: 1 hour 到 1 day
- CSS/JS/Image/Font: 30 days 到 1 year

Browser TTL:
- HTML: 10 minutes 到 30 minutes
- CSS/JS/Image/Font: 30 days 到 1 year

如果每次构建后文件名都会带 hash,可以配置:

Static Assets:
Edge TTL: 1 year
Browser TTL: 1 year
Cache-Control: immutable

静态站点的 Nginx 示例:

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(css|js|jpg|jpeg|png|gif|webp|avif|svg|ico|woff|woff2)$ {
        expires 365d;
        add_header Cache-Control "public, max-age=31536000, immutable";
        access_log off;
    }
}

十二、API 服务是否适合走 Cloudflare?

API 服务可以走 Cloudflare,但需要根据业务选择策略。

适合代理的 API

  • 普通 REST API;
  • GraphQL 查询接口;
  • 公开数据接口;
  • 可缓存的 GET 请求;
  • 需要防护恶意请求的接口。

不适合强缓存的 API

  • 登录接口;
  • 支付接口;
  • 用户资料接口;
  • 后台管理接口;
  • 实时状态接口;
  • 与用户身份强相关的接口。

API 缓存规则示例

仅缓存 GET 请求,并排除带认证头的请求:

(http.request.method eq "GET"
and http.request.uri.path starts_with "/api/public/"
and not http.request.headers["authorization"][0])

动作:

Eligible for cache
Edge TTL: 5 minutes
Browser TTL: 0 seconds

对于登录、支付等接口:

(http.request.uri.path starts_with "/api/auth/"
or http.request.uri.path starts_with "/api/payment/"
or http.request.uri.path starts_with "/api/user/")

动作:

Bypass cache

十三、Cloudflare 源站真实 IP 配置

接入 Cloudflare 后,源站看到的访问 IP 默认是 Cloudflare 节点 IP,而不是真实用户 IP。

如果不配置真实 IP,会导致:

  • 日志中看不到真实访客 IP;
  • 限流策略失效;
  • WordPress 评论 IP 不准确;
  • 安全审计困难;
  • Fail2ban、WAF 判断异常。

Nginx 中应使用:

real_ip_header CF-Connecting-IP;

并添加 Cloudflare IP 段:

set_real_ip_from 173.245.48.0/20;
set_real_ip_from 103.21.244.0/22;
set_real_ip_from 103.22.200.0/22;
set_real_ip_from 103.31.4.0/22;
set_real_ip_from 141.101.64.0/18;
set_real_ip_from 108.162.192.0/18;
set_real_ip_from 190.93.240.0/20;
set_real_ip_from 188.114.96.0/20;
set_real_ip_from 197.234.240.0/22;
set_real_ip_from 198.41.128.0/17;
set_real_ip_from 162.158.0.0/15;
set_real_ip_from 104.16.0.0/13;
set_real_ip_from 104.24.0.0/14;
set_real_ip_from 172.64.0.0/13;
set_real_ip_from 131.0.72.0/22;

建议定期更新 Cloudflare IP 段,可在服务器中写脚本自动同步。


十四、推荐 Cloudflare 配置文件汇总

下面是一份通用站点配置清单。

cloudflare:
  ssl_tls:
    encryption_mode: "Full (strict)"
    always_use_https: true
    tls_1_3: true
    minimum_tls_version: "TLS 1.2"

  network:
    http2: true
    http3_quic: true
    zero_rtt: true
    websockets: true
    ipv6_compatibility: true

  speed:
    brotli: true
    auto_minify:
      html: true
      css: true
      js: false
    rocket_loader: false

  caching:
    caching_level: "Standard"
    browser_cache_ttl: "1 month"
    always_online: true

  cache_rules:
    - name: "Bypass Admin and Login"
      expression: >
        http.request.uri.path contains "/wp-admin"
        or http.request.uri.path contains "/wp-login.php"
        or http.request.uri.path contains "/admin"
        or http.request.uri.path contains "/login"
      action: "bypass_cache"

    - name: "Bypass Logged In Users"
      expression: >
        http.cookie contains "wordpress_logged_in_"
        or http.cookie contains "session"
        or http.cookie contains "token"
      action: "bypass_cache"

    - name: "Cache Static Assets"
      expression: >
        http.request.uri.path matches "(?i)\\.(css|js|jpg|jpeg|png|gif|webp|avif|svg|ico|woff|woff2|ttf|eot)$"
      action: "cache"
      edge_ttl: "30 days"
      browser_ttl: "30 days"

    - name: "Cache HTML For Static Site"
      expression: >
        hostname eq "example.com"
        and not http.request.uri.path contains "/admin"
        and not http.request.uri.path contains "/login"
      action: "cache"
      edge_ttl: "1 hour"
      browser_ttl: "10 minutes"

十五、性能测试方法

配置完成后,不要只凭感觉判断速度,应通过工具测试。

1. 查看缓存命中

使用 curl:

curl -I https://example.com/style.css

重点查看:

cf-cache-status: HIT

常见状态:

状态 含义
HIT 命中 Cloudflare 缓存
MISS 未命中缓存,已回源
BYPASS 被规则绕过
EXPIRED 缓存过期,重新回源
DYNAMIC 动态内容,未缓存
REVALIDATED 已重新验证缓存

2. 测试 TTFB

curl -o /dev/null -s -w "DNS: %{time_namelookup}\nConnect: %{time_connect}\nTTFB: %{time_starttransfer}\nTotal: %{time_total}\n" https://example.com/

关注:

TTFB
Total

如果静态资源 TTFB 很低,但首页 TTFB 很高,说明首页动态生成慢,需要优化源站。

3. 使用在线工具

可使用:

  • PageSpeed Insights;
  • GTmetrix;
  • WebPageTest;
  • Lighthouse;
  • Cloudflare Analytics;
  • Chrome DevTools Network 面板。

十六、常见问题与解决方案

1. 开启 Cloudflare 后网站无限跳转

常见原因是 SSL 模式使用了 Flexible,而源站又强制 HTTPS。

解决方案:

SSL/TLS → Full (strict)

并确保源站证书有效。

2. 页面更新后用户看不到新内容

可能是缓存时间太长。

解决方案:

  • 清理 Cloudflare 缓存;
  • 降低 HTML 的 Edge TTL;
  • 静态资源使用 hash 文件名;
  • 后台发布文章后自动 Purge Cache。

3. WordPress 后台样式异常

可能是后台资源被压缩或缓存规则影响。

解决方案:

/wp-admin/*
/wp-login.php*

设置为:

Bypass cache
Disable performance features

并关闭 Rocket Loader。

4. 获取不到真实用户 IP

在 Nginx 或 Apache 中配置 Cloudflare Real IP。

Nginx:

real_ip_header CF-Connecting-IP;

WordPress 可配合插件或服务器配置修复。

5. API 返回旧数据

可能是 API 被缓存。

解决方案:

对动态 API 设置:

Bypass cache

或者只缓存公开 GET 接口,并设置较短 Edge TTL。


十七、推荐优化顺序

如果你刚接入 Cloudflare,建议按以下顺序操作:

  1. 正确配置 DNS;
  2. 源站部署 HTTPS 证书;
  3. SSL 模式设置为 Full (strict)
  4. 开启 Always Use HTTPS;
  5. 开启 Brotli、HTTP/2、HTTP/3;
  6. 设置静态资源缓存规则;
  7. 绕过后台、登录页、用户中心缓存;
  8. 根据网站类型决定是否缓存 HTML;
  9. 配置源站真实 IP;
  10. 使用 curl 和 Lighthouse 测试;
  11. 根据缓存命中率和 TTFB 继续调整。

十八、总结

Cloudflare 的性能优化并不是简单“打开橙色云朵”就完成了。真正有效的配置应当结合网站类型、源站性能、缓存策略和业务安全需求。

对于大多数网站,推荐的基础方案是:

Full (strict) HTTPS
Brotli 开启
HTTP/2、HTTP/3 开启
Rocket Loader 关闭
静态资源长期缓存
后台和登录页绕过缓存
动态页面谨慎缓存
源站配置真实 IP

如果是静态博客或文档站,可以进一步开启 HTML 缓存,让 Cloudflare 边缘节点直接返回页面,显著降低 TTFB。
如果是 WordPress、电商、会员系统或 API 服务,则需要严格区分静态资源、公开页面和用户私有数据,避免缓存错误造成数据泄露或页面错乱。

合理使用 Cloudflare,可以让网站在不更换服务器的情况下获得明显的访问速度提升,同时增强安全性和稳定性。最重要的是:每次修改配置后都要测试缓存命中、页面功能和用户体验,而不是盲目开启所有优化开关。

目录结构
全文