Diese Website

Hoffentlich hast du schon bemerkt, wie schnell hier alles läd. Dafür gibt es einige Gründe, die ich hier vorstellen möchte.

Architektur

Zunächst werden alle html Dateien von Hugo statisch erstellt und von NGINX ausgeliefert.
Außerdem benutze ich Cloudflare als Cache, um global niedrige Latenzzeiten zu erreichen.

Optimierungen

Durch die ausgewählte Architektur sind die Ladezeiten schon relativ gering, dennoch kann diese durch einige Änderungen nochmals deutlich verbessert werden.

Hugo Pipes

Hugo bietet mit Pipes die Möglichkeit beim Erstellen den Inhalt mit Templating zu verändern.

CSS

Das Risotto Template liefert relativ viele CSS Dateien aus, welche ich mit Hugo Pipes kombiniert und minimized habe. Dafür muss zunächst jede CSS Datei als CSS Objekt in eine Variable geladen weden, und dann mit resources.Concat zu einem CSS Objekt zusammengefügt und mit minify minifiziert werden.

{{ $gruvbox := resources.Get "css/colour/gruvbox-dark.css" | toCSS }}
{{ $darkMode := resources.Get "css/colour/dark-mode.css" | toCSS }}
{{ $about := resources.Get "css/about.css" | toCSS }}
{{ $footer := resources.Get "css/footer.css" | toCSS }}
{{ $header := resources.Get "css/header.css" | toCSS }}
{{ $layout := resources.Get "css/layout.css" | toCSS }}
{{ $logo := resources.Get "css/logo.css" | toCSS }}
{{ $typography := resources.Get "css/typography.css" | toCSS }}
{{ $risotto := resources.Get "css/risotto.css" | toCSS }}
{{ $custom := resources.Get "css/custom.css" | toCSS }}
{{ $css := slice $gruvbox $darkMode $about $footer $header $layout $logo $typography $risotto $custom | resources.Concat "assets/css/main.css" | minify }}

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

Bilder

Für Bilder habe ich die Markdown ![alt](link)-Syntax überschrieben, sodass nun Bilder auf maximal 1024 Pixel Breite und in webp und jpg konvertiert werden.
Die konvertierten Bilder können dann in einem <picture> HTML Tag als srcsets ausgeliefert werden.

{{ $images := .Page.Resources.ByType "image" }}
{{- $img := .Page.Resources.GetMatch (printf "%s" (.Destination)) -}}

{{- with $img -}}
{{ $width := int (math.Min $img.Width 1024) }}
{{ if ne $img.Width 1024 }}
{{ $img := $img.Resize (printf "%dx" $width) }}
{{ end }}
{{ $height := int (math.Mul (float $width) (math.Div (float $img.Height) (float $img.Width) ) ) }}
{{- $webp := $img.Resize (printf "%dx webp" $width) -}}
{{- $jpg := $img.Resize (printf "%dx jpeg" $width) -}}
<picture>
    <source srcset="{{ $webp.RelPermalink }}" type="image/webp">
    <source srcset="{{ $jpg.RelPermalink }}" type="image/jpeg">
    <img alt="{{ $.Text }}" src="{{ $img.RelPermalink }}" width="{{ $width }}" height="{{ $height }}" />
<picture>
{{- else -}}
{{ warnf "%s not found" (.Destination) }}
{{- end -}}

Font

Ich benutze als Schriftart Abel-Regular von Matthew Desmond. Diese habe ich von ttf in woff2 konvertiert, um die Dateigröße von 36KB auf nur noch 12KB zu reduzieren. Außerdem wird diese direkt im HTML-Dokument vorgeladen, anstatt sie im CSS, wo sie gebraucht wird erst herunterzuladen.

Portfolio