Optimize caching

[robinmetral]

Optimize caching:

• CDN caching (Cloudflare)
  • Defaults in Pages: https://developers.cloudflare.com/pages/platform/serving-pages/#caching-and-performance
  • 👉 Avoid setting custom page rules (✅ no custom page rules beyond the redirect from www to apex)
• Browser caching
  • Modify caching headers for given pages with _headers: https://developers.cloudflare.com/pages/platform/headers/ (or with a worker)
  • Strategy: (source)
  • Versioned assets (stylesheet, images?, js?) should be cached for 1 year (max duration): Cache-Control: max-age=31536000, immutable
    • ✅ Version stylesheet (manually for now)
    • ~Version other assets~ (won't do: will cache CSS and images forever, and version manually)
    • ✅ rewrite headers accordingly
  • Unversioned assets: don't have any at the moment, will manually clear the cache on Cloudflare if necessary
  • HTML: cache for e.g. 10 min: Cache-Control: max-age=600, must-revalidate (we don't need private because there's no personalization
    • ✅ rewrite headers accordingly
  • Test with https://redbot.org

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	872b5ef
Status:	✅  Deploy successful!
Preview URL:	https://4c3aa1b3.robinmetral.pages.dev

View logs

[robinmetral]

Results

Tested with WebPageTest on the last post page, to include static assets like images in addition to stylesheet.

• Paris in EC2
• Chrome
• 3G connection
• 3 runs, including repeat runs (second visit after closing/reopening the headless browser)

	Before	After
Optimization overview	Flags uncached static assets	All optimized
Plotted First Contentful Paint speed	First runs avg. 1000ms, repeat runs avg. 775ms	First runs avg. 1000ms, repeat runs avg. 50ms
First runs filmstrips
Repeat runs filmstrips	Loads HTML for 700ms	Instand load

Where the optimizations really shine is on repeat runs through HTML caching. A repeat run used to only cache static assets (for 4h, the Cloudflare default) but the HTML still had to be fetched because Cloudflare defaults to max-age:0. Caching HTML for 10 min basically means that a page reload load is instant (everything is cached).

Another improvement that isn't shown in tests is performance for a visitor coming back after 4 hours. Unless static, versioned assets have changed, only the HTML will be re-fetched while images and stylesheet will be pulled from the cache (like a repeat run in the "Before" scenario).