Hugo minification
Cet article fait partie de la série: Hugo
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.webpLes 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" }}<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 --minifyJ’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.
Liens
https://gohugo.io/hugo-pipes/minification/
