Hugo minification

Attention cette article date depuis plus d'un an (540 jours).

Table des matières

Hugo est rapide, mais on peut améliorer le chargement des ressources.

Les images

Il faut utiliser des formats modernes comme webp et avoir un bon redimensionnement. J’utilise Gimps pour changer la taille et le format.

Sinon en ligne de commande:

$ cwebp -q 90 minifycss.png -o minifycss.webp

Les CSS

Les fichiers CSS sont placés directement dans /themes/VOTRETHEME/assets/css.

Dans mon partials/head.html, j ai:

{{ $css := resources.Get "css/uikit.min.css" | minify | resources.Fingerprint "sha512" }}
<link  href="{{ $css.RelPermalink }}" rel="stylesheet"  integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
{{ $css := resources.Get "css/styles.css" | minify | resources.Fingerprint "sha512" }}
<link  href="{{ $css.RelPermalink }}" rel="stylesheet"  integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">

Récupère le fichier CSS, compresse(minify) et créer une empreinte pour vérifier les changements (ca évite de recharger dans le cache si c’est le même fichier)

{{ $css := resources.Get "css/uikit.min.css" | minify | resources.Fingerprint "sha512" }}

Hugo remplace les valeurs dans le

<link  href="{{ $css.RelPermalink }}" rel="stylesheet"  integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">

Les JS

Les fichiers JS sont placés directement dans /themes/VOTRETHEME/assets/js.

Dans mon partials/head.html, j’ai:

{{ $js := resources.Get "js/uikit.min.js" | minify | resources.Fingerprint "sha512"}}
    <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
{{ $js := resources.Get "js/uikit-icons.min.js" | minify }}
    <script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
{{ $js := resources.Get "js/jquery.min.js" | minify | resources.Fingerprint "sha512" }}
    <script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
{{ $js := resources.Get "js/fuse.min.js" | minify | resources.Fingerprint "sha512" }}
    <script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
{{ $js := resources.Get "js/mark.min.js" | minify | resources.Fingerprint "sha512" }}
    <script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
{{ $js := resources.Get "js/jquery.mark.min.js" | minify | resources.Fingerprint "sha512" }}
    <script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
{{ $js := resources.Get "js/search.js" | minify | resources.Fingerprint "sha512" }}
    <script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>

Le principe est le même que pour le CSS.

La commande

Pour finir, on va lancer cette commande pour créer le site.

$ hugo --minify

J’ai testé le site sur https://pagespeed.web.dev/.

J’ai encore des améliorations à faire au niveau du cache (dans le rapport: Diffusez des éléments statiques grâce à des règles de cache efficaces), mais ça avance.