Accélérer son site sur mobile : mesurer, comprendre, corriger

Pourquoi la vitesse sur téléphone compte

Un site lent coûte des clients avant même qu’ils aient lu une ligne. Sur téléphone, l’écran est petit, la connexion variable, le processeur moins puissant qu’un ordinateur : un site qui paraît rapide au bureau peut être pénible dans la rue ou en zone mal couverte, ce qui arrive vite en Guyane, dans les hauteurs de la Basse-Terre ou en région au Québec.

Google indexe désormais les sites d’abord dans leur version mobile, et il mesure l’expérience réelle des visiteurs à travers trois indicateurs, les Core Web Vitals. Ils ne font pas tout le classement, loin de là, mais un site très lent part avec un handicap.

Les trois indicateurs de Google

Ces seuils sont ceux que Google publie pour qualifier une expérience de « bonne ». Ils sont mesurés sur les vrais visiteurs de votre site, quand il y en a assez.

Comment mesurer

• PageSpeed Insights (gratuit, de Google) : collez l’adresse d’une page, regardez la partie « mobile ». Elle montre les données réelles si votre site a assez de trafic, et une simulation sinon.
• Search Console, rapport « Signaux Web essentiels » : la vue d’ensemble sur tout votre site.
• Votre propre téléphone, en 4G, hors wifi : le test le plus honnête.

Ce qui ralentit vraiment un site

Sur la plupart des sites lents, les mêmes coupables reviennent.

1. 01
   Les images trop lourdes

   Une photo sortie d’un appareil ou d’un téléphone pèse plusieurs mégaoctets. Redimensionnée à la bonne taille et compressée dans un format moderne (WebP, AVIF), elle tombe souvent à quelques centaines de kilo-octets sans perte visible. C’est le gain le plus rapide.

2. 02
   Les scripts tiers

   Widgets de chat, pixels publicitaires, outils d’analyse, carrousels, modules de réseaux sociaux : chacun ajoute du code à télécharger et à exécuter. Faites l’inventaire et gardez seulement ce qui sert.

3. 03
   Les polices de caractères

   Trois familles de polices en quatre graisses chacune, c’est une douzaine de fichiers. Limitez-vous à une ou deux familles et chargez-les intelligemment.

4. 04
   Les vidéos en arrière-plan

   Belles sur ordinateur, coûteuses sur téléphone. Prévoyez une image fixe ou une vidéo très allégée pour le mobile.

5. 05
   Les thèmes et constructeurs surchargés

   Un thème prêt-à-l’emploi embarque souvent le code de dizaines de fonctions inutilisées. Sur un site sur-mesure, on ne charge que ce qui sert à la page.

6. 06
   Un hébergement lent

   Un serveur mutualisé saturé, loin de vos visiteurs, ajoute de l’attente à chaque page. Un hébergement avec réseau de diffusion (CDN) sert vos fichiers depuis un point proche.

Les bonnes pratiques à demander à votre prestataire

• Images redimensionnées pour chaque taille d’écran et chargées au fur et à mesure du défilement (sauf celle du haut).
• Dimensions réservées pour les images et les blocs, pour éviter les sauts de mise en page.
• Pages pré-rendues : le texte arrive immédiatement, sans attendre le JavaScript.
• Code découpé : chaque page charge seulement ce dont elle a besoin.
• Fichiers mis en cache dans le navigateur et servis par un CDN.
• Boutons assez grands et espacés pour être touchés au doigt, texte lisible sans zoomer.

Ce sont les bases de chaque site que nous livrons : design pensé téléphone d’abord, photos allégées, pré-rendu, hébergement sur Firebase (Google Cloud). Un site vitrine démarre à partir de 2 500 €, une landing page à partir de 850 €. Pour l’hébergement et le suivi, voir hébergement et maintenance.

Chaque écran que nous concevons est d’abord dessiné et vérifié sur téléphone, puis adapté aux grands écrans. C’est l’inverse de la façon dont beaucoup de sites sont encore faits.

Boutiques, réservations, espaces clients : les cas plus lourds

Un site vitrine de cinq pages est facile à rendre rapide. Les choses se compliquent avec une boutique en ligne (des centaines de photos de produits, des filtres, un panier), un module de réservation ou un espace client qui charge des données personnelles.

• Catalogue : des vignettes légères dans les listes, la grande photo seulement sur la fiche produit, et un chargement progressif quand on fait défiler.
• Paiement : le module de paiement (Stripe, par exemple) ne doit se charger que sur la page de paiement, pas sur tout le site.
• Espace client ou application : afficher immédiatement la structure de l’écran, puis les données dès qu’elles arrivent, plutôt qu’une page blanche avec un sablier.
• Cartes interactives : une image statique cliquable qui n’ouvre la vraie carte qu’au toucher économise beaucoup de chargement.

C’est la même discipline que nous appliquons sur nos plateformes, utilisées surtout sur téléphone, comme Gwadadrop côté chauffeur ou GORIFIT en salle de sport.

Erreurs fréquentes

• Viser 100/100 sur PageSpeed au détriment du contenu : le score de simulation est un indicateur, pas un objectif en soi. Ce qui compte, c’est l’expérience réelle.
• Tester seulement sur ordinateur, en wifi rapide.
• Ajouter un module « d’optimisation » par-dessus un site lourd au lieu de traiter la cause (images, scripts).
• Installer un chat, une carte et trois pixels sur chaque page, y compris celles où ils ne servent pas.
• Oublier les visiteurs des zones mal couvertes : aux Antilles et en région, la 4G n’est pas partout égale.

Liste de vérification

• Test PageSpeed Insights sur mobile pour l’accueil et les deux pages les plus visitées.
• Aucune image de plus de quelques centaines de kilo-octets.
• Une ou deux polices maximum.
• Inventaire des scripts tiers, suppression de l’inutile.
• Pas de saut de mise en page au chargement.
• Texte présent dans le code source (pré-rendu).
• Test réel sur un téléphone en 4G.
• Rapport Search Console surveillé chaque mois.

Si votre site actuel est lent, une refonte est parfois plus rentable qu’une série de rustines : lisez refonte de site, quand et comment. La vitesse joue aussi sur votre référencement local et sur votre visibilité auprès des IA. Pour un diagnostic, contactez-nous.