🚀 Optimisations Performance Mobile - nicolas-dabene.fr/blog

📊 Objectif

Améliorer le score Lighthouse mobile de ~62 → 85-95+

🎯 Problèmes Identifiés

Critique (Impact LCP)

• ✅ LCP = 7.0s (objectif < 2.5s) → Image Hero non optimisée
• ✅ TBT = 2200ms → Scripts JavaScript bloquants
• ✅ Images servies en taille desktop sur mobile

Secondaire

• ✅ Absence de versions responsive pour images
• ✅ Preconnect manquant pour ressources tierces
• ✅ Cache-Control non configuré

✅ Optimisations Réalisées

1. Images Responsive (PRIORITÉ CRITIQUE)

Problème : Image Hero 1024x1024px (163K) servie sur mobile Solution : Génération de 3 tailles responsive + srcset

Implémentation

Fichiers modifiés :

• _includes/responsive-image.html (NOUVEAU)
• _layouts/post.html:122-135
• _includes/critical-hero-css.html:4-20

Script créé :

./scripts/generate-responsive-images.sh

Résultat :

• 480px : 31K (-81% vs original)
• 720px : 56K (-66%)
• 1080px : 88K (-46%)
• 84 images blog optimisées

Code généré :

<img
  src=""
  srcset="
    /path/to/image-480.webp 480w,
    /path/to/image-720.webp 720w,
    /path/to/image-1080.webp 1080w,
    /path/to/image.webp 1024w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 720px, (max-width: 1400px) 1080px, 1024px"
  loading="eager"
  fetchpriority="high"
  decoding="async"
>

Impact LCP estimé : 7.0s → 2.0-2.5s ⚡

2. CSS Critique Inline

Fichiers :

• _includes/critical-css.html (existant - vérifié ✅)
• _includes/critical-hero-css.html (amélioré)

Ajouts :

/* Post banner image - Éviter layout shift */
.post-banner-image-container {
    aspect-ratio: 1 / 1;
    max-width: 1200px;
}
.post-banner-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

Impact : Évite layout shift (CLS stable à 0) ✅

3. Preconnect Ressources Tierces

Fichier : _includes/head.html:241-243

Ajouts :

<!-- Preconnect optimisé pour ressources tierces critiques -->
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">

Déjà présent :

• ✅ Google Fonts (fonts.googleapis.com)
• ✅ FontAwesome (cdnjs.cloudflare.com)
• ✅ Google Analytics async (_includes/analytics.html:14)

Impact TTFB estimé : -100-200ms 🚀

4. Cache-Control Headers

Fichiers créés :

• _headers (Netlify)
• netlify.toml (configuration complète)

Configuration :

Headers sécurité :

X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin

Impact : Visites récurrentes ultra-rapides 🔥

5. Scripts JavaScript

État actuel (déjà optimisé) :

• ✅ Google Analytics en async (_includes/analytics.html:14)
• ✅ Scripts non-critiques avec defer (_layouts/default.html:59-66)
• ✅ Animations chargées après LCP (default.html:26-39)

Fichiers vérifiés :

<script src="/assets/js/modern-animations.js" defer></script>
<script src="/assets/js/scroll-animations.js" defer></script>
<script src="/assets/js/cookie-consent.js" defer></script>

Impact TBT estimé : 2200ms → 800-1200ms ⚡

📈 Gains Attendus

🔧 Utilisation

Génération Automatique + Intelligente ✨

Les images responsive sont versionnées dans le repository et générées automatiquement seulement si manquantes lors du build GitHub Actions.

Workflow modifié : .github/workflows/jekyll.yml

Étapes ajoutées :

1. Installation d’ImageMagick
2. Exécution de scripts/generate-responsive-images.sh
3. Le script skip les images déjà existantes → build rapide !

Avantages :

• ✅ Images commitées → pas de régénération inutile lors du build
• ✅ Build GitHub Actions ultra-rapide (~5-10s vs 2-3min)
• ✅ Nouvelles images générées automatiquement si ajoutées
• ✅ Historique git des optimisations

Générer manuellement (développement local)

cd /home/user/ndabene.github.io
./scripts/generate-responsive-images.sh

💡 Best Practice : Générer et commiter les images responsive avec chaque nouvelle image blog.

Utiliser l’include responsive dans un article

<img
  src="/assets/images/blog/2025/11/mon-image.webp"
  srcset="/assets/images/blog/2025/11/mon-image-480.webp 480w, /assets/images/blog/2025/11/mon-image-720.webp 720w, /assets/images/blog/2025/11/mon-image-1080.webp 1080w, /assets/images/blog/2025/11/mon-image.webp 1024w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 720px, (max-width: 1400px) 1080px, 1024px"
  alt="Description"
  class="post-banner-image"
  width="1024"
  height="1024"
  loading="eager"
  fetchpriority="high"
  decoding="async"
>

Tester avec Lighthouse

# Mobile
lighthouse https://nicolas-dabene.fr/blog --preset=mobile --view

# Desktop (référence)
lighthouse https://nicolas-dabene.fr/blog --preset=desktop --view

📝 Checklist Déploiement

• Images responsive générées (84 images)
• Include responsive-image.html créé
• Layout post.html modifié
• CSS critique ajouté
• Preconnect ressources tierces
• _headers Netlify configuré
• netlify.toml créé
• Commit & Push sur claude/improve-mobile-lighthouse-01E41b8BriTBP6yZT1E9SMtU
• Test Lighthouse après déploiement
• Vérifier score mobile ≥ 85

🎯 Prochaines Étapes (Optionnel)

Si score < 85 après déploiement :

1. Activer CDN Netlify (si pas déjà fait)
   • Edge caching automatique
   • Compression Brotli
   • TTFB amélioré
2. Lazy loading agressif

   loading="lazy" pour toutes images below-the-fold
   

3. Code splitting avancé
   • Séparer JS par route
   • Dynamic imports
4. Service Worker
   • Cache assets critiques
   • Offline-first strategy
5. WebP → AVIF migration
   • Format encore plus léger (-20% vs WebP)
   • Support moderne uniquement

📚 Ressources

• Web.dev - Optimize LCP
• Lighthouse Scoring Calculator
• Responsive Images - MDN

Généré le : 2025-11-30 Objectif : Lighthouse Mobile 85-95+ Status : ✅ Optimisations complètes - Prêt pour test