Performance Web Mobile : Optimisation et Meilleures Pratiques

Pourquoi la performance mobile est différente

Les appareils mobiles ont une capacité CPU et mémoire plus faible. Le temps de parse et compile de JavaScript est plus long.

Conditions réseau : 3G/4G/5G, WiFi. Bande passante et latence variables. Les utilisateurs mobiles peuvent être sur des connexions plus lentes.

Batterie : Le JavaScript lourd et les animations consomment la batterie. Performance = durée de vie de la batterie.

Taille d'écran : Images et layout optimisés pour les petits écrans. Mobile-first au lieu de desktop-first.

Design Mobile-First

CSS mobile-first : Styles mobiles d'abord, puis override avec media query pour desktop. @media (min-width: 768px) pour les grands écrans.

Meta tag viewport : <meta name="viewport" content="width=device-width, initial-scale=1">. Mise à l'échelle correcte sur mobile.

Touch targets : Boutons et liens d'au moins 48x48px. Facilement tappables avec le doigt. 8px d'espace entre les éléments proches.

Taille de police : Minimum 16px. iOS zoome sur les inputs de moins de 16px. Cela casse l'UX.

Navigation : Menu hamburger, navigation inférieure, barre d'onglets. Navigation accessible sur mobile.

Optimisation des Images

Images responsives : Bonne taille avec srcset et sizes. Ne chargez pas de grandes images sur mobile.

Compression d'images : Format WebP/AVIF. Quality 75-80 suffisant pour mobile. Compressez avec TinyPNG, Squoosh.

Lazy loading : Lazy load les images sous le fold. Attribut loading="lazy".

Placeholder : Placeholder blur-up ou skeleton. Montrez le placeholder pendant le chargement de l'image.

CDN : Nœud CDN le plus proche pour les utilisateurs mobiles. CDN globaux comme Cloudflare, Fastly.

Optimisation JavaScript

Taille du bundle : Bundle plus petit sur mobile. Chargez seulement le code nécessaire avec le code splitting.

Tree shaking : Supprimez le code inutilisé. Utilisez les ES modules.

Lazy loading : Lazy load les modules lourds (chart, editor, map). Avec dynamic import().

Polyfill : Supprimez les polyfills inutiles. Utilisez les APIs natives au lieu de core-js (les navigateurs modernes les supportent).

Web Workers : Séparez les calculs lourds du thread principal. Ne bloquez pas le thread UI sur mobile.

Optimisation Réseau

HTTP/2 ou HTTP/3 : Traitement parallèle de plusieurs requêtes. Réduit la latence sur mobile.

Compression : Compressez les ressources basées sur le texte avec Gzip/Brotli. Économie de 60-80%.

Caching : Cache offline avec Service Worker. Chargement rapide lors des visites répétées avec la stratégie cache-first.

Prefetch/Preconnect : Préchargez les ressources critiques. Établissez la connexion DNS et TCP à l'avance.

Resource hints : Préchargez le CSS et les polices critiques avec <link rel="preload">.

Tests et Monitoring

Tests sur appareil réel : Testez sur de vrais appareils mobiles. L'émulation d'appareil de Chrome DevTools n'est pas suffisante.

Lighthouse mobile : Audit de performance mobile. Testez avec le throttling (CPU 4x slowdown, slow 4G).

WebPageTest : Testez avec un appareil mobile et un profil de connexion. Analyse de filmstrip et waterfall.

RUM : Données d'utilisateurs mobiles réels. Segmentation par type d'appareil, vitesse de connexion.

Core Web Vitals : Métriques séparées pour mobile et desktop. Rapport mobile dans Google Search Console.