Materialdesign: No Cache TTL specified

[Berkmann18]

I've been trying to get a site to use a single icon and did this using the @font-face approach with src pointing to URLs like https://cdn.materialdesignicons.com/5.0.45/fonts/materialdesignicons-webfont.woff2?v=5.0.45.
The problem is that LightHouse shows that there's no Cache Time To Live info specified which ends up affecting the performance, as the browser has to pull the exact same copy of the 270KB+ of web fonts (which could be cached).

[Templarian]

@Berkmann18 What browser are you seeing it redownload the font in? Make sure you don't have your dev tools configured to clear cache.

I just checked latest Chrome/FF and it's working as expected.

[Berkmann18]

@Templarian Chromium I believe (I'm seeing this on a Lighthouse CI):

And it only happens with the web-fonts, all the other resources are cached properly it seems.

[Templarian]

If you're only using 1 icon definitely use SVG by the way. Actually you should never use the webfont, but that's another issue. 😄

I think this is a bug, there use to be a cache header coming from my CDN provider that gets appended when it mirrors the content.

@Berkmann18 Good find. Not sure what changed, but we'll get this fixed. It should basically cache forever as those assets are completely static and never change.

[Templarian]

This is a good thing last time I checked we were reaching 30TB a month. So hopefully this can help reduce that (we're capped at 40TB).

[Berkmann18]

@Templarian

If you're only using 1 icon definitely use SVG by the way. Actually you should never use the webfont, but that's another issue.

I was considering this, but I'm unsure how to easily programmatically (and dynamically) change its colour.
I was hoping in reducing the URLs called, but the standard MD stylesheet is bigger and I noticed having:

@font-face {
  font-family: "Material Design Icons";
  src: url("https://cdn.materialdesignicons.com/5.0.45/fonts/materialdesignicons-webfont.eot?v=5.0.45");
  src:
    url("https://cdn.materialdesignicons.com/5.0.45/fonts/materialdesignicons-webfont.woff2?v=5.0.45")
    format("woff2"),
    url("https://cdn.materialdesignicons.com/5.0.45/fonts/materialdesignicons-webfont.ttf?v=5.0.45")
    format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.mdi::before {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons", sans-serif;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mdi-hand-right::before {
  content: "\F0E47";
}

... would impact the startup performance less.
I guess I need to look deeper in how I can change that SVG from black<->red in JS and see if that works.

Good to know, it should have a long TTL.

This is a good thing last time I checked we were reaching 30TB a month. So hopefully this can help reduce that (we're capped at 40TB).

That definitely should.

[Templarian]

@Berkmann18 use fill="currentColor" it will then inherit the CSS color property. Then you can just use classes. Much cleaner than svg > path { fill: red } syntax.

<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>

[Berkmann18]

That significantly helped! Thank you.

[Templarian]

Lets keep this open until I have this fixed. 😉

[Berkmann18]

Sure thing :smile:.