DA David M. Auble Let's talk

Cloudflare PageSpeed Optimization Guide

This document outlines the recommended Cloudflare configuration settings to maximize PageSpeed Insights scores for davidauble.com.

Speed Settings

Auto Minify

Path: Speed > Optimization > Content Optimization > Auto Minify

Enable minification for:

Impact: Reduces file sizes by removing unnecessary characters, improving load times.

Brotli Compression

Path: Speed > Optimization > Content Optimization > Brotli

Impact: Provides better compression than gzip (typically 15-25% smaller), significantly reducing bandwidth and improving load times.

Rocket Loader™

Path: Speed > Optimization > Content Optimization > Rocket Loader

Impact: Asynchronously loads JavaScript to prevent render-blocking. Note: May cause issues with some scripts. Test thoroughly before enabling in production.

Recommendation: Start with this OFF and enable only if needed, as the site already has async Google Analytics.

Early Hints

Path: Speed > Optimization > Content Optimization > Early Hints

Impact: Sends HTTP 103 Early Hints to browsers before the full response, allowing browsers to preload critical resources like fonts and CSS earlier.

Image Optimization

Polish

Path: Speed > Optimization > Image Optimization > Polish

Options:

Impact: Automatically optimizes images served through Cloudflare. Since we’ve already created WebP versions locally, Lossy mode can provide additional optimization with minimal visual impact.

Mirage

Path: Speed > Optimization > Image Optimization > Mirage

Impact: Automatically resizes images based on device and network conditions, lazy-loads images outside viewport.

Caching Configuration

Browser Cache TTL

Path: Caching > Configuration > Browser Cache TTL

Impact: Instructs browsers how long to cache static resources locally.

Caching Level

Path: Caching > Configuration > Caching Level

Impact: Determines which resources Cloudflare caches. Standard mode caches static files.

Path: Caching > Cache Rules

Create custom cache rules for different asset types:

Rule 1: Static Assets (High Priority)

Rule 2: HTML Pages

Security & Performance Headers

Transform Rules

Path: Rules > Transform Rules > HTTP Response Header Modification

Create a transform rule to add performance and security headers:

Rule Name: Add Performance Headers

When incoming requests match:

Then modify response header:

Add these headers:

X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()

Impact: Improves security score on PageSpeed Insights and adds modern browser hardening headers.

Network Settings

HTTP/2

Path: Network > HTTP/2

Impact: Allows multiplexing of requests, reducing latency.

HTTP/3 (with QUIC)

Path: Network > HTTP/3 (with QUIC)

Impact: Next-generation protocol with improved performance, especially on lossy networks.

0-RTT Connection Resumption

Path: Network > 0-RTT Connection Resumption

Impact: Reduces connection time for returning visitors.

WebSockets

Path: Network > WebSockets

Impact: Required if using WebSocket connections (recommended to keep enabled).

Page Rules (Legacy - Optional)

If not using Cache Rules, create these Page Rules:

Page Rule 1: Cache Everything

Page Rule 2: Bypass Cache for Dynamic Content

DNS Settings

Cloudflare Proxy

Path: DNS

Ensure your DNS records have the orange cloud icon enabled (proxied through Cloudflare) for:

Impact: Routes traffic through Cloudflare’s network, enabling all optimization features.

Additional Recommendations

Enable Firewall Rules

Consider adding firewall rules to block bad bots and malicious traffic, which can improve server performance.

Monitor Analytics

Use Cloudflare Analytics to:

Purge Cache After Deployments

After deploying new code:

  1. Go to Caching > Configuration
  2. Click “Purge Everything” or selectively purge changed files
  3. This ensures users get the latest content

Expected Performance Gains

After implementing these optimizations, expect:

Testing & Validation

After applying these settings:

  1. Clear your browser cache completely
  2. Test with PageSpeed Insights:
    • https://pagespeed.web.dev/
    • Test both mobile and desktop
    • Test from different geographic locations if possible
  3. Monitor Cloudflare Analytics:
    • Cache hit ratio should be >95%
    • Bandwidth should decrease
    • Performance metrics should improve
  4. Check functionality:
    • Test all interactive elements
    • Verify forms work correctly
    • Ensure JavaScript functions properly (especially if using Rocket Loader)

Troubleshooting

If Rocket Loader causes issues:

If images don’t load:

If CSS/JS is broken:

Summary Checklist

Before going live with optimizations:

Support

For additional help: