Mit Optimierung des Hugo Themes die Zeit zum Rendern massiv verringert

In den vergangenen Tagen hatte ich das Gefühl, dass das Bauen des Blogs mit Hugo länger dauern würde als noch vor einigen Tagen. Und tatsächlich: Während es früher mal circa 48 Sekunden dauerte, benötigte Hugo mittlerweile 71 Sekunden zum Bau des gesamten Blogs.

Statistiken für den Bau des Blogs

Mit der folgenden Befehlszeile habe ich mir ein paar Statistiken zum Bau der Website ausgeben lassen (Details zur Befehlszeile hier):

hugo --templateMetrics --templateMetricsHints --gc --minify > hugo-metric_0.txt

Interessant dort sind die ersten Zeilen, da dort die meiste Zeit benötigt wird:

      cache     cumulative       average       maximum
  potential       duration      duration      duration  count  template
      -----     ----------      --------      --------  -----  --------
         96 4m19.969432968s   50.785198ms   110.86782ms   5119  partials/sidebar.html
         96 4m19.100400102s   50.615432ms  110.836695ms   5119  partials/sidebar/main.html
        [...]
        100 2m3.753700269s   24.175366ms   63.874341ms   5119  partials/sidebar/featured-posts.html
        100 1m15.906580979s     14.8284ms   69.562651ms   5119  partials/sidebar/recent-posts.html
        100  56.22054184s   10.982719ms   45.487529ms   5119  partials/sidebar/taxonomies.html
        [...]

Optimierungen

Ich habe daraufhin in layouts/partials/sidebar geschaut, was dort so an Aufrufen drin ist und habe schließlich die Datei layouts/partials/sidebar/main.html bearbeitet.

Aus:

{{- partial "sidebar/profile" . -}}
{{- partial "post/toc" . -}}
{{- partial "sidebar/featured-posts" . -}}
{{- partial "sidebar/recent-posts" . -}}
{{- partial "sidebar/taxonomies" . -}}

wurde:

{{- partialCached "sidebar/profile" . -}}
{{- partial "post/toc" . -}}
{{- partialCached "sidebar/featured-posts" . -}}
{{- partialCached "sidebar/recent-posts" . -}}
{{- partialCached "sidebar/taxonomies" . -}}

Statistiken nach der Änderung

Danach habe ich Hugo erneut bauen und Statistiken erzeugen lassen. Und der Unterschied war gravierend.

So haben sich die Werte für die gelisteten Dateien nach der Optimierung verändert:

      cache     cumulative       average       maximum
  potential       duration      duration      duration  count  template
      -----     ----------      --------      --------  -----  --------
         12  2.621892242s     512.188µs   71.285726ms   5119  partials/sidebar.html
         96  1.313718468s     256.635µs    71.26333ms   5119  partials/sidebar/main.html
        [...]
        100  155.703685ms   22.243383ms   23.092028ms      7  partials/sidebar/featured-posts.html
        100   207.69076ms   29.670108ms   37.265719ms      7  partials/sidebar/recent-posts.html
        100   98.810821ms   14.115831ms   16.986037ms      7  partials/sidebar/taxonomies.html
        [...]

      cache     cumulative       average       maximum
  potential       duration      duration      duration  count  template
      -----     ----------      --------      --------  -----  --------
         96 4m19.969432968s   50.785198ms   110.86782ms   5119  partials/sidebar.html
         96 4m19.100400102s   50.615432ms  110.836695ms   5119  partials/sidebar/main.html
        [...]
        100 2m3.753700269s   24.175366ms   63.874341ms   5119  partials/sidebar/featured-posts.html
        100 1m15.906580979s     14.8284ms   69.562651ms   5119  partials/sidebar/recent-posts.html
        100  56.22054184s   10.982719ms   45.487529ms   5119  partials/sidebar/taxonomies.html
        [...]

Voller Erfolg

Das Bauen (rendern) des gesamten Blogs dauert jetzt nicht mehr 71 Sekunden sondern nur noch 13 Sekunden. Beim ersten Durchlauf nach der Optimierung dachte ich erst an einen Fehler, der das Rendern verhindert, da normalerweise der Lüfter des Rechners anspringt, wenn Hugo den Blog baut, was jetzt immer ausbleibt.

Nicht im Theme-Repo rumpfuschen

Damit nicht irgendwelche geänderten Dateien im Repo des Themes liegen, habe ich die angepasste Datei main.html in das Hauptverzeichnis von Hugo gepackt, in den selben Pfad wie auch im Theme, sodass die neue Datei eine höhere Priorität bekommt. Genauer gesagt in hugo-hauptverzeichnis/layouts/partials/sidebar/main.html.

Ich nehme an, dass diese Datei nur relativ selten im Theme geändert wird und falls doch, muss ich die Anpassungen erneut manuell vornehmen. Das passt.

Hoffentlich ist nichts kaputt

Ich kannst noch nicht so recht fassen und glaube noch immer, dass irgendwo irgendwas kaputt gegangen ist.

Ich wäre aber sehr froh, wenn es so funktioniert, denn ich hatte schon die Überlegung, ein anderes, etwas leichtgewichtigeres Theme für meinen Blog zu suchen.

Wenn jemandem etwas auffällt, das so nicht sein sollte, freue ich mich über eine Rückmeldung. Danke :)

Rückmeldung beim Entwickler

Ich werde das mal die Tage so benutzen und wenn ich keine Fehler finde, werde ich das dem Entwickler mal melden, damit er das für sein Theme übernehmen kann. Bei Blogs mit wenigen Seiten mag der Unterschied nicht auffallend sein, aber hier mit um die 2600 Blogbeiträgen durchaus.