Order of file creation / Filenames of piped files

support
1

I could not find any way to define, in which order Hugo creates files.

The reason I am asking is, that I am thinking about preloading (or better using HTTP/2 server push) my stylesheet and javascript file.

The file itself (stylesheet/javascript) has a unique hash of some kind in it’s file name that I need to retrieve and then fill into my _headers file (I am using Netlify).

The file creation is happening when kind HTML is created, the header later on is done with it’s own kind.

Is there maybe a way to know what the hash in the filename will be? I guess not. That looks very random.

I also guess that Hugo is using multiple processes in parallel to go through file creation.

Is there any way to know the file name of a piped javascript file?

2

I would handle this as a post-Hugo build step. Probably with a script

3

I was afraid it would end this way :wink:

4

You could put the piping logic in a separate partial which then returns the resource:

layouts/partials/mainjs.html

{{ $jslibs := slice }}
{{ $libs := slice "js/algoliasearchLite.min.js" "js/instantsearch.production.min.js" "js/app.js" }}
{{ range $libs }}
{{ $jslibs = $jslibs | append (resources.Get . ) }}
{{ end }}
{{ $js := $jslibs | resources.Concat "js/main.js" }}
{{ $js = $js | minify | fingerprint "sha384" }}
{{ return $js }}

Then access the resource wherever you want

preloading script in the <head>

{{ with partial "mainjs.html" . }}
<link rel="preload" href="{{ .RelPermalink }}" as="script" crossorigin>
{{ end }}

sourcing script in the footer

{{ with partial "mainjs.html" . }}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" defer></script>
{{ end }}
3 Likes
5

Oh, I did not think about the link-rel-tag. That might be the solution. I was very focused on getting it into my _headers file because that one is parsed even before the first byte arrives at the client. But 50% faster is better than nothing I guess.

Now I only need to find out if Netlify is understanding a link-rel-preload tag as HTTP/2 server push tag. They should… hopefully. I’ll add a comment when I am through this.

6

index.headers

{{ with partial "mainjs.html" . }}
/
  Link: <{{ .RelPermalink }}>; rel=preload; as=script
{{ end }}

Of course you’d need a custom output format for the netlify headers file like e.g.

config.toml

# remove .{ext} from text/netlify
[mediaTypes."text/netlify"]
suffixes = [""]
delimiter = ""

# add output format for netlify _headers
[outputFormats.HEADERS]
mediatype = "text/netlify"
baseName = "_headers"
isPlainText = true
notAlternative = true
1 Like
7

waaiiiiiit… partials can return stuff? I’ll be testing that (tomorrow)… looks like the perfect solution to me.

8

@holehan 's tip is exellent, just a little remark: Since the stuff inside the partial is somewhat time consuming (relatively speaking), using partialCached here would probably be smart.

2 Likes
9

Note: If anyone is using this post to create their own headers file for Netlify: If loading your page brings up warnings about being loaded, but not used like the following:

A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

That’s because Netlify is using a CDN URL for the site’s assets. I am still looking into it, but it looks like it makes no sense to prefetch CSS, Fonts, JS as there is no option to disable the CDN URL (in the free version of Netlify).

10

@davidsneighbour I guess you need to disable asset optimization on your netlify project.

11

It is disabled for JS/CSS but still going to their CDN. That makes sense (for speed)… I think there might be a way to use some _headers-magic to still use the URL with some replacements… I wonder if they support regexpes in their header files.

The funny thing is that all “speed-test-tools” (GTMetrix for instance) now give me 100/100 as if it would be working. The site also feels faster. It just loads the js file and CSS file twice I think. I had no more font twitching since I used it. Even with the warnings - and I am using 5 different web font files.

I will probably try to put the website on an amazon or google cloud space to test this out.

About Netlify: as far as I understand it the CDN URL is a static one per website. So if I just replace URLs it might do the trick… I will need some time to play around with that.

12

@davidsneighbour As far as I can tell Netlify puts all assets on its CDN even if you partially disable minification/bundling for certain types. You need to skip all asset processing by checking “Disable asset optimization”. Been there, done that…

13

Thanks for the tip. I did that. I am optimizing JS and CSS in the pipes scripts and images as a node script after hugo does his thing… still 100/100 on gtmetrix without Netlifies help :slight_smile:
(and somehow faster page load than with Netlify DNS… maybe something i’ll check later on)

14

https://gtmetrix.com/reports/samui-samui.de/FU8V75KY