Sur Esmertec, j’ai testé pas mal de techniques pour améliorer la performance perçue sur mobile — et l’optimisation des assets images et vidéos est souvent le levier le plus rentable. Dans plusieurs projets Next.js, en combinant des bonnes pratiques d’images (formats modernes, lazy-loading adapté, responsive sizes) et une stratégie vidéo allégée, j’ai observé jusqu’à 40% d’amélioration de la performance perçue sur des appareils mobiles courants. Dans cet article je partage mon approche concrète, les erreurs courantes à éviter et les étapes actionnables que vous pouvez appliquer tout de suite.
Pourquoi optimiser images et vidéos d’abord ?
Sur mobile, la majorité du temps de chargement et de rendu est consommée par les ressources multimédias. Une image trop lourde ou une vidéo non adaptée bloque le rendu initial, augmente le LCP (Largest Contentful Paint) et dégrade la sensation de fluidité. Plutôt que d’optimiser d’abord le JavaScript, je priorise les assets parce qu’ils impactent directement la perception utilisateur — ce que Google Page Experience et Core Web Vitals mesurent précisément.
Les principes que j’applique systématiquement
Configurer Next.js Image pour de vrais gains
J’utilise le composant next/image comme point de départ. Il apporte automatiquement le lazy-loading, le responsive et l’optimisation côté serveur si vous utilisez l’Image Optimization API de Next.js. Voici les points clefs à vérifier :
Exemple de pratique que j’applique : je fournis toujours des tailles cibles dans les props du composant Image et j’ajoute une version AVIF générée par CDN pour les navigateurs qui la supportent. Résultat : la taille moyenne des images peut chuter de 60–80% selon la source initiale.
Formats d’image : quand utiliser AVIF, WebP, PNG ou SVG
Le choix du format dépend du type d’image :
Astuce pratique : générez automatiquement AVIF/WebP au build ou via votre CDN, mais gardez une fallback pour les navigateurs anciens. Avec Next.js, on peut déléguer la conversion à un service (Cloudinary, ImageKit) et combiner cela avec un CDN pour latence minimale.
Responsive et breakpoints — arrêter les images surdimensionnées
Une erreur fréquente : servir une image desktop 2000px à un mobile 360px. Pour lutter contre ça, je définis un système de breakpoints cohérent et j’utilise srcset ou les props sizes de Next Image. Exemple de stratégie :
En pratique, cela signifie que le navigateur ne télécharge que la version réellement utile, réduisant la consommation data et accélérant le rendu initial.
Lazy-loading : plus intelligent que “toutes les images en lazy”
Le lazy-loading natif (loading="lazy") est utile, mais il ne suffit pas. J’applique ces règles :
Le placeholder flou (blur-up) donne un rendu perçu plus rapide : l’utilisateur voit déjà une forme approximative pendant que le fichier final se charge. C’est un petit détail qui améliore énormément la perception.
Optimiser les vidéos pour mobile
Les vidéos sont souvent le pire cauchemar côté poids. Voici les pratiques que j’implémente :
En résumé : évitez que la vidéo bloque le LCP et préférez des chargements déclenchés par l’utilisateur ou par le viewport.
Mise en cache et CDN — des alliés incontournables
Rien ne remplace un bon CDN pour livrer rapidement les assets sur mobile. Mes conseils :
En pratique, déployer vos images via CDN + conversion automatique en formats modernes réduit sensiblement le TTFB et la latence de chargement.
Métriques à suivre pour mesurer l’impact
Pour justifier les changements, je surveille :
Sur plusieurs projets où j’ai appliqué ces optimisations, le LCP mobile est passé de ~3.5–4.5s à ~1.8–2.5s, et la mesure perçue (via WebPageTest filmstrip + Lighthouse) a montré des gains de 30–40% en vitesse perçue. Ces gains se traduisent aussi par une meilleure rétention et taux de conversion.
Checklist rapide à appliquer dès maintenant
Si vous voulez, je peux regarder un cas concret de votre site Next.js et vous fournir une liste d’actions priorisées (ce que j’ai fait pour plusieurs lecteurs d’Esmertec avec des résultats rapides). Dites-moi l’URL et je vous envoie un diagnostic rapide.
