Next.js : framework React full-stack moderne

Ce que vous saurez faire à la fin

1. Convertir vos images JPG/PNG en WebP et AVIF avec qualité préservée
2. Implémenter le lazy loading natif et avancé sur WordPress
3. Configurer un CDN gratuit pour servir vos images au Sénégal et à l'étranger
4. Réduire de 60 à 80% le poids total des images d'une page
5. Mesurer l'impact sur le score PageSpeed Insights et le LCP

Durée : 4h. Pré-requis : accès admin WordPress ou FTP, compte Cloudflare gratuit, outil Squoosh.app (gratuit) ou Photoshop, bande passante internet stable (ADSL Orange ou fibre Free Sénégal recommandée). Budget potentiel : 0 à 30 000 FCFA/an pour un plugin premium.

Étape 1 — Comprendre l'impact des images sur la performance

Sur un site e-commerce sénégalais classique, les images représentent 60 à 75% du poids total des pages. Une fiche produit avec 8 photos non optimisées peut peser 6 Mo, ce qui équivaut à 4 secondes de chargement sur une connexion 3G fréquente en région (Kaolack, Tambacounda, Ziguinchor). Chaque seconde supplémentaire fait perdre environ 7% de conversions selon les études de Google.

L'optimisation d'images se joue sur trois axes complémentaires : format de fichier moderne (WebP, AVIF), compression sans perte visible, livraison intelligente (lazy load et CDN).

Étape 2 — Auditer le poids actuel de vos images

Ouvrez Chrome, rendez-vous sur votre page produit la plus visitée. Tapez F12 pour ouvrir les DevTools.

DevTools → Onglet Network
1. Cocher "Disable cache"
2. Filtrer par : Img
3. Recharger la page (Ctrl+R)
4. En bas, lire :
   - Nombre de requêtes images
   - Poids total transféré (kB ou MB)
   - Temps de chargement total

Objectifs cibles pour une PME au Sénégal :
- Poids images d'une page : moins de 800 kB
- Nombre de requêtes images : moins de 20
- Aucune image > 200 kB unitairement

Notez ces chiffres dans un tableau Excel. Vous mesurerez les progrès à chaque étape.

Étape 3 — Choisir le bon format selon le contenu

Étape 4 — Convertir en WebP avec Squoosh

Squoosh est un outil gratuit développé par Google. Aucune installation, aucun envoi de données vers un serveur tiers (idéal si vos visuels sont confidentiels).

Procédure pour 1 image :
1. Aller sur https://squoosh.app
2. Glisser-déposer votre image JPG/PNG
3. Panneau droit : choisir "WebP" dans le menu Compress
4. Régler Quality : 75 (par défaut 75 = excellent compromis)
5. Cocher "Reduce palette" si image avec peu de couleurs
6. Comparer visuellement original vs compressé (slider central)
7. Cliquer le bouton de téléchargement bleu en bas à droite

Gain typique :
JPG 850 kB → WebP 180 kB (-79%)
PNG 1,2 MB → WebP 220 kB (-82%)

Pour traiter en masse, utilisez l'outil en ligne de commande cwebp :

cwebp -q 75 photo-produit.jpg -o photo-produit.webp

Pour traiter tout un dossier :
for f in *.jpg; do cwebp -q 75 "$f" -o "${f%.jpg}.webp"; done

Étape 5 — Implémenter WebP dans WordPress automatiquement

Trois options selon votre budget :

Option A : ShortPixel (recommandé)
- Tarif : 4,99 USD/mois pour 7 000 images (env. 3 200 FCFA)
- Plugin WordPress + service cloud
- Génère WebP et AVIF, sert le bon format selon navigateur
- Gère la rétrocompatibilité Safari ancien

Option B : Imagify (créé par WP Rocket)
- Tarif : 4,99 USD/mois pour 500 Mo (env. 3 200 FCFA)
- Bonne intégration WordPress
- Conversion WebP automatique au moment de l'upload

Option C : Converter for Media (gratuit)
- 100% gratuit, traitement local sur votre serveur
- Limite : la qualité de compression dépend de votre PHP/GD
- Idéal pour budget serré

Installation Option C :
WordPress Admin → Extensions → Ajouter
Rechercher : "Converter for Media"
Installer → Activer
Réglages → Bulk Optimization → Démarrer

Étape 6 — Servir AVIF avec fallback WebP et JPG

AVIF offre 30 à 50% de gain supplémentaire vs WebP, mais Safari le supporte seulement depuis 2022. La balise <picture> permet de servir le meilleur format disponible :

<picture>
  <source srcset="produit.avif" type="image/avif">
  <source srcset="produit.webp" type="image/webp">
  <img src="produit.jpg" alt="Ordinateur HP Pavilion 15 pouces - 350 000 FCFA"
       width="800" height="600" loading="lazy">
</picture>

Le navigateur lit dans l'ordre :
1. Mon navigateur supporte AVIF ? Oui → charger produit.avif
2. Sinon, supporte WebP ? Oui → charger produit.webp
3. Sinon → charger produit.jpg

Toujours préciser width et height pour éviter le Cumulative Layout Shift (CLS).

Étape 7 — Activer le lazy loading natif

Le lazy loading retarde le chargement des images hors écran jusqu'à ce que l'utilisateur scrolle. Depuis 2020, c'est natif dans Chrome, Firefox, Safari et Edge. Ajoutez simplement loading="lazy" à vos balises <img>.

Avant :
<img src="photo.webp" alt="Description">

Après :
<img src="photo.webp" alt="Description" loading="lazy" decoding="async">

Exception importante :
NE PAS mettre loading="lazy" sur les images visibles dès le chargement initial
(au-dessus de la ligne de flottaison). Sinon le LCP se dégrade.

Sur WordPress, le lazy loading natif est activé par défaut depuis la version 5.5
pour toutes les images insérées via l'éditeur. Vérifier le code source d'une page
pour confirmer la présence de loading="lazy".

Étape 8 — Mettre en place srcset pour le responsive

Servir une image de 1920px à un téléphone Tecno avec écran 720px gaspille 75% de la bande passante. L'attribut srcset permet au navigateur de choisir la meilleure taille.

<img src="produit-800.webp"
     srcset="produit-400.webp 400w,
             produit-800.webp 800w,
             produit-1200.webp 1200w,
             produit-1920.webp 1920w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1024px) 50vw,
            33vw"
     alt="Photo produit"
     loading="lazy"
     width="1200" height="800">

WordPress génère automatiquement plusieurs tailles à l'upload :
- thumbnail (150x150)
- medium (300x300)
- medium_large (768x0)
- large (1024x1024)
- full (taille originale)

Vérifier les tailles générées : Réglages → Médias

Étape 9 — Configurer Cloudflare CDN gratuit

Un CDN (Content Delivery Network) sert vos images depuis un serveur géographiquement proche du visiteur. Pour une PME sénégalaise visant aussi la diaspora en Europe ou aux États-Unis, c'est un gain énorme.

Procédure Cloudflare gratuit :

1. Créer un compte sur cloudflare.com
2. Add a Site → saisir votre domaine
3. Choisir le plan Free (0 USD)
4. Cloudflare scanne votre DNS actuel
5. Modifier les nameservers chez votre registrar
   (LWS, Namecheap, OVH, Senum.sn)
   Exemple : remplacer ns1.lws-hosting.com
   par sara.ns.cloudflare.com et bob.ns.cloudflare.com
6. Attendre 24h max pour la propagation DNS

Une fois actif :
- SSL/TLS → Edge Certificates → Always Use HTTPS : ON
- Speed → Optimization → Auto Minify : HTML, CSS, JS
- Speed → Optimization → Brotli : ON
- Caching → Configuration → Browser Cache TTL : 1 an

Polish (compression d'images au vol) :
Disponible uniquement sur le plan Pro (20 USD/mois soit 13 000 FCFA)

Étape 10 — Optimiser les images SVG

Les SVG sont déjà légers, mais souvent gonflés par les éditeurs (Illustrator, Figma). Utilisez SVGO ou svgomg.net pour les nettoyer.

Avant optimisation : logo.svg de 24 kB
Après SVGO : logo.svg de 4 kB (-83%)

Procédure svgomg.net :
1. Aller sur https://jakearchibald.github.io/svgomg/
2. Open SVG → sélectionner votre fichier
3. Activer toutes les options par défaut
4. Vérifier visuellement (onglet Image)
5. Download

Bonus : inliner les SVG dans le HTML pour économiser une requête HTTP.
Exemple : un logo de 4 kB en SVG inline = 1 requête en moins.

Étape 11 — Mesurer l'impact avec PageSpeed Insights

Avant et après chaque optimisation, testez votre page sur pagespeed.web.dev. Les indicateurs clés :

Testez en mode Mobile (par défaut) car c'est ce que Google utilise pour le ranking au Sénégal.

Étape 12 — Programmer une routine d'upload optimisée

Formez votre équipe (commerciaux, gestionnaires de stock) à toujours optimiser les images AVANT upload. Créez un fichier de procédure :

Procédure standard upload photo produit :

1. Photographier en haute résolution avec smartphone ou DSLR
2. Recadrer aux bonnes proportions (carré 1000x1000 pour fiches produits)
3. Ouvrir Squoosh.app
4. Convertir en WebP qualité 75
5. Vérifier que le fichier final fait moins de 200 kB
6. Renommer avec mots-clés : ordinateur-hp-pavilion-15-pouces.webp
   PAS : IMG_2847_FINAL_v2.webp
7. Uploader dans WordPress
8. Remplir l'attribut alt descriptif :
   "Ordinateur portable HP Pavilion 15 pouces - 350 000 FCFA"
9. Ajouter une légende si pertinente

Temps moyen par image : 2 minutes
Économie de bande passante : 70-80%

Étape 13 — Surveiller régulièrement

Mettez en place un suivi mensuel via Google Search Console (Core Web Vitals) et un audit Lighthouse trimestriel. Conservez l'historique pour visualiser les progrès et détecter les régressions après un changement de thème ou plugin.

Erreurs classiques à éviter

• Uploader des images de 4000×3000 pixels : WordPress n'optimise pas tout, vous gaspillez stockage et bande passante.
• Oublier l'attribut alt : impact négatif SEO et accessibilité (lecteurs d'écran).
• Mettre lazy loading sur l'image héro : dégrade le LCP, score PageSpeed en chute.
• Compresser à 50% de qualité : apparition d'artefacts visibles, perte de confiance client.
• Utiliser des GIF de 5 Mo : remplacer par WebP animé ou vidéo MP4 silencieuse.
• Ne pas définir width et height : Cumulative Layout Shift élevé.
• Servir uniquement du WebP sans fallback : les rares vieux navigateurs (IE, Safari pré-2020) verront des images cassées.

Checklist optimisation images

✓ Audit initial du poids total des images effectué
✓ Format WebP ou AVIF activé sur 100% du site
✓ Plugin de compression (ShortPixel, Imagify, ou gratuit) configuré
✓ Toutes les images ont width et height définis dans le HTML
✓ Lazy loading natif appliqué sauf images au-dessus de la ligne de flottaison
✓ Srcset configuré pour le responsive multi-tailles
✓ CDN Cloudflare actif et SSL forcé
✓ Logos et icônes en SVG optimisés via SVGO
✓ Attributs alt descriptifs sur 100% des images
✓ Score PageSpeed mobile supérieur à 80
✓ LCP inférieur à 2,5 s sur les pages clés
✓ Procédure d'upload documentée et partagée à l'équipe
✓ Audit mensuel programmé dans le calendrier
✓ Backup des images originales stocké en sécurité
✓ Rapport de gain de bande passante calculé et présenté