`partialCached` to Optimize Theme

support
1

I am working on designing a theme and am currently trying to optimize. I am having trouble wrapping my mind around partialCached, mostly if there is performance loss. For example, my pagination is different on every pages (list pages show page #s and single pages show the previous and next article).

Is there a difference in performance to have used partialCached when it wasn’t needed? I would assume so, but what is that threshold?

Next, I am using SCSS to build my stylesheet and its my biggest time culprit. My understanding is that Hugo builds in parallel, and if an object isn’t cached yet it goes ahead and begins the process for that page. Since it takes so much longer to process the SCSS, Hugo doesn’t have the time to cache it and thus processes it on the majority of the pages.

In this circumstance, does it even matter to use partialCached?

2

1st use the options –templateMetrics --templateMetricsHints and read the docs :wink:

there you get suggestions where to cache

2nd use partialCached where the partial will generate the always same code

3rd use dependency parameters

sample

<!DOCTYPE html>
<html lang={{ site.LanguageCode }} >
{{ $section := .Section | default "home" }}
{{ partial "meta.html" . }}
<body>
{{ partialCached "aside.html" . $section }}
{{ partialCached "navigation.html" . $section}}
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
</body>
</html>
1 Like
3

Already read the docs, came here for a different explanation because they weren’t clear (felt like that was apparent by my original post). I am using templateMetrics but caching is making no or a nominal difference (even when having it only process a partial once).

4

This is right, look at thge most used templates, the most time consuming etc …
All depends from your template architecture …

If build time is a pain, buy a faster computer (joke)

5

Thanks for your response even though it did not answer either of my questions.

6

Sorry, I don’t have an answer to that question, except I would do the same for…

I believe the way to determine that is to experiment, using the template metrics mentioned.

Is the theme you are working on for a project, or as something you will share as a theme for others? I’m interested to know how to optimize a theme in both scenarios, perhaps a theme developer could share their experience. :thinking:

In my projects I use partialCached if it will render the same each time, but more as a principle; I don’t think many of my sites are large enough to make a noticeable difference (each one builds basically “instantly”). :slight_smile:

7

A simplified scenario/question:

Does passing a variable to partialCached where that variable is rendered on every page of the site have an impact on performance?

8

Hi @RHEV. Are you asking for yourself, or simplifying the original query? I’m not sure, so wanted to clarify. :slight_smile:

In either case, I believe this is done by comparing the build times using partials, once cached and once not.

Is there another way to measure “performance” for static site builds? Let me know if I don’t have the crux of the question yet. :slight_smile:

9

In general, if you build your site with:

hugo --templateMetrics

And look at the “top 10”, any performance issues should “light up like a Christmas three”. The below is the Hugo Docs site (which we have not done any performance tuning with as I can remember) built on my computer. And when, ordered by cumulative duration, the template taking up most time on average takes 9.5ms (and remember that we render in parallel, so we can do 16 of those on my MacBook in that timeframe), I would not worry too much:

     cumulative       average       maximum
       duration      duration      duration  count  template
     ----------      --------      --------  -----  --------
   2.633336496s    9.506629ms  199.908375ms    277  _default/single.html
   1.249966914s    2.408414ms  187.931625ms    519  partials/opengraph/opengraph.html
   1.049441936s    1.200734ms    187.5285ms    874  partials/opengraph/get-featured-image.html
      525.059ms    3.035023ms   14.637667ms    173  news/single.html
   418.769203ms    1.316884ms    4.175875ms    318  partials/nav-links-docs.html
   175.851459ms    4.509011ms   61.499792ms     39  partials/pagelayout.html
     171.4295ms   10.084088ms   63.260708ms     17  _default/list.html
   101.143583ms    5.619087ms    7.313208ms     18  showcase/single.html

If you spot some suspects, running hugo --templateMetrics --templateMetricsHints is very helpful.

1 Like
10

one more :wink:

Do NOT create large templates. move fixed parts to one “sub” template for partialCached and the variable part to another partial. This helped me to optimize the build speed.

1 Like
11

Could you post the template metrics? With @jmooring 's help I found mine not to be related to the template caching at all but to the CSS process writing to disk for whatever reason. Although he mentioned putting CSS processing in a separate partial, the way I worked around this was to run tailwind as a separate service altogether which sped it up to an amazing degree.