Cache your way to peak performance and sustainability for dynamic and static Umbraco websites

Imran's not a massive lover of talks, showing off, or grand public displays. 

Fellow members of the Umbraco community will know that he'd prefer to go undercover as an alias than publish his shenanigans all over the web), but lately, a few things have cropped up that he’s felt are too good not to share.

His thoughts on this caching topic have since found their way into a community discussion at a local Umbraco London Meetup and now on Innerworks. We hope the seasoned developer and non-technical person can find something useful here to take away.

Imran encountered a minor bug on the homepage during a project for a not-for-profit client with a reasonably limited budget (typical in the not-for-profit sector). Of course, the bug was quickly resolved, but it was on that project that he began experimenting with cache. 

Then, he realized something that would help people far beyond this project: caching can achieve significantly more sustainable and cost-effective websites that mimic the effects of headless architecture (jamstack, etc.).

This method makes your site more eco-friendly without reinventing your site architecture and making a few simple tweaks using CloudFare to mimic [some of the] sustainability benefits of headless, static, or jamstack sites. My workaround reduced server load by 90% in a recent test!

To illustrate this point, we'll cover a bit of background.

The ideal site performance is fast, secure, content manageable, cost-efficient, sustainable and utilises the best modern technologies. So, let's look at the typical site setups and how they typically score on speed, security, performance, etc.

A static website is a type of website built using only HTML, CSS, and JavaScript. Serves the same content to all users and doesn't use a database or server-side scripting. Typically, static sites are:

• High Speed: Faster to serve up as the pages are already prebuilt

• Easy Hosting: No requirement for complex hosting architectures

• Secure: No calls to servers or databases on user requests

• Sustainable: Produces far fewer CPU cycles and emits less carbon.

• Cost Effective: Hosting on storage or basic hosting is much cheaper.

As good for the planet (and your pocket), they lack the seamless user experience and personalisation required in today's digital world. Here are a few common drawbacks:

• Unmanaged content: It is much harder to update site content

• More problematic personalisation: Everyone gets the same content

• More files: This can lead to more files as each page has its file

A site that generates pages in real-time, adapting to dynamic attributes. Making sure it serves up the latest content. Page content can change depending on the visitors' locations, past actions taken on the site, time zones, and more.

• Content manageable: Easy to update the site's content

• Easy personalisation: Can dynamically still personalised content depending on the user

• Easy templating: Less physical files as only templates/views are required

• Slower: Has to build and compile before serving page
• Intrusive: Has to make calls to the database and other protected resources.
• Less sustainable: Produces far more CPU cycles and, therefore, emits more carbon
• Pricier: Usually costs more for extra resources and higher power apps.

The static approach clearly has more benefits than the dynamic approach, but what about all-important content management and personalisation?

As you can see from the above, the static approach leaps and bounds ahead of the dynamic approach in terms of cost, environment, speed, etc. But what about content management, personalisation and easy templating? Any business that wants to move with the times needs these elements. 

To bring the best of both static and dynamic, most businesses opt for a hybrid approach.

The hybrid solution allows you to to experience all the benefits of a static site approach (remember, fast, secure, sustainable, and easily updatable), use methodology and tools like JAMstack, AstroJS, Hugo, etc, AND a great content management approach. Voila. 

End of the blog, we have our answer, right? 

Maybe not.

Rebuilding an existing site to work in this approach will take time and money.

If money and time are not factors, then the hybrid model might be best. However, without the luxury of time and budget, we may have to explore better workarounds…

What is CloudFlare?

CloudFlare is like a giant internet storage warehouse.

The infrastructure and security company enhances website performance by globally caching (or storing) content. 

https://www.cloudflare.com/en-gb/learning/cdn/what-is-a-cdn/

Because CloudFlare has loads of servers spread across the globe, websites that use CloudFlare can grab the data they need from a nearby server instead of travelling millions of miles to a far-away land, reducing the distance the data travels and making the website faster! This improves user experience and leads to cost savings, sustainability, and environmental benefits by reducing the need for long-distance data journeys.

CloudFlare's advantages in enhancing website performance and security are clear. 

Its global content distribution network reduces load time for website requests from everywhere. CloudFlare can manage up to 700,000 user requests weekly. It caches website elements for static and dynamic sites, keeping them fast even as content changes. 

Additionally, it offers extra features to boost performance. For example, this could help a company running an online marketing campaign ensure their website stays fast and reliable, even with a high volume of visitors.

Yes. But we still have one all-important issue: content management! 

You need to clear stored data when managing website content because it ensures that any changes made to the website are reflected accurately so that users see the most up-to-date information.

CloudFlare's cache rules, or “storage rules” allow you to specify which resources should be stored and for how long. With CloudFlare, you can choose to “purge all cache” or ‘purge specific cache” on a website page (or node).

Purging just means clearing out stored website data, like cleaning a closet. In this context purging all cache clears out your entire wardrobe, and purging specific caches just throws out your shoes.

However, purging all cache [when a page changes] can be slow and inefficient. 

When the website updates everything in its memory, even things that haven't changed, it can slow down for a little while, but making rules in CloudFlare to handle these specific content changes, like updating the menu or names, can take time and requires precise logic.

Cogworks.CogFlare is a powerful tool that automates purging (clearing out) the CloudFlare cache. 

Users can easily configure the settings to select specific [pages] nodes for cache purging, ensuring efficient management of cached content.

Cogworks.CogFlare is a tool that helps make your site more performant and sustainable while ensuring you always serve up the latest content.

Under the hood, the package identifies when pages have content changes and then instructs CloudFlare's services to remove any cached version of that page so that the new content can be rendered and cached.

 This works best with a strict caching policy on CloudFlare's cache rules configuration for your site.  A full caching setup can work together with HTML caching and assets like CSS, JS, fonts, and images.

If the cache options are set to cache everything fully, your site will see the most benefits from the package!

And the best part is it’s free to use!

When we implemented Cogworks.CogFlare on projects with an efficient CloudFlare caching policy, we observed an average reduction of 90% in server load. This demonstrates the package's effectiveness in optimising website performance.

Everyone using Umbraco must know how a simple method can positively impact your pocket and, most importantly, our planet. 

Cogworks.CogFlare works well with a solid caching policy and revolutionises website performance and sustainability by automating CloudFlare cache purging. This transformative tool bolsters website stability and speed and marks a significant stride towards environmental sustainability. 

By significantly reducing server load, Cogworks.CogFlare has demonstrated the potential to cut server load by 90% in tests, offering a cost-effective approach to improving operational efficiency without requiring extensive website rebuilds.

Embracing Cogworks.CogFlare can help you with cost savings alongside enhanced performance, making it a pivotal tool in its journey towards a greener, more efficient digital presence.