Cloudflare Optimization Guide

Cloudflare sits between your visitors and your origin server as a reverse proxy. At a basic level it handles TLS termination, DNS resolution, and DDoS protection, but the real performance value comes from its caching and edge network. When configured well, most static requests never touch your server at all.

The optimization layers that matter most are:

• Edge caching — HTML, CSS, JS, and images served from the nearest data center.
• Compression — Brotli compressing text assets smaller than gzip ever could.
• Protocol upgrades — HTTP/3 over QUIC reducing connection setup time on mobile networks.
• Image and asset transformation — resizing and converting formats at the edge.

Each layer compounds. A cached, Brotli-compressed, HTTP/3-delivered page is dramatically cheaper for the browser to render than an uncached one. The goal is to push the origin hit ratio as high as safely possible.

Default Cloudflare caching only applies to a fixed list of static file extensions. If you want HTML pages cached at the edge, you need Cache Rules (the modern replacement for Page Rules). Set them deliberately.

A practical rule set looks like this:

• Cache everything for static asset paths (/wp-content/, /assets/) with a long Edge TTL.
• Bypass cache for logged-in users, admin paths, and cart or checkout URLs.
• Cache HTML only with short TTLs and stale-while-revalidate, so visitors never wait on a revalidation.
• Respect origin headers where your CMS already sets sensible Cache-Control values.

Watch your cache hit ratio in the analytics dashboard after every change. If it stays below 60% for static content, something in your rule order is wrong. Rules evaluate top-down, so put the most specific exceptions first.

Cloudflare's dashboard can be overwhelming. Focus on the settings that directly move Largest Contentful Paint and Interaction to Next Paint. Everything else is secondary.

• Brotli compression — turn on in Speed settings; it beats gzip by 15–20% on text assets.
• HTTP/3 and 0-RTT — reduces handshake round trips, especially on mobile.
• Early Hints — preloads critical resources before the HTML finishes streaming.
• Tiered Cache — increases hit ratio by caching across data centers.
• Polish and WebP conversion — automatically serves modern image formats at the edge.

Be cautious with Rocket Loader. It can improve paint times but occasionally breaks third-party scripts, so test it against your analytics and ad tags. Measure with real-user data (CrUX or RUM), not just lab scores.

Even with Polish and Auto Minify enabled, oversized source images remain one of the most common performance leaks. Cloudflare can transform images, but it can't invent quality that your origin never delivered efficiently. If you upload 4MB JPEGs, the edge still handles heavier objects and transformation queues get slower.

• Serve WebP instead of JPEG or PNG where supported.
• Compress source files in bulk before upload so the origin and edge cache stay lean.
• Set explicit width and height attributes to protect CLS.
• Use lazy loading below the fold, but never on your LCP hero image.

The most reliable fix is preprocessing: shrink and convert assets once, then let Cloudflare cache the smaller versions everywhere. Compression at the source saves bandwidth in both directions.