Try our conversational search powered by Generative AI!

PuneetGarg
May 16, 2023
  2010
(5 votes)

Output Cache Options in Optimizely CMS 12

Let's start with the basics what is Output Caching?

Output Cache is a feature that allows you to store the rendered output of a webpage in memory or on disk, so subsequent requests for the same page can be served directly from the cache without executing the entire page rendering process again. This helps to improve the performance and scalability of your website.

  • Before CMS 12 output caching was inbuilt but it got cut off in cut off in September 2021.
  • However, Optimizely CMS provides caching mechanisms at various levels to optimize performance. Here are some examples:
    • Fragment Caching
    • Response caching 
    • Block Caching
  • If you are on DXP  use CDN ( Content Delivery Network )

Fragment Caching:-

Fragment caching can be implemented to improve the performance of your website by caching specific parts or fragments of a page.

Example (Generic):-

  • Identify the dynamic content within your page or user control that you want to cache. Let's assume you have a dynamic content block that displays the current date and time.

  • Wrap the dynamic content with the CachedFragment control. This control defines the portion of content that will be cached. Here's an example:
    @using EPiServer.Web.Mvc.Html
    @using System.Web.Mvc.Html
    
    @{
        var cacheKey = "FragmentCacheKey";
        var cacheDuration = new TimeSpan(0, 10, 0); // Cache for 10 minutes
    }
    
    @Html.Cache(cacheKey, cacheDuration, () =>
    {
        // Content to cache goes here
        <div>
            <!-- Your fragment content -->
        </div>
    })
    
  • Save your page or user control. The dynamic content wrapped in the CachedFragment control will now be cached for subsequent requests within the specified duration.

Block Caching:-

  • Use the Block Caching feature to cache individual blocks and serve their rendered output directly from the cache on subsequent request
  • Here's an example of how to use Block Caching:
    • Identify the block type that you want to cache. Let's assume you have a block type called MyBlock that represents a frequently accessed block.

    • Add the [Cache] attribute to your block class, specifying the caching duration in seconds. Here's an example:

      [Cache(Duration = 3600)] // Cache duration of 3600 seconds (1 hour)
      public class MyBlock : BlockData
      {
          // Block properties
      }
      
    • Use the MyBlock in your page or content area. The first request to render the page will generate the block's output, and it will be cached. Subsequent requests within the caching duration will retrieve the cached output instead of executing the block's code again.

Note:- block cache does not automatically invalidate when you publish content. By default, the block cache is not tied to the publishing process

Response caching 

Response caching to cache the entire output of a specific action or controller, improving the performance and reducing the load on your server.

  • Adding response caching may cause a stale response to be delivered.
    using Microsoft.AspNetCore.Mvc;
    
    [ResponseCache(Duration = 3600)] // Cache for 1 hour
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            // Action logic goes here
            return View();
        }
    }
    
  • Using response caching may cause contents to not update instantly after publishing from CMS, and causes differences among web instances of a load-balanced environment.
    Response caching should not be used if you have Html.RenderEPiServerQuickNavigatorAsync() in Razor view.

CDN Caching

Purge CDN Cache clears cached content on server proxies so that visitors can get the latest page versions.

To configure a CDN (Content Delivery Network) with a DXP (Digital Experience Platform) account in Optimizely CMS 12, you'll need to follow these steps:

  • Choose a CDN provider: Select a CDN provider that suits your needs. Some popular CDN providers include Cloudflare, Akamai, Amazon CloudFront, and Fastly.

  • Set up CDN with your provider: Sign up for a CDN service and follow their instructions to configure the CDN. This typically involves creating a CDN distribution or configuring an existing one. Refer to your CDN provider's documentation for detailed instructions.

  • Obtain CDN URL: Once your CDN is set up, you will be provided with a CDN URL or endpoint that you can use to serve your static assets.

  • Update DXP configuration: In your Optimizely DXP account, you need to update the configuration to use the CDN for serving static assets. This involves modifying the web.config file in your DXP solution.

    a. Access your DXP solution's web.config file.

    b. Locate the <episerver.staticContent> section and add the following configuration to use the CDN URL:

    <episerver.staticContent> <clientResources baseUrl="https://yourcdnurl.com" /> </episerver.staticContent>

    Replace https://yourcdnurl.com with the base URL of your CDN.

  • Verify CDN integration: After saving the web. config changes, deploy, and test your DXP solution to ensure that the static assets are being served through the CDN. Inspect the source code of your web pages and confirm that the URLs of the static assets are now pointing to the CDN domain.

Here's an example of how you can configure CDN caching with Optimizely CMS 12 using a popular CDN provider, Cloudflare:

  • Enable CDN support: Sign up for a Cloudflare account and follow their setup instructions to configure your Optimizely CMS 12 website to work with Cloudflare as your CDN. This typically involves updating your DNS settings to point your domain to Cloudflare's servers.

  • Configure caching headers in Optimizely CMS 12: In the Optimizely CMS 12 administration interface, navigate to the "Admin" section and go to "Configurations". Select "Manage Websites" and choose your website. Under the "Site Settings" tab, look for the "Static files" section.

    Set the appropriate caching headers for your static files. For example, you can set the "Cache-Control" header to public, max-age=86400 to cache static files for 24 hours.

  • Verify CDN caching: After configuring the caching headers, you can verify that CDN caching is working by checking the caching headers returned for your assets. You can use browser developer tools or tools like cURL or Postman to inspect the response headers.

    For example, you can run the following cURL command to check the caching headers for a specific CSS file:

    curl -I https://www.example.com/css/style.css

    Look for the "Cache-Control" and "Expires" headers in the response to ensure they reflect the desired caching behavior.

  • Cache invalidation: Cloudflare provides several options for cache invalidation:

    • Manual cache invalidation: You can manually purge or clear specific URLs from the Cloudflare cache whenever the content is updated in Optimizely CMS 12. Cloudflare provides a RESTful API that allows you to make purge requests.

    • Versioning or fingerprinting: Modify the URLs of your assets whenever they change by appending a version number or fingerprint to the URL. For example:

      <link rel="stylesheet" href="https://www.example.com/css/style.css?v=2">

      This technique ensures that the updated asset is considered a new resource by the CDN cache, and it retrieves the latest version.

    • Time-based cache invalidation: Set shorter cache durations for specific assets that require frequent updates. For example, you can set a cache duration of max-age=300 (5 minutes) for a CSS file that frequently changes.

      Choose the appropriate cache invalidation strategy based on your content update frequency and requirements.

Remember to consult Cloudflare's documentation for specific instructions on cache invalidation methods and API usage.

By configuring CDN caching with Optimizely CMS 12 and Cloudflare, you can take advantage of CDN's edge caching to serve your static assets faster and reduce the load on your origin server.

Thank you for reading it !!

May 16, 2023

Comments

Sanjay Kumar
Sanjay Kumar May 16, 2023 11:20 AM

Nice article Puneet!

Tomas Hensrud Gulla
Tomas Hensrud Gulla May 19, 2023 06:12 AM

In Optimizely DXP, Coudflare is included. You do not need to sign up for a Cloudflare account yourself.

Thomas Schmidt
Thomas Schmidt May 19, 2023 07:03 AM

There was a very similar article here a few months ago and just like this one it was also mixing terms "output cache" and "response cache", those are not the same things at all

Only from .net 7+ can we actually use proper output caching, difference between output caching and response caching is also explained here: 
https://learn.microsoft.com/en-us/aspnet/core/performance/caching/overview?view=aspnetcore-7.0

Fragment caching I would recommend using cache taghelper instead of the html helper hacks.

Block caching example seems to be from old version of CMS, so not really valid anymore.

For CDN setup, cloudflare or others, I would recommend you either use the built in taghelpers that does the versioning for you with
<link href="..." rel="stylesheet" asp-append-version="true">
or
<script src="..." asp-append-version="true"></script>

and use expiry times of 1+ year for these files, they will be cache busted automatically by asp.net core if doing it like this. Could also be using a setup where webpack or vitejs or similar builds the FE files, including cache busting file names, same concept, here it is just FE build that ensure that files are cached busted when needed.

Tomas Hensrud Gulla
Tomas Hensrud Gulla May 19, 2023 08:19 AM

You CAN use output caching with .NET 6 too – you'll just have to take care of details like invalidating the cache yourself.

I have a quick blog post here. I don't think I'll recommend this for production use, yet...
https://www.gulla.net/en/blog/quick-and-dirty-output-cache-in-optimizely-cms12/

Praful Jangid
Praful Jangid May 22, 2023 10:56 AM

Well explained. Keep doing great work.

I would suggest if you could add references/links to the docs to read more about in depth.

Thanks for sharing.

Please login to comment.
Latest blogs
Change the IP HTTP Header used for geo-lookup in Application Insights

.

Johan Kronberg | Jun 10, 2024 | Syndicated blog

Copying property values

In this article I’d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts...

Grzegorz Wiecheć | Jun 8, 2024 | Syndicated blog

Auto-translate with OpenAI GPT-4o in Optimizely CMS

Improvements for Episerver.Labs.LanguageManager! It's now possible to auto-translate both a page and its children at the same time! Additionally, m...

Tomas Hensrud Gulla | Jun 7, 2024 | Syndicated blog

Upgrade To Optimizely CMS 12 Issue: List item fields have become Required

There are many funny details to be aware of when upgrading from Episerver CMS 11 to Optimizely CMS 12. One of them that might feel a bit confusing ...

Allan Thraen | Jun 7, 2024 | Syndicated blog