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 ? L’utilisation du mobile fait désormais partie intégrante de la vie des internautes et le trafic web mondial provenant des appareils mobiles continue de croître chaque année. Il serait donc dommage 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 existe également des outils en ligne pour prévisualiser l’affichage de votre site web sur différents appareils mobiles, comme BrowserStack ou LambdaTest, qui sont de plus en plus adoptés pour leurs fonctionnalités avancées.

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 à Google Search Console (section « Ergonomie mobile ») ou à l’outil PageSpeed Insights de Google, qui intègre désormais l’analyse mobile.

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.

#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).

#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 à Google PageSpeed Insights, qui fournit des recommandations détaillées pour l’optimisation mobile.

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 sans perte de qualité grâce à des outils comme TinyPNG, Squoosh ou ImageOptim, qui sont de plus en plus utilisés pour l’optimisation web. Pour leur format, privilégiez désormais le format WebP ou AVIF pour les images, qui offrent une meilleure compression et rapidité de chargement, tandis que SVG reste recommandé pour les icônes, illustrations et logos.

Pour les vidéos, privilégiez l’intégration via des plateformes externes comme YouTube ou Vimeo, ou utilisez des solutions d’embed natives optimisées, afin de ne pas alourdir votre site et de limiter la consommation de bande 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 solutions existent pour la mise en cache, comme Redis ou Memcached côté serveur, et WP Rocket qui reste l’un des plugins les plus utilisés sur 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 Network) :

Un CDN permet de distribuer votre contenu à vos utilisateurs à l’international de manière optimale, en s’appuyant sur des réseaux de serveurs répartis dans le monde entier. Des solutions comme Cloudflare ou Fastly sont aujourd’hui largement adoptées.

• 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 Privilégiez l’optimisation mobile native plutôt que les pages AMP

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.

#6 Adaptez vos pop-ups au format mobile

Google pénalise toujours les pop-ups trop intrusifs sur les sites web mobiles, et les exigences en matière d’accessibilité et d’expérience utilisateur sont de plus en plus strictes. 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 solutions comme AppPresser pour WordPress, ou des plateformes no-code/low-code de plus en plus adoptées pour transformer un site web en application mobile.

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 désormais plusieurs heures par jour sur son smartphone !