Stratégies de mise en cache Hugo pour les performances

Optimiser le développement et l'exécution des sites Hugo

Sommaire

Stratégies de mise en cache avec Hugo sont essentielles pour maximiser les performances de votre générateur de site statique. Bien que Hugo génère des fichiers statiques qui sont naturellement rapides, la mise en œuvre d’une mise en cache appropriée à plusieurs niveaux peut améliorer considérablement les temps de construction, réduire la charge du serveur et améliorer l’expérience utilisateur.

Quelle que soit l’utilisation d’un thème populaire de notre guide Meilleurs thèmes pour Hugo ou d’un thème personnalisé, ces stratégies de mise en cache vous aideront à optimiser les performances de votre site.

Ce guide complet aborde la mise en cache au moment de la construction, les builds incrémentaux, l’optimisation CDN, les en-têtes HTTP et les stratégies de mise en cache des actifs pour vous aider à atteindre des performances optimales pour votre site basé sur Hugo.

chef-in-a-white avec des stratégies de mise en cache Cette belle image est générée par modèle AI Flux 1 dev.

Comprendre le cache de construction de Hugo

Hugo maintient un cache interne de construction qui stocke le contenu et les actifs traités pour accélérer les constructions ultérieures. Ce cache se trouve dans le répertoire resources/_gen et inclut :

  • Modèles rendus : Sortie prétraitée des modèles
  • Images traitées : Images redimensionnées, optimisées et converties
  • Actifs compilés : CSS et JavaScript minifiés
  • Métadonnées des ressources : Hachages de fichiers et résultats de traitement

Fonctionnement du cache de construction

Lorsque vous exécutez hugo, le générateur :

  1. Vérifie le cache pour des ressources traitées existantes
  2. Compare les temps de modification des fichiers et les hachages de contenu
  3. Ignore le traitement des fichiers non modifiés
  4. Ne reconstruit que le contenu modifié ou nouveau

Cela signifie qu’avec un site de 1000 articles, la modification d’un seul article n’exige que le traitement de cet article et la régénération des pages affectées, pas l’ensemble du site.

Gestion du cache de construction

Vous pouvez contrôler le comportement du cache de Hugo à l’aide de diverses options de ligne de commande. Pour une référence complète des commandes Hugo, consultez la Feuille de rappel Hugo :

# Effacer le cache et reconstruire tout
hugo --ignoreCache

# Utiliser un répertoire de cache personnalisé
export HUGO_CACHEDIR=/chemin/vers/cache
hugo

# Désactiver le mode de rendu rapide (force une reconstruction complète)
hugo server --disableFastRender

Pour les pipelines CI/CD, envisagez de persister le répertoire de cache entre les constructions pour accélérer les déploiements. Si vous utilisez Gitea Actions pour le déploiement, consultez notre guide sur Utiliser Gitea Actions pour déployer un site Hugo vers AWS S3 pour un setup complet de CI/CD :

# Exemple de workflow GitHub Actions
- name: Cache des ressources Hugo
  uses: actions/cache@v3
  with:
    path: resources/_gen
    key: ${{ runner.os }}-hugo-${{ hashFiles('**/content/**') }}

Configuration des caches de fichiers

Hugo propose un contrôle granulaire sur différents types de cache via la section de configuration [caches]. Selon la documentation Hugo, vous pouvez configurer plusieurs types de cache :

[caches]
  [caches.assets]
    dir = ':resourceDir/_gen'
    maxAge = -1
  [caches.getcsv]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.getjson]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.getresource]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.images]
    dir = ':resourceDir/_gen'
    maxAge = -1
  [caches.misc]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.modules]
    dir = ':cacheDir/modules'
    maxAge = -1

Explication des types de cache

  • assets : Met en cache les CSS, JavaScript et autres actifs traités par Hugo Pipes
  • getcsv : Met en cache les fichiers CSV analysés via la fonction getCSV
  • getjson : Met en cache les fichiers JSON analysés via la fonction getJSON
  • getresource : Met en cache les ressources distantes récupérées via la fonction getResource
  • images : Met en cache les images traitées (redimensionnées, optimisées, converties)
  • misc : Cache général pour des opérations diverses
  • modules : Met en cache les modules Hugo et leurs dépendances

Options de configuration

Chaque type de cache prend en charge deux options de configuration :

  • dir : Le chemin absolu du système de fichiers où sont stockés les fichiers mis en cache. Vous pouvez utiliser des tokens :

    • :cacheDir - Remplacé par le répertoire de cache configuré
    • :resourceDir - Remplacé par le répertoire des ressources (généralement resources/_gen)
    • :project - Remplacé par le nom de base du répertoire du projet Hugo actuel

  • maxAge : La durée pendant laquelle une entrée mise en cache reste valide avant d’être évictée :

    • 0 - Désactive le cache
    • -1 - L’entrée du cache ne s’expire jamais (par défaut)
    • Nombre positif - Le cache expire après la durée spécifiée (ex. 3600 pour 1 heure)

Exemple de configuration de cache personnalisé

Vous pouvez personnaliser les paramètres de cache pour des cas d’utilisation spécifiques :

[caches]
  # Conserve les images traitées indéfiniment
  [caches.images]
    dir = ':resourceDir/_gen/images'
    maxAge = -1
  
  # Met en cache les réponses JSON pendant 1 heure
  [caches.getjson]
    dir = ':cacheDir/:project/json'
    maxAge = 3600
  
  # Met en cache les ressources distantes pendant 24 heures
  [caches.getresource]
    dir = ':cacheDir/:project/resources'
    maxAge = 86400

Cette configuration vous permet de :

  • Conserver indéfiniment les images traitées (puisqu’elles sont déterministes)
  • Rafraîchir les données JSON toutes les heures (pour le contenu dynamique)
  • Mettre en cache les ressources distantes pendant 24 heures (équilibre entre fraîcheur et performance)

Le token :project garantit que chaque projet Hugo a des caches isolés, donc l’exécution de hugo --gc (collecte de déchets) n’affecte que le cache du projet actuel.

Builds incrémentaux

Le système de build incrémentiel de Hugo est l’une de ses fonctionnalités les plus puissantes. Il suit les changements au niveau des fichiers et ne reconstruit que ce qui est nécessaire.

Activation des builds incrémentiels

Les builds incrémentiels sont activés par défaut. Hugo fait automatiquement :

  • Suivi des dépendances des fichiers
  • Reconstruit uniquement les pages modifiées et leurs dépendances
  • Maintient des graphes de dépendances pour des mises à jour efficaces

Conseils pour les performances de build

  1. Utilisez hugo server pour le développement : Le serveur de développement utilise automatiquement les builds incrémentiels
  2. Utilisez --minify uniquement en production : La minification ajoute des coûts ; utilisez-la uniquement pour les builds finaux
  3. Optimisez le traitement des images : Utilisez efficacement les fonctionnalités de traitement des images de Hugo :
[imaging]
  bgColor = '#ffffff'
  hint = 'photo'
  quality = 75
  resampleFilter = 'box'
  1. Limitez le traitement des ressources : Ne traitez que les images et les actifs qui sont effectivement utilisés

Stratégies de mise en cache CDN

Les réseaux de livraison de contenus (CDN) sont essentiels pour les performances mondiales. Lors du déploiement de sites Hugo vers des CDN comme CloudFront, Cloudflare ou Netlify, configurez correctement le cache. Pour des instructions détaillées sur le déploiement de votre site Hugo vers AWS S3 avec CloudFront, consultez notre guide sur Déployer un site généré par Hugo vers AWS S3.

Configuration de CloudFront

Pour les déploiements sur AWS CloudFront, configurez les comportements de cache :

# config.toml
[[deployment.targets]]
name = "production"
URL = "s3://votre-bucket?region=us-east-1"
cloudFrontDistributionID = "E1XIDGUJGD9BU9"

Créez des comportements de cache de CloudFront :

  • Actifs statiques (.css, .js, .jpg, .png, etc.) :

    • TTL : 1 an (31536000 secondes)
    • Politique de cache : CachingOptimized
    • Compresser : Oui

  • Pages HTML (.html) :

    • TTL : 1 heure (3600 secondes)
    • Politique de cache : CachingDisabled (avec les en-têtes d’origine)
    • Compresser : Oui

Invalidation du cache

Automatisez l’invalidation du cache lors des déploiements :

# Invalider le cache de CloudFront après le déploiement
aws cloudfront create-invalidation \
  --distribution-id E1XIDGUJGD9BU9 \
  --paths "/*"

Ou utilisez la fonctionnalité de déploiement de Hugo :

[[deployment.targets]]
name = "production"
URL = "s3://votre-bucket"
cloudFrontDistributionID = "E1XIDGUJGD9BU9"

Hugo invalidera automatiquement le cache lors du déploiement.

Optimisation et mise en cache des actifs

Hugo propose un traitement des actifs intégré qui s’intègre avec le cache.

Hachage des ressources

Hugo peut ajouter automatiquement des hachages de contenu aux noms de fichiers :

{{ $css := resources.Get "css/main.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

Cela génère des noms de fichiers comme main.min.abc123def456.css, permettant un cache à long terme car le hachage change lorsque le contenu change.

Traitement et mise en cache des images

Traitez efficacement les images à l’aide des fonctionnalités de traitement d’images intégrées de Hugo. Hugo met en cache les images traitées, donc redimensionner la même image plusieurs fois n’entraîne qu’un seul traitement. Pour un traitement d’image plus avancé, y compris la génération de métadonnées OpenGraph, consultez notre guide sur Métadonnées OpenGraph dans le générateur de site statique Hugo :

{{ $image := resources.Get "images/photo.jpg" }}
{{ $resized := $image.Resize "800x600" }}
<img src="{{ $resized.RelPermalink }}" alt="Photo">

Regroupement des actifs

Regroupez et minifiez les actifs :

{{ $css := slice 
    (resources.Get "css/reset.css")
    (resources.Get "css/main.css")
    (resources.Get "css/components.css")
  | resources.Concat "css/bundle.css"
  | minify
  | fingerprint
}}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

Cela crée un seul fichier CSS mis en cache, minifié et avec un hachage.

Mise en cache via les workers de service (optionnel)

Pour des stratégies de mise en cache avancées, envisagez d’implémenter des workers de service :

Worker de service de base

// sw.js
const CACHE_NAME = 'hugo-site-v1';
const urlsToCache = [
  '/',
  '/css/main.css',
  '/js/main.js',
  '/images/logo.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Enregistrement du worker de service

<!-- Dans votre modèle Hugo -->
<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
</script>

Surveillance et optimisation

Surveillance des temps de construction

Suivez les performances des constructions :

# Mesurez le temps de vos constructions
time hugo

# Utilisez la sortie détaillée pour voir ce qui est traité
hugo --verbose

Taux de correspondance du cache

Surveillez les taux de correspondance du cache CDN via le tableau de bord d’analyse de votre CDN. Visez :

  • Actifs statiques : >95 % de taux de correspondance du cache
  • Pages HTML : 60-80 % de taux de correspondance du cache (selon la fréquence des mises à jour)

Tests de performance

Utilisez des outils comme :

  • Lighthouse : Testez l’efficacité du cache
  • WebPageTest : Analysez les en-têtes de cache
  • GTmetrix : Surveillez les métriques de performance

Résumé des bonnes pratiques

  1. Activez le cache de construction de Hugo : Permettez à Hugo de mettre en cache les ressources traitées
  2. Utilisez les builds incrémentiels : Ne reconstruisez que ce qui a changé
  3. Configurez correctement le CDN : Durée de vie longue pour les actifs, plus courte pour les pages HTML
  4. Définissez des en-têtes HTTP appropriés : Utilisez immutable pour les actifs avec hachage
  5. Hachez les actifs : Ajoutez des hachages de contenu aux noms de fichiers
  6. Invalidez le cache lors des déploiements : Assurez-vous que les utilisateurs voient les mises à jour
  7. Surveillez les performances : Suivez les temps de construction et les taux de correspondance du cache
  8. Optimisez les images : Utilisez efficacement les fonctionnalités de traitement des images de Hugo
  9. Regroupez les actifs : Réduisez les demandes HTTP avec des fichiers CSS/JS regroupés
  10. Envisagez les workers de service : Pour les besoins de mise en cache avancés ou hors ligne

Conclusion

Les stratégies de mise en cache efficaces pour les sites Hugo impliquent plusieurs niveaux : le cache de construction pour des développements plus rapides, le cache CDN pour des performances mondiales, et les bons en-têtes HTTP pour le cache du navigateur. En mettant en œuvre ces stratégies, vous pouvez atteindre :

  • Des constructions plus rapides : Les builds incrémentiels et le cache de construction réduisent les temps de construction
  • Une meilleure performance : Le cache CDN et du navigateur améliorent les temps de chargement
  • Une réduction de la charge du serveur : Les actifs statiques sont mis en cache à l’extrémité
  • Une meilleure expérience utilisateur : Des temps de chargement plus rapides et des capacités hors ligne

N’oubliez pas que le cache est un équilibre entre performance et fraîcheur. Les actifs statiques peuvent être mis en cache de manière agressive, tandis que les pages HTML devraient avoir des durées de cache plus courtes pour assurer que les mises à jour de contenu soient visibles rapidement.

Liens utiles