Améliorer l’affichage de votre site web sur mobile en 7 étapes

En 2020, optimiser l’affichage de son site web sur mobile n’est plus une option. C’est incontournable.

Vous êtes sur le point de créer un site web ? Vous en avez déjà un mais vous souhaitez le rendre plus performant ? En 2020 l’utilisation du mobile fait partie intégrante de la vie des internautes et quand on sait que le pourcentage de trafic des sites web dans le monde depuis les appareils mobiles est de 52,6% à fin 2019, il serait embêtant pour votre business de perdre de potentiels clients à cause d’un site web dont l’affichage n’est pas adapté au mobile.

Vous devez donc vous adapter au plus vite et proposer une parfaite expérience utilisateur à vos visiteurs, avec un site web optimisé pour l’affichage mobile. Pour vous aider à y remédier, nous avons listé pour vous dans cet article les 7 étapes pour améliorer l’affichage de votre site web sur mobile.

#1 Commencez par choisir un template responsive

Lors de la création de votre site web, vous serez amenés à choisir des modèles de templates pour structurer votre contenu et le rendre attractif aux yeux des visiteurs.

Si vous utilisez un outil comme WordPress, le choix des templates est extrêmement large, sur Themeforest ou wordpress themes par exemple, vous y trouverez votre bonheur, mais le point le plus important à garder en tête est de vérifier que votre template est bien créé sur la base du responsive design dans la barre des spécificités fonctionnelles de chaque template, c’est-à-dire vérifier qu’il s’adapte automatiquement à tous types d’appareils : ordinateurs, smartphones et tablettes.

Ce choix vous permettra de gagner un temps considérable pour que votre site web soit compatible avec l’affichage sur mobile, mais ce n’est pas pour autant qu’à ce stade, le travail est considéré comme totalement fait ! Il sera aussi nécessaire de tester votre site web sous son format Bêta, depuis différents appareils, notamment depuis différents smartphones/tablettes, pour vous assurer que toutes les sections apparaissent correctement, que le design est bon et que l’expérience utilisateur n’est pas entravée. Il y a également des outils qui vous permettent d’avoir un aperçu automatique en ligne de l’affichage de votre site web sur différents appareils mobiles comme le Responsive Design checker, XRespond ou le Responsive Checker de Website Planet.

Sur WordPress aussi au niveau du Back-end une section vous permettra de basculer du mode desktop vers le mode smartphone ou tablette pour effectuer les tests d’aperçus et modifications nécessaires.

Le plus important ? Voir si la lisibilité du contenu, sa structure, les éléments de design, la clarté de navigation et des onglets en terme d’UX rendent le passage de l’internaute agréable.

#2 Testez les performances de votre site web grâce à l’outil mobile-friendly de Google

Pour optimiser votre site web pour l’affichage mobile mais aussi être bien référencé sur Google, notamment au niveau des résultats du search mobile (SERP), il faut répondre aux normes fixées par ce dernier et vérifier que la plupart des critères ont été respectés. Une étape cruciale à effectuer de préférence avant la mise en ligne définitive de votre site web. Mais il n’est bien sûr jamais trop tard pour rectifier le tir s’il a été mis en ligne depuis un moment.

Comment cela marche ? Petit Review de l’outil et son importance

Le google Mobile-Friendly est un outil gratuit fourni par google, qui est devenu très utile depuis la grande mise à jour de l’algorithme annoncée le 21 avril 2015 par Google concernant l’adaptation des sites web à l’affichage mobile. Cette mise à jour pénalisait tout site incompatible avec le mobile, au niveau de la navigation et l’ensemble de l’expérience du mobinaute.

Pour tester votre site web il suffit de se rendre sur l’outil de test d’optimisation mobile de google , de faire rentrer l’URL de votre site web et déclencher le test qui prendra quelques instants pour scanner l’ensemble de votre site web. Ensuite un rapport apparaîtra, avec un aperçu de votre site sur mobile à droite, à gauche la confirmation que votre page est adaptée au mobile ou pas et au dessus, un complément des éléments qui n’ont pas complètement été chargés ainsi que ceux que vous devriez améliorer.

Cela peut être des fichiers robots.txt qui bloquent la lecture du Googlebot, des liens de redirections à rectifier, des erreurs au niveau de la console JavaScript, etc.

Comment et pourquoi créer un site web mobile-friendly

#3 Optez pour un hébergeur/serveur fiable et performant avec le plan le plus efficace pour les besoins de votre business

Le choix d’un hébergement web pour mettre en ligne votre site web est comme choisir une maison pour y habiter et y vivre, c’est du moyen voir du long terme si tout se passe bien. Votre hébergement web doit  logiquement être sécurisé, conforme à vos exigences, favorisant un bon référencement et évolutif pour anticiper vos besoins futurs et vous générer de bons résultats.

Cette étape est déterminante et aura un impact direct sur les performances de votre site web sur desktop et plus particulièrement sur les appareils mobiles qui nécessitent une optimisation bien plus importante et développée, surtout en termes de vitesse !

Ce que vous devez garder en tête ? Un hébergement offrant une vitesse de chargement/navigation optimale, un minimum de temps d’arrêts, des ressources et autres performances qui vous seront nécessaires.

Revenons maintenant au plan à choisir.

Notre recommandation ? Pour une vitesse optimale de réponse du serveur, un hébergement VPS dont la configuration dépendra du degré de performances requis pour les besoins de votre site web, comme Hostinger, ou encore mieux un hébergement Cloud comme OVH, si vous pouvez investir plus (car plus cher qu’un VPS).

En savoir plus sur l’hébergement web

#4 Réduisez au maximum le temps de chargement pour améliorer l’affichage mobile de votre site web

Valable pour un site web format desktop et encore plus pour le format mobile, la vitesse d’un site web doit être l’une de vos grandes préoccupations. Pour que vous puissiez maintenir un taux de rebond minimum et booster vos performances depuis les connexions mobiles, l’expérience utilisateur ne doit cesser d’être optimisée et rester la plus agréable possible .

Sachez que Google recommande pour le mobile une vitesse de chargement de site web en dessous des 3 secondes, voire même 1 seconde ! 53 % des mobinautes quittent un site web qui prend plus de 3 secondes de chargement… De quoi vous inciter à passer à l’action pour éviter cela et garder vos KPI’s à des seuils qui vous rendront heureux et feront fructifier votre business !

Les étapes pour optimiser le temps de chargement de votre site web pour mobile

Commencez d’abord par tester la vitesse de votre site web sur mobile grâce à l’outil gratuit de google Test My Site.

Un outil rapide et utile qui vous permettra de charger votre site en faisant entrer votre URL, en sélectionnant le type de connexion et la région pour le test ce qui vous donnera un aperçu de la vitesse de votre site web pour mobile en quelques secondes et ce n’est pas tout ! En plus de la vue générale de la vitesse de votre site web pour mobile, l’outil Test de vitesse mobile de Google, vous permet également de faire un benchmark en comparant vos performances à celles de vos concurrents, d’évaluer l’impact d’un site plus rapide sur votre activité en renseignant quelques-uns de vos KPI’s comme le nombre moyen de visiteurs, taux de conversion et en sélectionnant votre objectif en terme de vitesse de chargement, d’optimiser la vitesse de chacune de vos pages et même de recevoir un rapport d’analyse par e-mail pour le partager avec votre team !

Maintenant que vous avez testé votre vitesse pour l’affichage mobile, que faire ?

Comment améliorer la vitesse pour l’affichage mobile et optimiser le temps de chargement de votre site web

• Optimisez vos ressources : images, icônes, vidéos,…

Ces ressources sont très friandes de bande passante et tendent à alourdir le site web et rallonger le temps de chargement. Pour les images, réduisez leur volume en un clic sans diminuer de leur qualité, grâce à des outils comme TinyPNG ou Optimizilla. Pour leur format, les classiques JPEG et PNG sont les plus utilisés mais les formats SVG pour les icônes, illustrations, logos sont conseillés et le format webP pour les images peut être plus efficace en termes d’optimisation et de rapidité de chargement.

En ce qui concerne les vidéos, la meilleure solution est d’installer un plugin Youtube ou Vimeo par exemple, qui permettront d’afficher vos vidéos sur votre site sans l’alourdir et consommer de bande de passante.

• Revoyez votre code et ne gardez que l’essentiel :

Nettoyez vos codes HTML, CSS et Javascript en supprimant tout ce qui est superflu et qui pourrait ralentir la performance de votre site web sur l’affichage mobile.

• Instaurez la mise en cache :

La mise en cache vous permettra d’économiser les ressources de votre site web en termes d’exécution lors de la visite de vos utilisateurs. Si un utilisateur consulte une page pour la première fois cette même page qui se charge, créera et stockera une copie sur son navigateur. Quand il y accèdera plus tard, cette copie sera chargée et optimisera le temps de chargement. Plusieurs plugins existent comme Varnish et Memcached pour la mise en cache. WP Rocket est quant à lui l’un des plus utilisés par les adeptes WordPress.

Il sera aussi nécessaire de bien paramétrer votre mise en cache et de personnaliser les intervalles et éléments déclencheurs en fonction de vos préférences.

• Souscrivez à un CDN (Content Delivery System) :

UN CDN permet de distribuer votre contenu à vos utilisateurs se trouvant à l’international à une vitesse très optimale puisque votre contenu est distribué non pas à travers un serveur central mais plutôt des serveurs disponibles dans plusieurs pays.

Avantages d’un CDN sur OVH

• N’oubliez pas d’utiliser des ressources mises à jour !

Qu’il s’agisse de votre thème, CMS ou plugins, utilisez toujours les dernières versions disponibles pour profiter pleinement de leurs nouvelles configurations et garder une bonne performance, sans parler de la sécurité bien évidemment qui est elle aussi renforcée.

# 5 Activez les pages AMP : Accelerated Mobile Page de Google

Grâce à l’AMP de Google vous pourrez optimiser votre contenu, améliorer sa lisibilité ainsi que son affichage sur mobile pour chacune des pages de votre site web, en se limitant à l’essentiel avec une réduction de l’exécution de scripts. Résultat : des pages mobiles accélérées et une version mobile de votre site web très performante ! Les fichiers multimédias ainsi que les mises en pages avancées qui surchargent le site sans une fonction indispensable sont supprimés. Cette version AMP sera diffusée lorsqu’un mobinaute tentera d’accéder à votre site web.

Pour WordPress le plugin AMP contient les éléments basiques et est facile d’installation. Vous pourrez même réajuster vos pages et avoir plus de liberté de personnalisation.
Tout savoir sur l’AMP

#6 Adaptez vos pop-ups au format mobile

En 2015 Google a déclaré la pénalisation des pop-ups trop intrusifs pour les utilisateurs sur sites web mobiles. Les pop-ups gênent généralement l’expérience utilisateur et la rendent désagréable s’ils sont à caractère répétitif, publicité agressive et surtout s’ils monopolisent l’écran en entier. Pour le mobile les restrictions sont encore plus fermes.

Nos conseils pour optimiser vos pop-ups et garder une bonne performance pour votre site web mobile :

• Ne garder que les pop-ups essentiels pour votre business, à des endroits stratégiques de vos pages et aussi ceux qui sont importants pour l’utilisateur et relatifs à sa navigation sur votre site web : cookies, mises à jour de confidentialité, etc. (Les pop-ups comme les cookies ne sont pas pénalisés).
• Limiter au maximum la taille des pop-ups : formulaires, newsletter, ou autres.
• Montrer clairement comment l’utilisateur pourrait les fermer, avec une croix ou une mention ‘’ fermer ‘’ généralement à droite en haut du pop-up avec en complément, la possibilité de cliquer simplement sur la partie visible du contenu pour s’en débarrasser.

# 7 Et pourquoi ne pas créer une application mobile complémentaire ?

Une application mobile pourrait fidéliser vos visiteurs et attirer leur attention sur une partie de vos produits ou services, nouveautés,… avec une expérience utilisateur totalement différente d’un site web mobile. Vous pouvez multiplier son utilité et la faire jouer en votre avantage pour atteindre plus d’opportunités business.

Deux options s’offrent alors à vous, soit la création d’une application from scratch qui vous permettra de proposer à votre cible un contenu plus ludique et des services complémentaires à votre site web mobile, soit simplement convertir votre site web actuel en application mobile, profiter des notifications push et autres fonctionnalités utiles pour votre cible grâce à des outils comme AppPresser destinée aux utilisateurs WordPress ou des plugins comme MoZable, Wapppress, etc.

Maintenant que vous avez tous les tuyaux pour améliorer l’affichage de votre site web sur mobile, il ne vous reste plus qu’à multiplier les tests et même demander à des utilisateurs en dehors de votre équipe de tester pour collecter leurs feedbacks, qui pourront d’ailleurs vous être très utiles.

Et quand votre site web mobile sera entièrement prêt, n’oubliez pas de l’intégrer dans vos  campagnes e-mailings, mais aussi et surtout, sur vos réseaux sociaux pour le partager et drainer votre trafic, auprès d’une cible large, hyper connectée et qui passe surtout 4 heures par jour en moyenne sur son smartphone !