Is it okay to cache CSS and JavaScript files if my static site generator supports it?

General Web Dev
1

Hello,
I’m using GoHugo as a static site generator, but I thought I wouldn’t ask on their forum because my question is less about Hugo itself and more about how it could affect the functionality of the page. There is a file named “js.html” whose only purpose is to load the main JavaScript file, and it looks like this:

{{ $js := resources.Get "js/script.js" -}}
<script src="{{ $js.Permalink }}" defer></script>

This file can be marked to be cached, so the static site generator will only reload it if it has been modified I think. According to the official documentation, this is typically used for sections like headers (separate headers.html file) and footers (separate footer.html file) since they don’t change often. However, I recently encountered a Hugo theme where both files that load up JavaScript (js.html) and CSS (css.html) were also cached.

I’m wondering if this is okay, or if I should avoid this caching at all costs. Perhaps you’ve worked with a static site generator, CMS, or something similar and encountered this. I would really appreciate any feedback you might have.

Another thing I suspect might be using up resources is the loading of external Google Fonts, which aren’t currently cached.

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

I’m wondering if these font declarations would be suitable candidates for caching. If so, I plan to move them to a separate fonts.html file. The idea is that GoHugo can only cache files that are separated out, which are referred to as partials, like building blocks that make up the entire site. These partials are called from a main template file, where I can decide which ones should be cached and which should not.

2

Caching is a very good thing for “static” content IMO.

No, but I prefer static sites without Hugo (just Go) over CMS

You can download the Google fonts to your own server (lower latency) and skip downloading via internet (https://).

3

From the documentation it reads as if caching is only used at build time, meaning when Gohugo is running to convert your sources to HTML. After that, there is no difference to your visitors whether you’ve used caching or not.

The point of caching, according to their documentation, is that it can help to render complex templates only once and re-use the result if it needs to be rendered again, rather than rendering it multiple times, thus saving time.

With that in mind, I don’t think what you’re caching now will make any noticeable difference.

1 Like
4

You can download the Google fonts to your own server (lower latency) and skip downloading via internet (https://).

I checked the link, but the download option for the WOFF files appears to be broken. I can’t find a download option on the Google Fonts page.

UPDATE: Okay, I just found out their download page moved to https://gwfh.mranftl.com

5

Or test https://fonts.google.com

6

Thank you. I prefer using the woff2 which Google doesn’t provide.