Level 2 - Caching + Optimization

Features all of the Level 1 advantages, plus;

• Image optimizations like automatic WEBP conversion and resizing
• More specific caching control, so you can optimize different parts of your site differently
• Cache analytics to show you how it's performing

These translate into;

• Reports, you can see exactly what's happening.
• Performance. Image Optimization means a faster site particularly for mobile users.
• SEO. That optimized performance means likely better scores with Google Lighthouse and Core Web Vitals, which can improve your SEO rankings.  

Requirements;

• Cloudflare - PRO plan ( $20/mo )
• Cassette app - Free plan
• > May required the paid plan if you want multiple domains for the image optimization
• Image resizing - PRO plan
• > Image Resizing is a usage based product. You will be billed on the number of image resize requests performed. Your account includes 50,000 Image Resizing requests per month, after which Image Resizing will cost $9 per every 50,000 requests.

Enhanced Caching Strategy

In the PRO plan, you're have far more page rules, so we can be much more specific about how to handle different parts of your site.

A convenient way to think of your site is as;

• Homepage
• Other static pages like About and Contact Us
• Directory pages, like /blog, or /products, which
• CMS collection pages, such as individual blog articles, individual products, individual case studies

The important thing to consider here is "how often do these pages change after they're created?"

Note this is not the same as adding a new page. If you add a new blog article, it will be created as a new page which is not in the cache, and it will be seen immediately. If you edit an existing blog article, it will likely be cached and your changes will only be seen once the cache expires.

General Configuration

Speed > Optimization > Image Optimization

• Image Resizing ( PRO, usage-based ) - ON, any origin
• Polish ( PRO ) - ON ( Lossy, WebP )
• Mirage ( PRO ) - ON

Speed > Optimization > Protocol Optimization

• Enhanced HTTP/2 Prioritization ( PRO ) - ON

Recommended Page Rules

In the URLs where _DOMAIN is indicated, use your own custom base domain without the _www.

RULE 1: Ignore dynamic feeds ( /sitemap.xml & RSS )

URL - _{*DOMAIN/*.xml} ( e.g. _{*sygnal.com/*.xml} )

• Cache Level - Bypass

RULE 2: Cache assets ( Images )

URL - _{*assets.DOMAIN/*} ( e.g. _{*assets.sygnal.com/*} )

• Auto Minify - HTML, CSS
• Browser Cache TTL: 8 days
• Cache Level - Cache Everything
• Edge Cache TTL - a month
• Automatic HTTPS Rewrites - ON
• Opportunistic Encryption - ON
• Mirage ( PRO )- ON
• Polish ( PRO ) - Lossy

RULE 3+: Custom content rules

Here you'll create your specific rules for each set of pages you want to set distinct caching rules for.

Make sure to read up on how to set your URL wildcards to target the correct pages, for example, to target your _/blog static directory page you might use-

URL - _*DOMAIN/blog ( e.g. _{*sygnal.com/blog} )

But to target your blog article pages-

URL - _{*DOMAIN/blog/*} ( e.g. _{*sygnal.com/blog/*} )

Adapt RULE N, below. Primarily the difference will be the cache durations you use;

• Edge Cache TTL: ( depends on your needs )
• Browser Cache TTL: ( depends on your needs )

RULE N: Cache everything else

URL - _*DOMAIN/* ( e.g. _{*sygnal.com/*} )

• Auto Minify - HTML, CSS
• Browser Cache TTL: a day
• Cache Level - Cache Everything
• Edge Cache TTL - a day
• Automatic HTTPS Rewrites - ON
• Opportunistic Encryption - ON
• Mirage ( PRO )- ON
• Polish ( PRO ) - Lossy

Advanced Notes

Cassette is does not provide any special handling for the _/robots.txt file, and it appears to simply pass through the one from the S3 bucket.

In Webflow's case, this means a 403 Forbidden error;

_{https://assets-global.website-files.com/robots.txt}

Does this matter?

Perhaps. Ideally, we want all of our assets indexed on our site so there is potentially a benefit to having a robots.txt which allows all. Or failing that, a simple 404.

As I write this, I'm researching ways around this issue but it is difficult to find a configuration that can override the app's behavior of returning the 403.

If SEO is especially important to you, I'd consider Level 3 which replaces cassette with a custom worker that you can configure.