Comment optimiser votre site web pour un mobile

l’optimisation-mobile-site-web-mobile

La navigation sur des appareils mobiles a complètement changé au cours des dernières années. Les mobiles interviennent dans tout ce que nous faisons. Aussi, le nombre de recherches effectuées sur les mobiles ne cesse de croître. D’où l’importance d’avoir un site web optimisé pour les appareils mobiles. Dans cet article seront dévoilées des astuces pour savoir comment optimiser votre site web pour un mobile.

 Optimiser son site pour mobile : les meilleures pratiques

Les statistiques, en 2019, révéleraient que 65% des pages internet ont été consultés sur un appareil mobile. On note également une augmentation de l’utilisation d’internet sur téléphone plutôt que sur PC par rapport à l’année précédente. Le référencement sur mobile est ainsi devenu un facteur incontournable dans pas mal de domaines. À cet effet, Google a conçu Mobile First Index afin de modifier l’indexation de l’ordinateur au mobile. Favorisant ainsi le site mobile par rapport au site bureau.

 Un site responsive ? C’est quoi ?

Un site responsive s’accommode à toute sorte d’écrans et donne un rendu d’affichage qui facilite la lecture. L’écran mobile étant plus souvent utilisé à la verticale pour naviguer sur internet, cela revient à afficher un site sur une largeur beaucoup plus réduite que celle d’un écran d’ordinateur.

Vous devrez donc en tenir compte dans la création de votre site mobile afin d’adapter le contenu à l’écran réduit. Pour cela, vous devrez réduire la taille des textes et modifier l’organisation des différents onglets. Les éléments placés sur une même ligne seront placés l’un en dessous de l’autre.

Ce classement induira automatiquement une page beaucoup plus longue à parcourir. C’est pourquoi vous devez penser à simplifier les menu au maximum.

Si vous êtes sous WordPress et que votre thème est bien codé, le respect de ces consignes est facile à mettre en ouvre en employant les bons réglages.

 Comment Google vous aide pour tester votre site

Google a mis au point quelques outils d’optimisation qui vous permettent de tester rapidement et facilement la compatibilité mobile de votre site. Il s’agit, entre autres, de l’outil Google Search Console.

Les résultats du test comprennent un scan de la page telle que Google la voit sur un appareil mobile ainsi qu’un rapport de tous les problèmes d’ergonomie détectés.  (Section Ergonomie Mobile).

D’autre part, Google met gracieusement à votre service un cet outil complémentaire. Ne le négligez pas.

 Limitez la quantité de contenus média

Pour optimiser votre page mobile, vous devez également tenir compte de la quantité de média par page. Il est important que vous puissiez rapidement faire bonne impression sur mobile. En effet, n’oubliez pas qu’un nombre élevé d’images mal téléchargées pour une page impactera l’optimisation de votre site web.

 Diminuez le poids des images

Vous devez veiller à ne pas avoir idéalement sur votre site des images dont la taille est supérieure ou égale à 100-200 kO. En effet, plus la taille des images intégrées sur votre site sera lourd à charger, plus votre site ralentit. Pour une performance optimale, le poids total des images sur votre site doit être inférieur à 1 MO – 1,5 MO. Pensez à ceux et celles qui n’ont même pas la 4G. 😉

À cet effet, il existe des logiciels gratuits et payants  faciles d’utilisation qui vous permettent de compresser efficacement une image sans perdre sa qualité. Sous WordPress, mon plugin préféré est Imagify.

 Google privilégie les sites responsives

Tous ces efforts d’optimisation web sur mobile sont faits afin de répondre aux exigences de Google. Ainsi, si vous omettez de prendre en compte ces remarques, vous courrez le risque de voir votre trafic chuter de façon significative. (surtout si vos lecteurs sont sur mobile).

Les sites web responsives sont donc plus facilement et rapidement indexés (cf Mobile First). Une interface responsive permet donc aux fournisseurs de moteurs de recherches de gagner en énergie.

 Récapitulatif et astuces supplémentaires pour un site web responsive.

Un des algorithmes créés par Google en 2015 ajoute la compatibilité mobile d’un site aux critères d’indexation. Un site qui n’est pas responsive se verra chuter de position dans les SERPs de Google sur mobile. Il devient donc urgent d’avoir un site mobile compatible. À cet effet, Google a mis sur pieds son label “Mobile Friendly”.

Pour tester votre site afin de savoir s’il est responsive ou non, Google met à votre disposition des outils : 

Outil de test Google de compatibilité mobile : Il vous permet de savoir si votre site est éligible au label mobile friendly. (voir plus haut)

Google Search Console : pour rappel, l’outil comprend une rubrique Ergonomie Mobile qui analyse votre site avant de faire un rapport sur les causes des erreurs identifiées par l’outil précédent.

Google PageSpeed Insights : L’outil vous permet d’analyser la vitesse de chargement de pages et vous donne des indications sur vos version mobile et bureau. Testez vos pages ici

Pour optimiser votre site web mobile, vous pouvez également suivre les étapes suivantes : 

 1- Optimisez la police de vos pages et la taille des (CTA) boutons d’appels à l’action

La visibilité est l’un des critères sur lequel se base le test de compatibilité mobile de Google. Ainsi vous devez concevoir le design de votre site web de sorte que l’utilisateur puisse lire sans avoir à zoomer.

Pour ce faire, Google définit un ensemble de consignes à respecter dans le choix de la police adéquate : 

 Taille et hauteur de la police. Plus d’infos, à ce sujet ici.

 Nombre de polices différentes sur un même site mobile : vous devez limiter le nombre de polices utilisées afin de ne pas compliquer la mise en page sur mobile. (sans oublier d’optimiser leur chargement).

Pour ce qui concerne les boutons d’appel à l’action, assurez-vous qu’ils soient suffisamment larges pour être visible et facilement cliquable.

 2- Optez pour un menu accessible et simple d’utilisation

Il n’est pas toujours possible d’afficher tous les éléments de votre barre de menu sur mobile sur la même ligne. Vous devez donc organiser vos rubriques de sorte à économiser de l’espace. Beaucoup de sites web sur mobile utilisent un menu en forme de barre disposée l’une au-dessus de l’autre ou de droite vers la gauche.

Ces rubriques elles-mêmes comprennent des sous-rubriques dans lesquelles vous retrouvez tous les éléments de navigation disponible dans la version ordinateur. D’ailleurs, la plupart des CMS proposent ce modèle de menu mobile. 

Attention, évitez tout de même les menus que je qualifierais de “hamburgers”. Évitez donc les sous-menus sur plus de 2 niveaux qui diminuent le confort de navigation sur mobile. À bon entendeur, salut. 

 3- Insérez votre numéro de téléphone et/ou une barre de recherche en haut de l’écran

Pour agrémenter l’expérience de l’utilisateur sur mobile, il est recommandé d’ajouter :

 Une barre de recherche si vous avez un e-commerce (ou même pour un blog).

 Un numéro de téléphone pour vous contacter si vous avez un commerce local

Les utilisateurs sont encore beaucoup pressés sur mobile. Inclure ces 2 informations lui permet de retrouver ce qu’il recherche beaucoup plus vite.

 4- Simplifiez vos formulaires

Même sur ordinateur, c’est déjà assez ennuyant de remplir un formulaire. Évitez donc de reproduire cet inconfort sur mobile en prenant encore plus de temps pour remplir un formulaire.

Pour continuer à convertir sur mobile, raccourcissez vos formulaires en demandant le strict  minimum.

 5- Évitez les pop-ups

Les pop-ups sont une pratique courante et efficace pour récolter des adresses email. En revanche, les utilisateurs les trouvent très intrusifs. Ils y sont déjà exposés sur ordinateur, mais cela est encore plus gênant sur mobile. Les pop-ups recouvrent toute la taille du téléphone, ce qui gâche l’expérience utilisateur.

Sachez que Google pénalise dorénavant les sites sur mobile qui affichent des fenêtres pop-ups. Optez donc avec parcimonie pour des pop-up intelligents qui ne se déclenchent pas dès l’ouverture d’une page ou en pleine lecture. C’est désagréable au possible. Adoptez un compromis en effectuant des tests. N’oubliez pas de choisir des pop-up léger en matière de code. Quoi de plus frustrant que de plomber le chargement d’un site web, rien qu’avec un pop-up mal codé.

 6- Changez pour un hébergement plus rapide

Si vous utilisez un CMS tel que WordPress et que vous devez vous occuper vous-même de trouver un hébergement, vous devez tenir compte de cet aspect. Ne privilégiez pas un hébergement moins coûteux au risque de vous retrouver avec un temps de réponse du serveur trop élevé (voire aléatoire). 

Un temps de réponse élevé réduit également le temps de chargement de la page. Optez donc pour une solution qui vous offre le meilleur rapport qualité-prix.

 7- Minifiez les fichiers CSS ou JavaScript :

Vous utilisez en majorité des fichiers HTML, CSS et JavaScript. Cependant, ces fichiers prennent de la place et peuvent ralentir le chargement de votre page. Ils contiennent en effet des caractères inutiles tels que les espaces, des commentaires et des annotations…

Minifier le code consistera donc à supprimer tous ces caractères inutiles. Par conséquent, votre site s’affiche plus rapidement. Combiner aussi les fichiers en JS et CSS va aussi dans le sens de l’optimisation de pages web. 

 8- Faut-il mettre en oeuvre l’AMP ?

AMP ou Accelerated Mobile Pages, est un programme open source validé par Google. L’AMP permet au site internet de charger plus rapidement sur les appareils mobiles. L’implémentation de l’AMP permet également de réduire le taux de rebond sur votre site.

Attention, par défaut, la technologie AMP ne convient pas pour tous les sites (comme les  sites de vente en ligne, boutiques ou e-commerces…). Il est parfois nécessaire de coder, sous WordPress, cette fonctionnalité, de A à Z, pour respecter la validité des pages AMP sans altérer drastiquement le design et le taux de conversion des pages.

Pour d’infos, à ce sujet, sur cette page.

Merci à Sébastien Pierrepack pour la rédaction de cet article. Plus de détails au sujet de l’auteur sur son site éponyme.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

leo. luctus mi, Lorem venenatis, porta. consectetur massa ut
%d blogueurs aiment cette page :