---
name: webflow-china-speed
description: >
Webflow + Cloudflare Worker 中国大陆访问加速专项技能。当用户想要优化 Webflow 网站在中国大陆的访问速度时,必须使用此技能。
触发场景:用户提到 Webflow 网站速度慢、中国大陆无法访问、CF Worker 反向代理优化、Google 资源被屏蔽、Webflow CDN 加速、
字体加载慢、视频加载慢、jsdmirror 替换、R2 缓存、ICP 备案合规、EdgeOne 国内节点、双域名双 CDN 架构、DNS 地理分流、
多项目扩展、Geo-DNS、华为云 DNS、腾讯 EdgeOne、大陆备案最小成本方案等话题。
即使用户只是问"我的 Webflow 网站在中国大陆很慢怎么办"也要触发。
---
# Webflow 网站中国大陆访问加速
解决 Webflow 网站在中国大陆打不开/极慢的问题。方案基于 Cloudflare Worker 反向代理,涉及多项操作:移除被墙的 Google 资源、jQuery 替换为国内镜像、静态资源缓存到 R2、CSS/视频/字体路径改写等。如需更彻底的加速(延迟降至 50-100ms),则需要 ICP 备案并接入腾讯 EdgeOne 国内节点。
---
## 前置条件确认
在开始前,先了解用户现有架构:
- **域名与 Webflow URL**:用户自定义域名是什么?原始 Webflow URL(*.webflow.io)是什么?
- **是否已有 CF Worker**:如果已有,让用户提供现有 Worker 代码;如果没有,需要从头建
- **是否已有 R2 Bucket**:R2 是持久化静态资源缓存的关键
- **CF Account ID**:部署 Worker 需要
- **网站特殊内容**:有没有视频背景、自定义字体、第三方 JS 库?
---
## 诊断清单:检测哪些资源有问题
在中国大陆,以下资源**必然**被屏蔽或严重降速:
| 资源类型 | 问题根源 | 影响 |
|---------|---------|------|
| Google Fonts (`fonts.googleapis.com`) | GFW 封锁 | 字体加载失败,页面渲染阻塞 |
| Google 相关 preconnect/dns-prefetch | DNS 解析超时 | 每次页面请求额外增加 2-5s |
| Google Analytics / gtag | GFW 封锁 | 统计失效(不阻塞渲染,但浪费连接) |
| WebFont Loader (`webfont.js`) | Google 相关 | 同 Google Fonts |
| Webflow CDN (Fastly + CloudFront) | 无大陆节点 | 静态资源从海外回源,RTT 高 |
| Webflow 注入的 jQuery (d3e54v103j8qbb.cloudfront.net) | CloudFront 无大陆节点 | 每次页面加载阻塞约 500ms-2s |
| 视频文件 (`.mp4`/`.webm`) | 无大陆 CDN 节点 | 视频无法起播,需要完整下载 |
**如何快速诊断**:用 `curl` 从国内 IP 测试关键资源,或让用户在国内打开浏览器 DevTools 的 Network 面板,按耗时排序。
---
## 架构方案
```
用户 (中国大陆)
↓
Cloudflare Worker (全球节点,含香港/日本/新加坡)
↓ 静态资源命中 R2 → 直接返回 (延迟极低)
↓ 静态资源未命中 → 回源 Webflow CDN → 异步写入 R2
↓ HTML/动态请求 → 回源 Webflow → HTMLRewriter 改写后返回
↓
shenye.webflow.io(原始 Webflow 站点)
```
**关键路径**:
- `/_cdn/{host}/{path}` — 所有 Webflow 静态资源的 R2 缓存路由
- HTMLRewriter — 流式改写 HTML,替换/删除被墙资源链接,无需等待完整 HTML
- R2 Bucket — 永久缓存静态资源(字体、图片、JS、视频),冷启动后无需再回源
---
## 10 项核心优化(已验证)
### [优化 1] HTML 响应加缓存头 + CF 边缘 cacheTtl
**问题**:Webflow 默认返回的 HTML 无缓存头,CF 每次都回源,大陆用户每次都经历完整 RTT。
**方案**:给 HTML 响应加 `cache-control: public, max-age=300, s-maxage=300`,同时在 `fetch()` 里设 `cacheTtl: 300`,让 CF 边缘节点缓存 5 分钟。
**注意**:要 `delete("set-cookie")` 避免带 cookie 的响应被缓存后污染其他用户。
### [优化 2] 移除 Google preconnect / dns-prefetch / gstatic 标签
**问题**:即使不加载 Google Fonts,HTML 里残留的 `` 等标签也会让浏览器发起 DNS 查询,在大陆超时后才放弃,消耗 2-5s。
**方案**:用 HTMLRewriter 移除所有 `href` 含 `google` 或 `gstatic` 的 `preconnect`/`dns-prefetch` 标签,以及直接指向 `fonts.googleapis.com`/`fonts.gstatic.com` 的 `` 标签。
### [优化 3] CSS 内 @import fonts.googleapis.com 过滤
**问题**:Webflow 有时会把 Google Fonts 的 `@import` 放进 CSS 文件里(而非 HTML ``),HTMLRewriter 无法处理 CSS 内容。
**方案**:对 `text/css` 响应做文本替换,用正则删除所有 `@import url(...)` 中含 `fonts.googleapis.com` 的行。
### [优化 4] R2 objectKey 包含 query string
**问题**:某些静态资源 URL 带有版本参数(如 `?v=xxx`),如果 R2 key 只用路径,不同版本会映射到同一个 key,导致缓存错乱。
**方案**:objectKey 格式为 `assets/{host}/{path}_{base64(queryString)}`,有 query 时包含编码后的 query 部分。
### [优化 5] jQuery 直接替换为 jsdmirror
**背景**:Webflow 在所有网站的 `