This Website

Hopefully, you have already noticed how fast everything loads here. There are a few reasons that I would like to share with you.

Architecture

First of all, this site is statically generated by Hugo and served by NGINX on a cloud server.
Additionally, Cloudflare is used as a cache, to achieve low latency globally.

Optimizations

By the selected architecture, the loading times are already relatively low, but there are still some things that I implemented to improve the overall performance.

Hugo Pipes

Hugo has a feature called Pipes that allow for processing of assets during the build process.

CSS

The Risotto Template comes with a lot of CSS files, which I combined with Hugo Pipes to reduce the number of files served. To combine multiple files in Hugo with Pipes, all files have to be loaded into a variable, and then combined with resources.Concat to a single CSS object, which can then be minified using minify.

{{ $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 }}">

Images

For images, I have overridden the Markdown ![alt](link) syntax, so that now images are converted to webp and jpg format with a maximum width of 1024 pixels.
The converted images can then be served in a <picture> HTML tag as srcsets.

{{ $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

I use the font Abel-Regular from Matthew Desmond, which I converted from ttf to woff2, resulting in a file size of 12KB instead of 36KB. It is also preloaded in the HTML document, instead of being loaded in the CSS, where it is needed.

Portfolio