5 conseils pour optimiser la vitesse et la qualité d’un site mobile

5 conseils pour optimiser la vitesse et la qualité d’un site mobile

 Quand vous surfez sur le web avec votre smartphone, quelle est la pire expérience : attendre le chargement interminable d’un site alors que vous avez absolument besoin d’une réponse rapide ? Ne pas arriver à atteindre un élément sur l’écran et se retrouver sur une mauvaise page (car la page initiale n’était pas encore complètement chargée et que l’élément s’est décalé) ? Et, soyons honnêtes, n’est-ce pas encore plus agaçant quand cet « autre élément » est une pub ?

Ces deux cas de figure représentent des expériences désagréables et frustrantes pour les utilisateurs mobiles. (Selon HubSpot, ce n’est pas seulement contrariant ; cela peut engendrer un niveau de stress équivalent à celui atteint lors du visionnage d’un film d’horreur !)

La bonne nouvelle ? Il existe des solutions pour afficher les pages plus rapidement (et ainsi éviter à votre utilisateur de s’arracher les cheveux !). Vous pourrez même tenter de l’épater avec ces 5 idées d’amélioration des performances et du temps de chargement de votre site mobile.

 

1.     Utilisez un CDN (Content Delivery Network)

 

Si un visiteur américain tente d’accéder à mon site mobile hébergé en France, les données ont beaucoup de chemin à parcourir. Le navigateur mobile de l’utilisateur doit appeler le serveur en France, qui envoie les données de mon site à l’utilisateur aux États-Unis, ce qui peut ralentir le processus. Avec un CDN, je peux éviter ce problème : il permet de dupliquer le contenu de mon site et de le stocker sur différents serveurs à travers le monde ; les utilisateurs peuvent ainsi accéder rapidement à mon site, à tout moment et en tout lieu, sur le serveur le plus proche.

Pour que l’expérience mobile soit optimale, chaque milliseconde compte. Un CDN peut vous aider à faire de précieuses économies sur le temps de chargement.

 

2.     Définissez un ordre de chargement de fichiers

 

Revenons au problème évoqué plus haut : alors que l’utilisateur cherche à atteindre un élément de votre site mobile lent à charger, il le voit se décaler… Et se retrouve à cliquer accidentellement sur une pub. Double problème à cela : la colère de l’utilisateur, et probablement le coût engendré par cette action.

Il existe une solution simple pour éviter ce désagrément : ne chargez pas tous les fichiers de votre page en même temps ! Fixez un ordre.

Chargez d’abord le cadre de votre page afin de mettre en place la structure de votre contenu et de donner aux utilisateurs une idée de la mise en page, même si votre texte et vos images ne sont pas encore visibles. Cela évitera également que vos blocs de contenus ne se décalent si vos éléments se chargent à des rythmes différents.

Ensuite, chargez votre contenu texte. Vos utilisateurs pourront accéder aux informations importantes qu’ils sont susceptibles de rechercher et, même si vos visuels ne sont pas encore chargés, votre page n’en reste pas moins entièrement utilisable à ce stade.

Enfin, chargez vos images : votre page mobile s’affiche entièrement, et peut être consultée par les utilisateurs. En affichant la mise en page, puis le texte et enfin les images, vous donnez également l’impression à vos utilisateurs que votre page se charge plus vite qu’en réalité, car ils ne se retrouvent pas bloqués devant une page blanche.

Ordre de chargement des fichiers pour les sites mobiles

3.     Éliminez les kilos en trop (et ne vous contentez pas de redimensionner)

 

Depuis des années, on entend dire que le responsive design est une nécessité absolue et que le redimensionnement automatique du site selon les différents types d’écrans offre une expérience idéale aux utilisateurs mobiles. N’est-ce pas ?

Mais un aspect est souvent négligé : c’est, vous l’avez compris, l’impact sur la vitesse et les performances du site mobile. Adaptation du site à la taille de l’écran ne signifie pas optimisation des performances mobiles.
Une erreur est souvent commise : se contenter de redimensionner la taille d’affichage d’une image au format d’écran mobile (alors que le fichier image d’origine, dont la qualité est adaptée aux PC, reste volumineux). Bien entendu, la réduction de la taille d’affichage permet d’ajuster votre image aux écrans mobiles ; mais le poids du fichier entraîne quand même un temps de chargement supplémentaire.

Redimensionnement des images pour un site réactif

Ne vous contentez pas de redimensionner les images de votre site Internet au format des supports mobiles. Hébergez plutôt différentes versions de la page sur votre serveur : l’une comprenant des images à haute résolution, à destination des ordinateurs de bureau, et l’autre, plus légère, avec des images à faible résolution pour les appareils mobiles.

 

4.     Soyez « cache »

 

Utilisez autant que possible le cache pour stocker les données  afin d’accélérer les visites suivantes :

  • Mise en cache côté serveur : les données calculées sont stockées dans le cache de votre serveur ; ainsi, les prochains utilisateurs qui appelleront les mêmes informations pourront accéder rapidement à ces résultats précalculés.
  • Mise en cache côté navigateur : certains éléments de votre site mobile, comme le logo de votre entreprise ou le pied de page, restent statiques d’une page à l’autre ; ils peuvent être stockés dans le cache du navigateur de l’utilisateur. Quand celui-ci ouvrira une autre page de votre site mobile, les éléments mis en cache seront immédiatement chargés, car ils seront déjà stockés sur son navigateur.

 

5.     Limitez les requêtes : allégez vos tags

 

Evaluez le nombre de requêtes envoyées à chaque chargement de votre page : marqueurs publicitaires, widgets, tags analytics, etc.

Étant donné que chacune ajoute un peu au temps de chargement, une page pleine de marqueurs sera plus longue à charger. Identifiez précisément les outils dont vous avez réellement besoin sur votre site et conservez uniquement ceux qui présentent un véritable intérêt. Travaillez-vous vraiment avec 10 serveurs publicitaires différents ? En réduisant le nombre de tags et de requêtes envoyées à chaque chargement de page, vous pouvez améliorer les performances de votre site mobile.

Vous souhaitez savoir précisément combien de temps prend le chargement de votre site sur un appareil mobile ? Testez votre vitesse sur https://www.webpagetest.org/ ; vous aurez accès au nombre de requêtes envoyées, à la répartition du temps de traitement, et plus encore.

 

Pour profiter d’autres conseils concrets sur l’amélioration des performances de votre site mobile et d’idées pour alléger vos marqueurs de digital analytics, regardez cette vidéo de webinar :

Performance mobile – Optimisez le chargement du tag sans perdre en qualité

 

Merci à Florian Rieupet, chef de produit à AT Internet, de nous avoir fourni la base de cet article !

Ces articles pourraient aussi vous intéresser :

Un commentaire

  1. Digikode
    19 octobre 2016 at 14 h 03 min

    De très bon conseils. Je m’en suis servis et j’ai gagné en vitesse, largement. Merci beaucoup

Envoyer un commentaire

Loading Facebook Comments ...