Image Headers - Resource should use cache busting but URL does not match configured patterns

user_1203146 0
Viewed 1497

According to Edge, some images have "issues" on them and the message I get is above and below is the headers for one of the images

accept-ranges: bytes
cache-control: immutable,max-age=31536000
content-length: 4374
content-type: image/webp
date: Thu, 18 Feb 2021 20:37:58 GMT
last-modified: Sun, 15 Nov 2020 12:32:57 GMT
strict-transport-security: max-age=31536000
x-content-type-options: nosniff
x-sourcefiles: =?UTF-8?B?543548399583849823 (Ok, I changed this setting)

The link that Edge points to is :-

https://webhint.io/docs/user-guide/hints/hint-http-cache/?source=devtools

I did what they recommended for IIS :-

  <location path="mystatic">
<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" cacheControlCustom="immutable" />
  </staticContent>
</system.webServer>
</location>

I still get the error, I have no idea what the error/warning message means or how to fix, can anyone enlighten me?

iis asp.net
1 Answers

You could try to follow the belo steps:

<staticcontent>
  <clientcache cachecontrolmode="UseMaxAge" cachecontrolmaxage="365.00:00:00" />
</staticcontent>

This code allows browsers to automatically cache all static resources for 365 days.

use class that adds a fingerprint, or timestamp, to the URL of the static file.

using System; 
using System.IO; 
using System.Web; 
using System.Web.Caching; 
using System.Web.Hosting;

public class Fingerprint 
{ 
  public static string Tag(string rootRelativePath) 
  { 
    if (HttpRuntime.Cache[rootRelativePath] == null) 
    { 
      string absolute = HostingEnvironment.MapPath("~" + rootRelativePath);

      DateTime date = File.GetLastWriteTime(absolute); 
      int index = rootRelativePath.LastIndexOf('/');

      string result = rootRelativePath.Insert(index, "/v-" + date.Ticks); 
      HttpRuntime.Cache.Insert(rootRelativePath, result, new CacheDependency(absolute)); 
    }

      return HttpRuntime.Cache[rootRelativePath] as string; 
  } 
}

modify the references to the static files.

<link rel="stylesheet" href="<%=Fingerprint.Tag(" />content/site.css") %>" />

now it will look like below:

<link rel="stylesheet" href="/content/v-633332386847483941/site.css" />

Since the URL now has a reference to a non-existing folder, we need to make the webserver pretend it exists. We do that with URL rewriting.

<rewrite>
  <rules>
    <rule name="fingerprint">
      <match url="([\S]+)(/v-[0-9]+/)([\S]+)" />
      <action type="Rewrite" url="{R:1}/{R:3}" />
    </rule>
  </rules>
</rewrite>
user_111473460
Related