Cloudflare 性能优化教程｜一键部署

在网站访问速度、稳定性和安全性越来越重要的今天，Cloudflare 已经成为许多站长、开发者和企业进行性能优化的首选工具。它不仅提供全球 CDN 加速能力，还集成了 DNS、缓存、WAF、防火墙、DDoS 防护、图片优化、Workers 边缘计算等功能。合理配置 Cloudflare，可以显著降低源站压力，提升页面加载速度，并增强网站的可用性与安全性。

本文将以实战角度，介绍如何通过 Cloudflare 对网站进行性能优化，并提供一套适合大多数网站的“一键部署”配置思路，帮助你快速完成基础优化。

一、为什么选择 Cloudflare？

Cloudflare 的核心优势在于它拥有遍布全球的数据中心。当用户访问你的网站时，请求会优先到达距离用户最近的 Cloudflare 节点，再由节点决定是否直接返回缓存内容，或继续回源请求你的服务器。

这样做有几个明显好处：

1. 访问速度更快
   静态资源可以从离用户更近的节点返回，减少网络延迟。

2. 源站压力更小
   CSS、JS、图片、字体等资源被缓存后，源站不需要每次都响应请求。

3. 抗攻击能力增强
   Cloudflare 可以帮助抵御常见 DDoS 攻击、恶意爬虫和异常请求。

4. DNS 解析更稳定
   Cloudflare DNS 解析速度快，全球可用性高。

5. 支持边缘计算
   通过 Cloudflare Workers，可以在边缘节点执行逻辑，例如重定向、鉴权、缓存控制等。

二、使用 Cloudflare 前的准备工作

在开始优化之前，你需要准备以下内容：

• 一个已经可以正常访问的网站；
• 一个 Cloudflare 账号；
• 你的域名管理权限；
• 能够修改域名 NS 服务器；
• 如果需要部署 Workers，还需要开启 Cloudflare Workers 服务。

如果你的网站是 WordPress、Typecho、Halo、Hexo、VuePress、VitePress、Next.js、Nuxt、Laravel、Django 或静态网站，都可以使用本文中的优化思路。

三、接入 Cloudflare 的基本流程

1. 添加站点

登录 Cloudflare 后，点击：

Add a website

输入你的域名，例如：

example.com

Cloudflare 会自动扫描当前 DNS 记录。

2. 检查 DNS 记录

常见 DNS 记录包括：

需要注意的是，如果你希望某条记录经过 Cloudflare 加速，应该开启橙色云朵。

• 橙色云朵：流量经过 Cloudflare，可启用 CDN、防火墙、缓存等功能；
• 灰色云朵：仅 DNS 解析，不经过 Cloudflare。

一般建议：

网站访问相关记录：开启橙色云朵
邮件、FTP、SSH 相关记录：保持灰色云朵

3. 修改域名 NS

Cloudflare 会分配两条 NameServer，例如：

eva.ns.cloudflare.com
max.ns.cloudflare.com

你需要前往域名注册商后台，将原来的 NS 修改为 Cloudflare 提供的 NS。

修改后等待生效，通常需要几分钟到数小时不等。

四、Cloudflare 性能优化核心配置

接入 Cloudflare 后，不建议只保持默认配置。下面这些设置可以显著提升网站性能。

1. SSL/TLS 配置

进入：

SSL/TLS → Overview

建议选择：

Full 或 Full (strict)

如果你的源站已经安装了有效 SSL 证书，推荐使用：

Full (strict)

这是最安全、最稳定的模式。

不要长期使用：

Flexible

因为 Flexible 只加密用户到 Cloudflare 的连接，而 Cloudflare 到源站之间仍然是 HTTP，可能导致重定向循环、安全性降低等问题。

推荐设置

进入：

SSL/TLS → Edge Certificates

开启：

• Always Use HTTPS；
• Automatic HTTPS Rewrites；
• Opportunistic Encryption；
• TLS 1.3；
• HTTP/2；
• HTTP/3。

这些功能可以让浏览器与 Cloudflare 之间的连接更安全、更快速。

2. 缓存配置

缓存是 Cloudflare 性能优化的核心。

进入：

Caching → Configuration

建议设置：

Browser Cache TTL：1 month

如果你的网站静态资源版本管理完善，例如 CSS、JS 文件带有 hash：

/app.8f3a9c.js
/style.91ab2.css

那么可以将浏览器缓存时间设置得更长，例如：

6 months 或 1 year

缓存级别

推荐：

Caching Level：Standard

它可以根据 URL 参数合理判断缓存内容。

开启 Always Online

如果你的网站偶尔宕机，可以开启：

Caching → Configuration → Always Online

当源站不可用时，Cloudflare 可能会返回缓存版本页面，提升可用性。

3. 页面规则优化

Page Rules 是 Cloudflare 中非常实用的功能。虽然新版 Cloudflare 更推荐使用 Cache Rules、Redirect Rules、Configuration Rules，但 Page Rules 依然适合快速配置。

以下是常见规则。

规则一：静态资源强缓存

匹配：

example.com/*.(jpg|jpeg|png|gif|webp|svg|css|js|woff|woff2|ttf|ico)

如果使用 Cache Rules，可以设置：

Cache eligibility：Eligible for cache
Edge Cache TTL：1 month
Browser Cache TTL：1 month

这样图片、CSS、JS、字体文件会尽可能从 Cloudflare 节点返回。

规则二：后台路径不缓存

如果是 WordPress，可以设置：

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

操作：

Cache Level：Bypass

如果是其他系统，也应该绕过后台、接口、登录页面等敏感路径，例如：

/admin/*
/login
/api/*
/user/*
/account/*

原因很简单：这些页面通常包含用户状态或动态数据，不适合缓存。

规则三：首页缓存

对于静态博客或更新频率较低的网站，可以缓存首页：

example.com/

设置：

Cache Everything
Edge Cache TTL：1 hour 或 1 day

但如果首页有登录状态、个性化推荐、实时数据，则不建议缓存整个 HTML。

4. Brotli 压缩

进入：

Speed → Optimization → Content Optimization

开启：

Brotli

Brotli 是一种比 Gzip 压缩率更高的压缩算法，尤其适合文本文件，例如：

• HTML；
• CSS；
• JavaScript；
• SVG；
• JSON。

开启后可以减少传输体积，提升页面加载速度。

5. Auto Minify

进入：

Speed → Optimization

开启：

• JavaScript；
• CSS；
• HTML。

Auto Minify 可以自动压缩前端资源，减少文件体积。

不过需要注意，如果你的网站构建工具已经做了压缩，例如 Vite、Webpack、Next.js、Nuxt 等，Cloudflare 的 Auto Minify 提升可能有限。如果开启后出现样式或脚本异常，可以关闭该功能。

6. Rocket Loader 是否开启？

Rocket Loader 可以延迟加载 JavaScript，从而提升首屏渲染速度。但它并不适合所有网站。

适合：

• 简单静态网站；
• 传统 HTML 页面；
• JS 依赖较少的网站。

不适合：

• Vue、React、Angular 等 SPA；
• Next.js、Nuxt 等现代框架；
• 对脚本加载顺序敏感的网站。

如果你不确定，建议先关闭 Rocket Loader。等完成基础优化后，再单独测试开启效果。

7. 图片优化

Cloudflare 对图片优化提供了多种能力，包括 Polish、Mirage、Image Resizing、Cloudflare Images 等。

其中部分功能需要付费计划。

如果你是免费用户，可以先从以下方面优化：

1. 使用 WebP 或 AVIF；
2. 图片上传前压缩；
3. 使用懒加载；
4. 使用合适尺寸的缩略图；
5. 为图片设置合理缓存时间。

如果你使用 WordPress，可以配合插件实现：

• ShortPixel；
• Imagify；
• EWWW Image Optimizer；
• LiteSpeed Cache；
• WebP Express。

如果你使用静态网站，可以在构建阶段生成 WebP 图片。

五、Cloudflare 一键部署优化脚本思路

Cloudflare 本身很多配置需要通过面板操作，但如果你希望快速部署一个通用优化方案，可以借助 Cloudflare API 实现自动化。

下面给出一个适合开发者使用的“一键部署”思路：

• 自动开启 Brotli；
• 自动开启 Always Use HTTPS；
• 自动开启 HTTP/3；
• 自动设置 Browser Cache TTL；
• 自动创建缓存规则；
• 自动创建跳转规则；
• 自动配置安全等级。

六、准备 Cloudflare API Token

进入 Cloudflare 控制台：

My Profile → API Tokens → Create Token

建议创建自定义 Token，并授予以下权限：

Zone Settings:Edit
Zone:Read
Cache Rules:Edit
Page Rules:Edit

资源范围选择你的目标域名即可。

然后记录：

CF_API_TOKEN
ZONE_ID

Zone ID 可以在域名概览页面右侧找到。

七、一键优化部署脚本示例

下面是一个 Bash 示例脚本，用于批量修改部分 Cloudflare 设置。

注意：不同账号套餐、API 版本和 Cloudflare 功能开放情况可能不同。使用前请先在测试域名验证。

#!/usr/bin/env bash

set -e

CF_API_TOKEN="你的_API_TOKEN"
ZONE_ID="你的_ZONE_ID"

API="https://api.cloudflare.com/client/v4"

request() {
  local method="$1"
  local endpoint="$2"
  local data="$3"

  curl -sS -X "$method" "$API$endpoint" \
    -H "Authorization: Bearer $CF_API_TOKEN" \
    -H "Content-Type: application/json" \
    --data "$data"
}

echo "开启 Always Use HTTPS..."
request "PATCH" "/zones/$ZONE_ID/settings/always_use_https" '{
  "value": "on"
}'

echo "开启 Automatic HTTPS Rewrites..."
request "PATCH" "/zones/$ZONE_ID/settings/automatic_https_rewrites" '{
  "value": "on"
}'

echo "开启 Brotli..."
request "PATCH" "/zones/'$ZONE_ID'/settings/brotli" '{
  "value": "on"
}'

echo "开启 HTTP/3..."
request "PATCH" "/zones/$ZONE_ID/settings/http3" '{
  "value": "on"
}'

echo "设置浏览器缓存 TTL..."
request "PATCH" "/zones/$ZONE_ID/settings/browser_cache_ttl" '{
  "value": 2592000
}'

echo "设置缓存级别为 Standard..."
request "PATCH" "/zones/$ZONE_ID/settings/cache_level" '{
  "value": "basic"
}'

echo "设置安全等级为 Medium..."
request "PATCH" "/zones/$ZONE_ID/settings/security_level" '{
  "value": "medium"
}'

echo "完成 Cloudflare 基础性能优化配置。"

八、脚本中的一个小问题修正

上面脚本中开启 Brotli 的接口写法要特别注意变量拼接。更稳妥的写法如下：

request "PATCH" "/zones/$ZONE_ID/settings/brotli" '{
  "value": "on"
}'

完整脚本中应避免出现：

"/zones/'$ZONE_ID'/settings/brotli"

这种写法会导致变量无法正确解析。

九、推荐的一键部署最终版脚本

你可以使用下面这个更规范的版本：

#!/usr/bin/env bash

set -euo pipefail

CF_API_TOKEN="${CF_API_TOKEN:-}"
ZONE_ID="${ZONE_ID:-}"

if [ -z "$CF_API_TOKEN" ] || [ -z "$ZONE_ID" ]; then
  echo "请先设置环境变量："
  echo "export CF_API_TOKEN='你的 Cloudflare API Token'"
  echo "export ZONE_ID='你的 Zone ID'"
  exit 1
fi

API="https://api.cloudflare.com/client/v4"

cf_patch_setting() {
  local setting="$1"
  local value="$2"

  echo "正在设置 $setting = $value"

  curl -sS -X PATCH "$API/zones/$ZONE_ID/settings/$setting" \
    -H "Authorization: Bearer $CF_API_TOKEN" \
    -H "Content-Type: application/json" \
    --data "{\"value\":$value}" | jq .
}

cf_patch_setting_string() {
  local setting="$1"
  local value="$2"

  echo "正在设置 $setting = $value"

  curl -sS -X PATCH "$API/zones/$ZONE_ID/settings/$setting" \
    -H "Authorization: Bearer $CF_API_TOKEN" \
    -H "Content-Type: application/json" \
    --data "{\"value\":\"$value\"}" | jq .
}

cf_patch_setting_string "always_use_https" "on"
cf_patch_setting_string "automatic_https_rewrites" "on"
cf_patch_setting_string "brotli" "on"
cf_patch_setting_string "http3" "on"
cf_patch_setting "browser_cache_ttl" 2592000
cf_patch_setting_string "cache_level" "basic"
cf_patch_setting_string "security_level" "medium"

echo "Cloudflare 基础性能优化已完成。"

使用方法：

export CF_API_TOKEN="你的 Cloudflare API Token"
export ZONE_ID="你的 Zone ID"

chmod +x cloudflare-optimize.sh
./cloudflare-optimize.sh

如果你的系统没有安装 jq，可以先安装：

# Ubuntu / Debian
sudo apt update
sudo apt install jq -y

# CentOS
sudo yum install jq -y

# macOS
brew install jq

十、使用 Workers 实现边缘缓存优化

对于更高级的场景，可以使用 Cloudflare Workers 控制缓存策略。例如，将特定静态资源缓存更久，将 HTML 页面缓存较短时间。

示例 Workers：

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url)

    const staticExt = [
      ".css", ".js", ".jpg", ".jpeg", ".png",
      ".gif", ".webp", ".svg", ".ico",
      ".woff", ".woff2", ".ttf"
    ]

    const isStatic = staticExt.some(ext => url.pathname.endsWith(ext))

    let response = await fetch(request)

    response = new Response(response.body, response)

    if (isStatic) {
      response.headers.set(
        "Cache-Control",
        "public, max-age=31536000, immutable"
      )
    } else {
      response.headers.set(
        "Cache-Control",
        "public, max-age=300"
      )
    }

    return response
  }
}

这个 Workers 的逻辑是：

• 静态资源缓存一年；
• 非静态资源缓存五分钟；
• 适合静态站点、文档站点和更新频率不高的博客。

但如果你的网站包含登录、购物车、用户中心等功能，不建议直接缓存所有 HTML。

十一、性能测试方法

优化完成后，不要只凭感觉判断效果。建议使用以下工具测试：

1. Lighthouse

Chrome 浏览器内置工具：

F12 → Lighthouse

可以测试：

• Performance；
• Accessibility；
• Best Practices；
• SEO。

2. PageSpeed Insights

地址：

https://pagespeed.web.dev/

适合分析移动端和桌面端性能。

3. WebPageTest

地址：

https://www.webpagetest.org/

可以选择不同地区测试首字节时间、渲染时间、资源瀑布流。

4. curl 查看响应头

你可以使用：

curl -I https://example.com

重点查看：

CF-Cache-Status
Cache-Control
Accept-Encoding
Server

常见 CF-Cache-Status 说明：

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

1. 开启 Cloudflare 后网站打不开

优先检查：

• DNS 记录是否正确；
• 源站 IP 是否填写错误；
• SSL 模式是否选择不当；
• 源站是否限制了 Cloudflare IP；
• 防火墙是否误拦截 Cloudflare 节点。

2. 出现重定向循环

常见原因是 SSL 模式设置为 Flexible，而源站又强制 HTTPS。

解决方法：

SSL/TLS → Overview → Full 或 Full (strict)

同时确认源站 SSL 证书有效。

3. 后台登录异常

可能是后台页面被缓存了。

解决方法：

为以下路径设置绕过缓存：

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

4. 修改网站后前端不更新

原因通常是缓存过长。

解决方法：

1. 在 Cloudflare 面板中清理缓存；
2. 静态资源使用版本号或 hash；
3. 缩短 HTML 的缓存时间；
4. 保持 CSS、JS 文件名随构建变化。

5. API 返回旧数据

API 不建议缓存，尤其是涉及用户状态的数据。

建议为 API 路径设置：

Cache Level：Bypass

或在源站响应头中添加：

Cache-Control: no-store, no-cache, must-revalidate

十三、推荐配置总结

如果你想快速完成一套稳定配置，可以参考以下方案：

十四、最佳实践建议

Cloudflare 优化不是简单地“全部开启”，而是要根据网站类型进行调整。

静态博客

推荐：

• 缓存 HTML；
• 静态资源长缓存；
• 开启 Brotli；
• 开启 HTTP/3；
• 图片使用 WebP；
• 使用 Cache Rules 缓存全站。

WordPress 网站

推荐：

• 后台和登录页绕过缓存；
• 静态资源长缓存；
• 首页可短时间缓存；
• 配合缓存插件；
• 避免缓存用户登录状态页面。

API 服务

推荐：

• 不缓存动态 API；
• 对公开 GET API 可短缓存；
• 开启 WAF；
• 使用 Rate Limiting；
• 配置 CORS 和安全响应头。

企业官网

推荐：

• 图片优化；
• 静态资源长缓存；
• 页面短缓存；
• 开启安全策略；
• 定期测试全球访问速度。

十五、结语

Cloudflare 是一个非常强大的性能优化平台，但真正的优化效果取决于配置是否合理。对于大多数网站而言，接入 Cloudflare 后，开启 HTTPS、Brotli、HTTP/3、合理缓存静态资源、绕过后台和 API 缓存，就能获得明显的性能提升。

如果你希望更进一步，可以使用 Cloudflare API 编写自动化脚本，实现“一键部署”基础优化配置；也可以借助 Workers 在边缘节点实现更精细的缓存控制。

最后需要记住一点：性能优化不是一次性工作，而是持续迭代过程。每次调整 Cloudflare 配置后，都应该通过 Lighthouse、PageSpeed Insights、WebPageTest 和响应头检查工具进行验证。只有在测试数据支持下的优化，才是真正有效的优化。