Browser Acceleration

Learning Focus

By the end of this lesson you will understand how Cloudflare optimizes content for the user's browser using minification, modern compression, and prefetching.

Optimizing for the Browser

Cloudflare can modify your content on-the-fly to ensure it arrives in the smallest possible package and executes as fast as possible in the visitor's browser.

Feature	What it does	Benefit
Brotli	Modern compression (better than Gzip)	~20% smaller file sizes
Auto Minify	Removes whitespace/comments from JS, CSS, HTML	Faster parsing, smaller transfer
Rocket Loader	Defers JS execution until after page paint	Faster "First Contentful Paint"
Speed Brain	Prefetches pages the user is likely to visit	Instant page transitions

Brotli Compression

Brotli is a compression algorithm developed by Google that consistently outperforms Gzip for web assets (HTML, CSS, JS).

File Type	Gzip Ratio	Brotli Ratio	Improvement
JavaScript	3.5x	3.8x	~8%
CSS	4.2x	4.9x	~16%
HTML	6.5x	7.8x	~20%

Enable at: Speed → Optimization → Content Optimization → Brotli.

Auto Minify

Minification removes unnecessary characters from your source code (comments, newlines, extra spaces) without changing its functionality.

Original JavaScript

// This is a comment
function hello(name) {
    const greeting = "Hello, " + name;
    console.log(greeting);
}

Minified JavaScript

function hello(a){console.log("Hello, "+a)}

Enable at: Speed → Optimization → Content Optimization → Auto Minify (check JS, CSS, HTML).

Rocket Loader

Rocket Loader prioritizes your website's content (text, images, fonts) by deferring the loading and execution of all JavaScript until after the page has been rendered.

Use Cases:

• Legacy Sites: Sites with many heavy, non-critical scripts.
• Third-Party Bloat: Sites and ads that slow down the initial paint.

Warning

Rocket Loader can occasionally break complex JavaScript execution orders. If your interactive components stop working, disable Rocket Loader and use async or defer attributes on your script tags instead.

Speculative Prefetching (Speed Brain)

As covered in Module 3, Speed Brain uses the Speculation Rules API to download the next page before the user clicks a link. This makes the web feel instantaneous by removing the "wait" normally associated with clicking a link.

Enable at: Speed → Optimization → Content Optimization → Speed Brain.

Key Takeaways

• Brotli should always be enabled — it's objectively better than Gzip for the web.
• Auto Minify is a safe "set and forget" feature for most sites.
• Rocket Loader can drastically improve paint times but requires testing for JS compatibility.
• Use Speed Brain to achieve "instant" navigation for supported browsers (Chrome/Edge).

What's Next

• Continue to Strategy and Architecture to apply these optimizations to your production setup.