Proxying for Performance

A Reliable, Flexible Reverse Proxy, on Webflow

A huge thanks to Jakes van Eeden of Moon Milk Studio, who first introduced me to this incredibly straightforward and effective configuration approach for Cloudflare reverse proxies on Webflow.

Jakes' approach was unique from others I'd seen in that it directly addressed the SSL problem.

For the purposes of this course, everything here is designed specifically around this scenario;

• A Webflow-hosted site, as the origin server
• Cloudflare, as the reverse proxy

Proxying for Performance

The primary goals here are to;

• Maximize performance of your Webflow hosted site through caching & asset optimization.
• Minimize unnecessary traffic to Webflow's origin server, to stay within Webflow's hosting plan constraints;
• > Basic plan - 50 GB bandwidth, 250k visitors
• > CMS plan - 200 GB bandwidth, 250k visitors
• > Business plan - 400 GB bandwidth, 300k visitors

We break these down into levels, which are successively more complex and which provide progressively greater caching and performance gains.

Level 1

Requires: Cloudflare Free plan

• Caching of all webpages
• Caching of most image assets
• Zero cost- uses Cloudflare free plan only

Level 2

Requires: Cloudflare PRO plan ( $20/mo )

• Image optimizations like automatic WEBP conversion and resizing
• More specific caching control, so you can optimize different parts of your site differently

Level 3

Requires: Cloudflare PRO plan ( $20/mo )

• Expanded caching to include
• > Media srcset images
• > Possibly CSS-referenced images ( backgrounds )
• > Possibly JS-referenced images

Level 4

Requires: Cloudflare PRO plan ( $20/mo )

• Advanced optimizations
• Advanced tiered caching
• Not suitable for all sites ( test thoroughly )

Exploring

Whether some images, e.g. user-uploaded images, or CMS images, are served from a separate S3 bucket

In which case, we may need paid Cassette

‍