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.

• Here is the link for the response caching.
  https://learn.microsoft.com/en-us/aspnet/core/performance/caching/middleware?view=aspnetcore-5.0

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 !!