Optimization Question: CSS

[tracykev]

Trying to understand why this is happening in terms of performance with my Head file. I understand the impact on my single pages but not why the head which is just a text link would be so impacted.

 {{ $styles := resources.Get "css/main.css" }} 
    {{ $styles = $styles | resources.PostCSS (dict "inlineImports" true) }}
    {{ if hugo.IsProduction }}
      {{ $styles = $styles | minify }} 
    {{ end }}
    <link href="{{ $styles.Permalink }}" rel="stylesheet" />

Without the CSS Link tag being produced I get

With the CSS link tag uncommented I get

Any thoughts?

[jmooring]

As always, it would be really helpful if we had something to work with.

[tracykev]

I know but production repos have NDA content

I might be able to throw a demo site together just to showcase the issue at hand but was hoping there would be a quick solution/answer as to why

{{/*  <link href="{{ $styles.Permalink }}" rel="stylesheet" />  */}}

<link href="{{ $styles.Permalink }}" rel="stylesheet" />

would produce such drastic head duration differences. I recognize the Single.html will now be rendering styled content which makes sense but for just a change in href I could not for the life of me figure out why that would have such a drastic impact.

[jmooring]

When you invoke the .RelPermalink, .Permalink, or .Publish method on a resource, it is written to disk. Have you tried using partialCached instead of partial?

Without something to look at, I’m just guessing.

[tracykev]

@jmooring

When you invoke the .RelPermalink , .Permalink , or .Publish method on a resource, it is written to disk. Have you tried using partialCached instead of partial ?

Without something to look at, I’m just guessing.

Yea I did {{ partialCached “head.html” . }} which should cache it by language is my understanding.

[tracykev]

Ahh, so it is writing the tailwind css to disk every time the .RelPermalink is called which makes sense. Is there a way to do this once for the whole site then while still maintaining the rest of the head caching per language?

[jmooring]

Extract the CSS processing as a separate partial.

[tracykev]

Hmmm. The documentation on Partial Caching says

Note: Each Site (or language) has its own partialCached cache, so each site will execute a partial once.

So I’m not sure if that will actually improve anything since each language head file is already cached only once per site. Unless there is a way to cache at a higher level than that, I may have to move the css outside the Hugo project to squeak out that performance it seems. However in thinking about it I am going to go test if I can set a boolean flag somehow and then detect if the css has been created for the default language and reference that on each head.

As always @jmooring, thank you for your stellar knowledge of the system. I have learned so much from you in the past few months.