Cloudflare 性能优化教程｜零基础可学

在网站运营中，“速度”往往决定了用户体验、搜索引擎排名以及转化率。一个打开缓慢的网站，即使内容再好，也可能让用户在几秒钟内离开。对于个人博客、企业官网、跨境电商网站、SaaS 平台来说，提升访问速度都是非常重要的一环。

Cloudflare 是目前非常流行的全球 CDN、DNS、安全防护与性能优化平台。它可以帮助网站加速访问、抵御攻击、减少服务器压力，并提供丰富的缓存、压缩、图片优化、规则配置等功能。更重要的是，Cloudflare 提供免费套餐，零基础用户也可以上手使用。

本文将以零基础视角，系统讲解如何使用 Cloudflare 进行网站性能优化，帮助你从 DNS 接入、缓存设置、压缩优化、页面规则、图片优化到常见问题排查，逐步搭建一个更快、更稳定的网站访问环境。

一、Cloudflare 是什么？

Cloudflare 可以理解为位于用户和你网站服务器之间的一层“智能网络代理”。

当用户访问你的网站时，原本流程是：

用户浏览器 → 你的服务器 → 返回网页内容

接入 Cloudflare 后，流程变成：

用户浏览器 → Cloudflare 全球节点 → 你的服务器 → 返回网页内容

如果 Cloudflare 已经缓存了网站的静态资源，例如图片、CSS、JavaScript 文件，那么用户就可以直接从离自己最近的 Cloudflare 节点获取内容，而不必每次都访问你的源站服务器。

这样带来的好处包括：

1. 访问速度更快
   Cloudflare 在全球拥有大量数据中心，用户可以就近访问缓存资源。

2. 减轻源站压力
   静态资源由 Cloudflare 节点返回，服务器需要处理的请求数量减少。

3. 提高稳定性
   即使源站出现短暂问题，部分缓存内容仍然可能继续访问。

4. 增强安全性
   Cloudflare 可以过滤恶意流量、防御 DDoS 攻击、隐藏源站 IP。

5. 简化 DNS 管理
   Cloudflare 的 DNS 解析速度快，并支持灵活管理记录。

二、Cloudflare 适合哪些网站？

Cloudflare 适合绝大多数网站，尤其适合以下类型：

• WordPress 博客
• 企业官网
• 个人作品集网站
• 跨境电商网站
• SaaS 产品官网
• 文档站点
• 静态网站
• 海外访问较多的网站
• 源站带宽有限的网站

不过需要注意，如果你的网站主要面向中国大陆用户，Cloudflare 免费版在大陆访问速度不一定稳定。因为 Cloudflare 免费版节点在中国大陆没有直接优化线路，部分地区访问可能绕路。因此，如果你的用户主要在国内，可能需要结合国内 CDN、对象存储或服务器线路进行综合优化。

如果你的网站用户来自海外，Cloudflare 的加速效果通常比较明显。

三、接入 Cloudflare 前需要准备什么？

在正式接入之前，你需要准备以下内容：

1. 一个域名

例如：

example.com

你的域名需要能够修改 DNS 服务器，也就是可以在域名注册商后台修改 Nameserver。

2. 一个已经部署好的网站

比如你的网站已经可以通过域名访问，或者服务器 IP 已经部署好站点。

3. Cloudflare 账号

前往 Cloudflare 官网注册账号即可。免费套餐已经包含基础 CDN、DNS、安全防护、缓存、压缩等常用功能。

四、Cloudflare 接入网站流程

下面以零基础方式说明接入步骤。

第一步：添加站点

登录 Cloudflare 后，点击：

Add a site

输入你的域名，例如：

example.com

注意不要输入 https://，也不要输入路径，只输入根域名即可。

正确示例：

example.com

错误示例：

https://example.com
example.com/blog
www.example.com/post/1

第二步：选择套餐

Cloudflare 会让你选择套餐。新手可以直接选择 Free 免费套餐。

免费套餐已经可以满足大多数基础需求，包括：

• DNS 管理
• CDN 缓存
• 基础 DDoS 防护
• SSL/TLS
• 页面规则或规则功能
• 自动压缩
• Brotli 压缩
• HTTP/2、HTTP/3 支持

第三步：检查 DNS 记录

Cloudflare 会自动扫描你当前域名的 DNS 记录，例如：

你需要确认重要记录是否正确。

常见网站记录如下：

A    @      你的服务器 IP
A    www    你的服务器 IP

或者：

A        @      你的服务器 IP
CNAME    www    example.com

第四步：理解橙色云和灰色云

Cloudflare DNS 记录旁边会有一个云朵图标：

• 橙色云朵：启用 Cloudflare 代理/CDN
• 灰色云朵：仅 DNS 解析，不经过 Cloudflare

如果你希望网站流量经过 Cloudflare 加速，需要把网站相关记录设置为橙色云朵。

一般建议：

邮件相关记录不要随意开启代理，否则可能导致邮件收发异常。

第五步：修改域名 Nameserver

Cloudflare 会给你两个 Nameserver，例如：

lara.ns.cloudflare.com
mario.ns.cloudflare.com

你需要到域名注册商后台，把原来的 DNS 服务器修改为 Cloudflare 提供的这两个。

修改后等待生效，一般几分钟到数小时不等，最长可能 24-48 小时。

当 Cloudflare 显示站点状态为：

Active

说明接入成功。

五、SSL/TLS 设置：避免 HTTPS 错误

接入 Cloudflare 后，首先要检查 SSL/TLS 设置，否则可能出现打不开、重定向循环、证书错误等问题。

进入：

SSL/TLS → Overview

你会看到几种模式。

1. Off

关闭 HTTPS，不建议使用。

2. Flexible

用户到 Cloudflare 是 HTTPS，但 Cloudflare 到你的服务器是 HTTP。

这种模式看起来方便，但容易导致 WordPress 等网站出现无限重定向问题，不推荐长期使用。

3. Full

用户到 Cloudflare 是 HTTPS，Cloudflare 到源站也是 HTTPS，但不严格验证源站证书。

适合源站已经有 HTTPS，但证书可能不是权威机构签发的情况。

4. Full Strict

用户到 Cloudflare 是 HTTPS，Cloudflare 到源站也是 HTTPS，并严格验证源站证书。

这是最推荐的模式。

推荐设置

如果你的服务器已经配置了有效 SSL 证书，例如 Let's Encrypt 证书，建议使用：

Full (strict)

如果暂时没有证书，可以在 Cloudflare 生成 Origin Certificate 安装到源站，然后使用 Full Strict。

六、开启基础性能优化功能

进入 Cloudflare 后，可以从以下几个方面优化性能。

七、开启 Brotli 压缩

路径：

Speed → Optimization → Content Optimization → Brotli

将 Brotli 设置为开启。

Brotli 是一种高效压缩算法，可以压缩 HTML、CSS、JavaScript 等文本资源。相比传统 Gzip，Brotli 在很多情况下压缩率更高，可以减少文件体积，提高加载速度。

开启后，用户浏览器支持 Brotli 时，会自动使用 Brotli 压缩传输。

八、开启 Auto Minify 自动压缩

路径：

Speed → Optimization → Content Optimization → Auto Minify

可以选择压缩：

• JavaScript
• CSS
• HTML

Auto Minify 的作用是去除代码中的空格、换行、注释等不必要内容，从而减少文件大小。

建议

新手可以先开启：

CSS
HTML

JavaScript 是否开启需要视情况而定。部分网站的 JS 文件经过二次压缩后可能出现兼容问题。如果开启 JS Minify 后发现页面交互异常、菜单无法点击、轮播图失效，可以关闭 JavaScript 压缩。

九、开启 HTTP/2 和 HTTP/3

Cloudflare 默认支持 HTTP/2，很多情况下已经自动开启。

你可以在：

Network

中检查 HTTP/2、HTTP/3 相关选项。

HTTP/2 的作用

HTTP/2 支持多路复用，可以让浏览器更高效地加载多个资源，减少连接开销。

HTTP/3 的作用

HTTP/3 基于 QUIC 协议，理论上在高延迟、丢包环境中表现更好。对于移动网络用户、跨国访问场景可能有帮助。

建议开启：

HTTP/2：开启
HTTP/3：开启

十、缓存优化：Cloudflare 加速的核心

Cloudflare 的核心优势之一就是缓存。合理缓存可以大幅减少源站请求，提高页面加载速度。

1. 默认缓存行为

Cloudflare 默认主要缓存静态资源，例如：

• 图片：jpg、jpeg、png、gif、webp、svg
• CSS 文件
• JavaScript 文件
• 字体文件
• 视频片段
• PDF 等文件

默认情况下，HTML 页面通常不会被缓存，尤其是动态网站。

2. Browser Cache TTL

路径：

Caching → Configuration → Browser Cache TTL

Browser Cache TTL 指浏览器本地缓存时间。

建议设置为：

1 month

或者：

2 months

如果你的网站资源更新频繁，可以设置短一点，例如 7 天。

3. Caching Level

路径：

Caching → Configuration → Caching Level

建议设置：

Standard

Standard 是较稳妥的缓存等级，适合大多数网站。

4. Always Online

路径：

Caching → Configuration → Always Online

Always Online 可以在源站不可用时尝试提供缓存页面。

建议开启，但不要完全依赖它，因为不是所有页面都一定有缓存。

十一、缓存规则：让静态资源缓存更久

Cloudflare 新版更推荐使用 Cache Rules，而不是传统 Page Rules。

路径：

Rules → Cache Rules

你可以创建一条规则，让静态资源缓存更久。

示例：缓存图片、CSS、JS

规则条件可以设置为：

URI Path ends with .jpg
或
URI Path ends with .png
或
URI Path ends with .css
或
URI Path ends with .js

也可以使用表达式：

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

设置：

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

这样 Cloudflare 边缘节点和用户浏览器都会更长时间缓存这些静态资源。

十二、为整站 HTML 开启缓存：适合静态网站

如果你的网站是静态站点，例如 Hugo、Hexo、VuePress、Docusaurus、纯 HTML 页面，可以考虑缓存 HTML。

创建 Cache Rule：

Hostname equals example.com

设置：

Cache eligibility: Eligible for cache
Edge TTL: 1 hour 或 1 day

这样 HTML 页面也会被 Cloudflare 缓存，访问速度会明显提升。

但如果你是 WordPress、电商网站、会员系统、后台系统，不建议无脑缓存 HTML，否则可能出现：

• 登录状态错乱
• 购物车异常
• 评论提交后页面不更新
• 后台页面被缓存
• 用户看到其他人的个性化内容

动态网站要谨慎设置 HTML 缓存。

十三、WordPress 网站的 Cloudflare 优化建议

WordPress 是很多新手常用的网站程序。接入 Cloudflare 后，可以进行以下优化。

1. 后台和登录页不要缓存

WordPress 后台路径通常是：

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

应创建规则绕过缓存：

URI Path starts with /wp-admin

以及：

URI Path equals /wp-login.php

设置：

Cache eligibility: Bypass cache

2. 避免缓存预览页面和搜索页面

可根据实际情况绕过：

?s=
preview=true

否则可能导致搜索结果或文章预览显示异常。

3. 配合缓存插件

WordPress 可以配合插件使用，例如：

• WP Rocket
• LiteSpeed Cache
• W3 Total Cache
• FlyingPress
• Super Page Cache for Cloudflare

如果服务器是 LiteSpeed，建议使用 LiteSpeed Cache。
如果希望更好地联动 Cloudflare，可以考虑支持 Cloudflare API 清理缓存的插件。

4. 修改内容后清理缓存

如果你开启了页面缓存，发布文章或修改页面后，可能需要清理 Cloudflare 缓存。

路径：

Caching → Configuration → Purge Cache

可以选择：

Purge Everything

也可以只清理指定 URL。

十四、图片优化：减少页面体积

图片通常是网页中体积最大的资源。优化图片往往比压缩代码更有效。

1. 使用 WebP 或 AVIF

WebP 和 AVIF 是更现代的图片格式，通常比 JPG、PNG 更小。

Cloudflare 的部分高级图片功能可能需要付费，例如 Polish、Image Resizing。但即使不用付费功能，也可以自己在网站端优化图片。

建议：

• 上传前压缩图片
• 优先使用 WebP
• 避免上传过大的原图
• 缩略图按实际显示尺寸生成
• 首页不要加载太多大图

2. 开启 Lazy Load 懒加载

懒加载的作用是：用户滚动到图片附近时再加载图片。

这样可以减少首屏加载压力。

WordPress 新版本默认支持图片懒加载，也可以通过插件增强。

3. 控制图片尺寸

例如页面中只显示 800px 宽的图片，就不要上传 4000px 的原图直接展示。图片越大，加载越慢，也越浪费带宽。

十五、Rocket Loader 是否要开启？

路径：

Speed → Optimization → Content Optimization → Rocket Loader

Rocket Loader 的作用是优化 JavaScript 加载方式，尝试提升页面渲染速度。

但它也可能导致部分网站 JS 异常，例如：

• 按钮点击失效
• 表单无法提交
• 菜单无法展开
• 广告代码异常
• 统计代码延迟执行

建议

新手不建议一开始就开启 Rocket Loader。

如果你想测试，可以开启后检查：

• 首页是否正常
• 导航菜单是否正常
• 登录注册是否正常
• 表单是否正常
• 电商购物车是否正常
• 控制台是否报错

如果有异常，立即关闭。

十六、Early Hints：提升感知速度

Early Hints 是一种优化浏览器资源加载的技术，可以让浏览器更早知道需要加载哪些资源，从而提前建立连接或请求文件。

路径通常在：

Speed → Optimization

如果你的套餐或后台中可以看到 Early Hints，可以尝试开启。

它对部分网站有帮助，尤其是资源引用清晰的网站。不过效果因网站结构而异。

十七、DNS 优化：不要忽视解析速度

Cloudflare DNS 本身速度非常快，但你仍然需要合理管理 DNS 记录。

建议

1. 删除无用 DNS 记录
   不再使用的测试记录、旧服务器记录应及时删除。

2. 网站记录开启橙色云
   这样才能使用 Cloudflare CDN 和安全功能。

3. 邮件记录保持灰色云
   防止邮件服务异常。

4. 避免多个冲突记录
   例如同一个子域名同时配置多个错误的 A 记录或 CNAME。

5. 定期检查解析是否正确
   换服务器 IP 后，要及时更新 Cloudflare DNS。

十八、安全设置也会影响性能

Cloudflare 的安全防护很强，但如果设置过严，也可能影响用户访问体验。

1. Security Level

路径：

Security → Settings → Security Level

一般建议设置：

Medium

如果网站遭受攻击，可以临时提高到 High 或 Under Attack Mode。

2. Bot Fight Mode

Bot Fight Mode 可以拦截部分机器人流量，但也可能误伤某些正常爬虫或接口访问。

如果你的网站依赖：

• 搜索引擎抓取
• 第三方 API 回调
• 自动化监控
• 支付回调
• Webhook

开启后要仔细测试。

3. WAF 规则

Cloudflare 支持创建防火墙/WAF 规则。合理阻止恶意流量可以减少服务器压力，间接提升性能。

例如阻止明显恶意路径：

/wp-config.php
/.env
/adminer.php

这些路径经常被扫描，如果你的网站不需要，可以设置挑战或阻止。

十九、重定向优化：减少不必要跳转

网站访问慢，有时候不是 CDN 问题，而是跳转太多。

常见跳转链：

http://example.com
→ https://example.com
→ https://www.example.com
→ https://www.example.com/

每一次跳转都会增加时间。

建议统一一种访问形式

例如统一为：

https://www.example.com

或者：

https://example.com

不要同时混用。

可以在 Cloudflare 中使用 Redirect Rules 设置跳转，例如把非 www 跳转到 www，或把 www 跳转到非 www。

同时开启：

Always Use HTTPS

路径：

SSL/TLS → Edge Certificates → Always Use HTTPS

这样 HTTP 请求会自动跳转到 HTTPS。

二十、开启 HSTS 要谨慎

HSTS 可以强制浏览器使用 HTTPS，提高安全性，也可能减少后续访问中的 HTTP 跳转。

但它有风险：如果你的 HTTPS 配置错误，用户可能在一段时间内无法通过 HTTP 回退访问网站。

新手建议在确认 HTTPS 完全正常后，再考虑开启 HSTS，并且不要一开始就设置太长时间。

二十一、如何测试 Cloudflare 优化效果？

优化不是凭感觉，需要测试。

1. 使用浏览器开发者工具

打开网站，按 F12，进入 Network 面板，刷新页面，查看：

• 页面总加载时间
• 各资源大小
• 是否命中缓存
• 是否有 301/302 多次跳转
• 是否有资源加载失败
• 是否有大图片

查看响应头中是否有：

cf-cache-status: HIT

常见状态：

如果静态资源显示 HIT，说明 Cloudflare 缓存生效。

2. 使用 PageSpeed Insights

Google PageSpeed Insights 可以检查：

• LCP
• CLS
• INP
• 首屏加载速度
• 图片是否过大
• JS 是否阻塞
• CSS 是否阻塞

不过分数不是唯一目标。真实用户体验更重要。

3. 使用 WebPageTest

WebPageTest 可以选择不同地区测试网站速度，适合观察跨国访问表现。

4. 使用 GTmetrix

GTmetrix 可以分析页面结构、资源体积、请求数量和加载瀑布图。

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

问题一：接入 Cloudflare 后网站打不开

可能原因：

1. DNS 记录错误
2. 源站服务器防火墙阻止了 Cloudflare IP
3. SSL 模式设置错误
4. 源站本身无法访问

解决方法：

• 检查 A 记录是否指向正确服务器 IP
• 尝试把云朵临时改为灰色测试
• 检查服务器是否允许 Cloudflare IP 访问
• SSL 模式改为 Full 或 Full Strict
• 查看 Cloudflare 错误代码，例如 521、522、525

问题二：出现 521 错误

521 表示源站服务器拒绝了 Cloudflare 的连接。

常见原因：

• 服务器关闭
• Web 服务未运行
• 防火墙拦截 Cloudflare IP
• 安全软件封锁代理访问

解决方法：

• 检查 Nginx/Apache 是否运行
• 放行 Cloudflare IP 段
• 检查服务器安全组
• 查看服务器日志

问题三：出现 522 错误

522 表示 Cloudflare 连接源站超时。

常见原因：

• 源站响应太慢
• 网络连接异常
• 服务器负载过高
• 防火墙或路由问题

解决方法：

• 检查服务器 CPU、内存、带宽
• 优化源站程序
• 检查数据库性能
• 放行 Cloudflare IP
• 减少动态请求压力

问题四：HTTPS 出现重定向循环

常见于 SSL 模式设置为 Flexible，同时源站程序强制 HTTPS。

解决方法：

SSL/TLS 模式改为 Full 或 Full Strict

并确保源站已经配置 HTTPS 证书。

问题五：修改页面后不更新

原因通常是缓存未清理。

解决方法：

• 清理 Cloudflare 缓存
• 清理网站插件缓存
• 缩短 HTML 缓存时间
• 对后台、登录、预览页面设置 Bypass

二十三、推荐的新手 Cloudflare 配置清单

如果你是零基础用户，可以先按下面配置：

DNS

网站 A/CNAME 记录：橙色云
邮件相关记录：灰色云
删除无用记录

SSL/TLS

模式：Full Strict
Always Use HTTPS：开启
Automatic HTTPS Rewrites：开启

Speed

Brotli：开启
Auto Minify：开启 HTML、CSS，JS 谨慎
HTTP/2：开启
HTTP/3：开启
Rocket Loader：先关闭

Caching

Caching Level：Standard
Browser Cache TTL：1 month
Always Online：开启
静态资源 Cache Rule：缓存 1 month
动态页面：谨慎缓存

Security

Security Level：Medium
Under Attack Mode：平时关闭，攻击时临时开启
WAF：根据攻击情况配置

二十四、进阶优化思路

当你完成基础设置后，可以继续考虑以下进阶方向：

1. 使用 Cloudflare Workers

Workers 可以在 Cloudflare 边缘节点运行代码，用于：

• 自定义重定向
• 修改响应头
• A/B 测试
• 边缘缓存控制
• 简单接口代理

但 Workers 需要一定编程基础，新手可以后续再学习。

2. 使用 Cloudflare Pages

如果你的网站是静态网站，可以直接部署到 Cloudflare Pages。它适合：

• 个人博客
• 文档站
• 前端项目
• 静态官网

Cloudflare Pages 通常有不错的全球访问速度，并且部署流程简单。

3. 使用 R2 存储静态资源

Cloudflare R2 是对象存储服务，可以用来存储图片、下载文件、静态资源等。配合 CDN，可以降低源站压力。

4. 使用 Argo Smart Routing

Argo 是 Cloudflare 的智能路由服务，属于付费功能。它可以根据网络状况选择更优路径，提升跨区域访问速度。对于商业网站、跨境业务可能有价值。

二十五、性能优化不是只靠 Cloudflare

Cloudflare 很强，但它不是万能的。如果源站本身很慢，Cloudflare 只能缓解一部分问题。

你还需要关注：

1. 服务器性能
   CPU、内存、磁盘、带宽是否足够。

2. 网站程序优化
   是否存在慢查询、插件过多、代码低效。

3. 数据库优化
   WordPress、商城系统尤其依赖数据库性能。

4. 图片体积
   大图是最常见的拖慢因素。

5. 第三方脚本
   广告、统计、客服、社交插件都可能拖慢页面。

6. 请求数量
   页面资源越多，加载越复杂。

7. 首屏内容设计
   首屏不应加载过多轮播图、视频、大背景图。

Cloudflare 是性能优化链路中的重要一环，但最佳效果来自“CDN + 源站优化 + 前端优化 + 图片优化 + 缓存策略”的组合。

结语

Cloudflare 对新手非常友好，只要正确接入 DNS、配置 SSL、开启 Brotli、设置合理缓存、优化静态资源，就能明显改善网站访问速度并降低服务器压力。

对于零基础用户来说，建议不要一开始就开启所有高级功能，而是按照“先稳定、再加速、后进阶”的顺序进行：

接入 DNS → 配置 HTTPS → 开启基础压缩 → 设置静态资源缓存 → 测试效果 → 逐步优化

如果你的网站是静态网站，可以进一步缓存 HTML，甚至迁移到 Cloudflare Pages。
如果你的网站是 WordPress 或电商系统，则要特别注意登录页、后台、购物车、用户中心等动态页面不要被错误缓存。

记住一个原则：性能优化一定要边配置边测试。
每开启一个功能，都要检查页面是否正常、资源是否加载成功、缓存是否命中、用户操作是否受影响。这样才能既提升速度，又保证网站稳定运行。

通过本文的步骤，即使你没有 CDN 或服务器经验，也可以逐步完成 Cloudflare 的基础性能优化，让网站变得更快、更安全、更可靠。