Try our conversational search powered by Generative AI!

Modifying caching policy on optimised CMS Images

Vote:
 

I am using the image optimisation package Baaijte.Optimizely.ImageSharp.Web where it specifically states on Github "DO NOT add other SixLabors.ImageSharp.Web settings!!".

I wish to modify the BrowserMaxAge to cache optimised CMS images for 1 year.  Are there any concerns on this?

https://docs.sixlabors.com/articles/imagesharp.web/gettingstarted.html#setup-and-configuration

#306492
Aug 09, 2023 10:05
Vote:
 

Hi Jeremy,

While I don't see any immediate issue with adding the settings (not sure if that is just for initial setup and configuration), would you not alternatively consider using the static file middleware to modify the headers upon images?

https://andrewlock.net/adding-cache-control-headers-to-static-files-in-asp-net-core/

This would be a more asp.net core approach and would not rely on the sixlabors package.

Alternatively you could enroll in the optimizely edge rendering image beta program and then you can render images at the edge.

https://www.optimizely.com/beta

Thanks

Paul

#306504
Aug 09, 2023 13:19
Vote:
 

You can set the caching headers for resized images when you call AddImageSharp within the startup.cs:

serviceCollection.AddImageSharp(options =>
                 {
                     options.OnPrepareResponseAsync = (context) =>
                     {
                         context.Response.Headers.CacheControl = new CacheControlHeaderValue
                         {
                             Public = true,
                             MaxAge = TimeSpan.FromDays(365)
                         }.ToString();
                         return Task.CompletedTask;
                     };
                 })
                 .Configure<AzureBlobStorageCacheOptions>(options =>
                 {
                     options.ConnectionString = connectionString;
                     options.ContainerName = containerName;
                 })
                 .ClearProviders()
                 .AddProvider<BlobImageProvider>()
                 .SetCache<AzureBlobStorageCache>();
#306508
Aug 09, 2023 15:28
Vote:
 

Thanks Paul and Mark.

Mark, I like this approach for appending headers on optimised images.  I was wondering on the best approach for media served from globalassets or contentassets folders that hasn't been optimised using ImageSharp library.  As these folders are served outside of web root and are dynamically created we can't use the the PhysicalFileProvider (as the folder doesn't exist at runtime).

#307281
Aug 22, 2023 10:11
Vote:
 

Hi Jeremy

For images which haven't gone through the resizing logic, you can set the cache duration directly in the appsettings.json as per this article: https://docs.developers.optimizely.com/content-management-system/docs/configuring-cms

    "EPiServer": {
        "Cms": {
            "Media": {
                "CacheControl": "public, max-age=31536000",
                "ExpirationTime": "365.00:00:00"
            }
        },

You will also want your static JS / CSS files to cache too, but you do this by adding a CacheControl to the UseStaticFiles service extension:

        app.UseStaticFiles(new StaticFileOptions
        {
            OnPrepareResponse = ctx =>
            {
                ctx.Context.Response.Headers.CacheControl = new CacheControlHeaderValue
                {
                    Public = true,
                    MaxAge = TimeSpan.FromDays(365)
                }.ToString();
            }
        });
#307282
Edited, Aug 22, 2023 11:10
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.