Pourquoi la performance mobile est critique
Plus de 60 % du trafic web mondial provient d'appareils mobiles. Ces appareils ont des contraintes spécifiques : processeurs moins puissants, mémoire limitée, connexions réseau variables (3G, 4G, Wi-Fi instable). Une page qui charge en 1 seconde sur un MacBook peut prendre 5 secondes sur un smartphone milieu de gamme en 4G.
L'impact est direct : chaque seconde de chargement supplémentaire augmente le taux de rebond. Google utilise les Core Web Vitals comme facteur de classement, ce qui lie directement la performance au référencement.
Mesurer avant d'optimiser
Ne devinez pas, mesurez. Les outils essentiels :
- Lighthouse : audit automatisé intégré à Chrome DevTools (performance, accessibilité, SEO).
- WebPageTest : tests depuis des appareils réels et différentes connexions réseau.
- Chrome DevTools Performance : profiling détaillé du rendu, du parsing JavaScript et des reflows.
- CrUX (Chrome User Experience Report) : données de performance réelles de vos utilisateurs.
Optimiser les images
Les images représentent souvent 50 % ou plus du poids d'une page. Techniques d'optimisation :
- Utilisez des formats modernes : WebP (30 % plus léger que JPEG) ou AVIF (50 % plus léger).
- Servez des images responsives avec l'attribut srcset et l'élément picture.
- Appliquez le lazy loading natif (loading="lazy") sur les images en dessous de la ligne de flottaison.
- Compressez avec des outils comme Sharp, Squoosh ou un service CDN avec transformation automatique.
Réduire et optimiser le JavaScript
Le JavaScript est le principal facteur de lenteur sur mobile :
- Code splitting : ne chargez que le JavaScript nécessaire à la page courante (import() dynamique).
- Tree shaking : éliminez le code inutilisé lors du build.
- Minification : réduisez la taille des bundles avec Terser ou esbuild.
- Defer / async : ne bloquez pas le rendu initial avec des scripts non critiques.
Stratégies de cache et CDN
Un cache bien configuré évite de retélécharger des ressources déjà disponibles :
- Configurez des headers Cache-Control avec des durées longues pour les assets versionnés (CSS, JS avec hash).
- Utilisez un CDN (Cloudflare, Fastly, CloudFront) pour servir les ressources depuis un point de présence proche de l'utilisateur.
- Implémentez un service worker pour un cache applicatif fin (voir notre guide PWA).
Optimiser le Critical Rendering Path
Le navigateur doit télécharger le HTML, le CSS critique et le JavaScript bloquant avant d'afficher quoi que ce soit. Réduisez ce chemin critique :
- Inlinez le CSS critique (above-the-fold) directement dans le HTML.
- Chargez le CSS non critique de manière asynchrone.
- Utilisez le preloading pour les ressources critiques (polices, images hero).
- Réduisez le nombre de requêtes bloquantes (combiner les fichiers CSS, éliminer les polices inutilisées).