The Cloudflare AMP Optimizer is a Cloudflare Worker that will automatically optimize and cache any AMP pages & content from your origin so everyone can get the benefit of AMP optimized pages, not just users going through the AMP Cache.
See it in action at our live demo.
- Create your own Cloudflare Worker Repo using this as a template.
npx @cloudflare/wrangler generate my-worker https://github.com/ampproject/cloudflare-amp-optimizer
- Configure the routes in
wrangler.toml
. - Make any changes to
config.json
if needed (explanations below). - Publish!
npm run prod # calls wrangler publish --env=prod
If your origin is not CF backed, then you can only use the optimizer in reverse proxy mode. You may configure it via the proxy
option:
{
"proxy": {
"worker": "YOUR_WORKER_DOMAIN",
"origin": "YOUR_ORIGIN_DOMAIN"
}
}
An example configuration is available in @ampproject/amp-toolbox
Under the hood, cloudflare-amp-optimizer
utilizes the AMP Optimizer library. If you'd like to pass through configuration options to the underlying library, you may do so by adding it to the optimizer
key within config.json
. For example, to increase the hero image count from 2 to 5:
{
"optimizer": {
"maxHeroImageCount": 5
}
}
CloudFlare Workers have access to a fast, globally available cache. We highly recommend you enable this feature. In order to use it, add enableKVCache: true
to config.json
, as well as specify the bindings within the wrangler.toml
file. The binding must be named KV
.
kv_namespaces = [
{ binding = "KV", id = "YOUR_ID", preview_id="YOUR_PREVIEW_ID"}
]
To see an example, check out the demo's wrangler.toml file.
If you are a Business or Enterprise customer of Cloudflare, you may enable Cloudflare Image Optimizations. Just add enableCloudflareImageOptimization: true
to the config.json
file and images will be automatically optimized for multiple screen sizes.
Note: due to current limitations in workers.dev
, this does not yet work in reverse proxy mode.