Cache busting (Was: Some questions/remarks after viewing the source code)

[bnijenhuis]

Not sure where to put this, so I figured this was the best place (because 'Discussions' isn't used). I was just looking at the source code of the homepage, and I have some questions:

• [x] The alternate link meta-tag is incorrect (just redirects to the same page, instead of the EN page): <link rel="alternate" hreflang="en-US" href="/">;
• [x] Why are the fonts loaded inline in the head? They are in the CSS as well;
• [x] Why is an random string added to the CSS link with JS? This is bypassing the cache (if I read it correctly).
• [ ] If it's for forcing a reload of the CSS if there was a change, there's a better way of doing that (wrote about it on https://bnijenhuis.nl/notes/cache-busting-in-eleventy/)
• [ ] Why are all the clippaths in the HTML?

To be clear, this is not meant as criticism, although it could come over as such. I haven't been involved in implementing everything, so it's not my place to criticize, but I was just wondering what the reasoning is behind some choices. Or maybe it was just overlooked.

[anneke]

Hey Bernard, not taking it as criticism (of the bad kind), we just want a good end product! If you see anything funny that you know how to fix, your help is very welcome!

• the alternate link is a puzzle for internationalisation, I'll take a look.
• I think the fonts were in the head for prefetching. If they can go, they can go! PR's welcome!
• The cache busting attempt was from me being frustrated yesterday, but I will look at your blogpost!
• The clippaths are in the HTML as SVG 'sprite', at the time it seemed easier :) It's been four years cough

[anneke]

@bnijenhuis Can you check this for me? :) https://github.com/fronteers/website/pull/383

[SleeplessByte]

If you want the font to preload, they cannot go. The cache busting thing is causing a FOUC. Disabling JavaScript fixes this.

[bnijenhuis]

@SleeplessByte The -tags for the fonts should handle the preload, right? Not an inline style with the font declarations? Correct me if I'm wrong.

The cache busting thing is (as I understand) a temporary JS "hack", and is going to be replaced or removed.

[SleeplessByte]

@bnijenhuis do you mean the @font-face declarations? No those do not preload the font. Only <link rel="preload"> (or Link headers) can preload fonts.