Comment optimiser son site WordPress pour mobile ? (5 astuces clés)

Comme la plupart d’entre nous, mon téléphone quitte rarement ma poche. 

Alors, lorsque j’ai besoin de faire une recherche sur Google, j’ai pris l’habitude de l’utiliser.

Que ce soit dans la rue, dans une file d’attente, dans le métro… Tout le contenu disponible sur internet est à portée de main. Et en quelques minutes à peine, je trouve la réponse à (presque) toutes mes questions. 

Sans surprise, on estime que 55 % du trafic mondial sur internet provient des smartphones*. Et il est très probable que ce chiffre augmente d’ici les prochaines années.

Alors, si vous avez un site hébergé sur WordPress, il est indispensable de l’optimiser pour mobile. Sans quoi, vous risquez de passer à côté de la moitié de vos visiteurs…

Comment s’y prendre lorsque l’on n’est pas un développeur ? Quelles sont les bonnes pratiques à adopter ?

Je vous explique tout dans cet article. 

Pourquoi optimiser son site WordPress pour mobile ?

Pour améliorer l’expérience utilisateur 

En négligeant l’optimisation mobile, vous risquez de détériorer l’expérience utilisateur de vos visiteurs. Or, quoi de plus frustrant que de ne pas pouvoir accéder au contenu d’un site internet ? À l’origine de ces désagréments : un contenu trop petit, des couleurs illisibles, un élément qui sort de l’écran, et j’en passe. J’imagine que cela vous est déjà arrivé, et que vous voyez très bien de quoi je parle. 

Évidemment, plus l’expérience est fluide et plaisante, plus votre visiteur prendra le temps de lire votre contenu. Il y a alors plus de chance qu’il s’intéresse à ce que vous faites, s’abonne à votre newsletter, et éventuellement, achète vos produits. 

Pour le référencement naturel / SEO.

Sachez qu’un site optimisé pour mobile sera plus mis en avant par Google qu’un site non optimisé. 

Reprenons quelques bases de SEO pour bien comprendre. 

Vous avez créé un site dédié à la reconversion professionnelle. Vous publiez régulièrement des articles pour donner quelques conseils. En parallèle, vous vendez une formation à ce sujet. 

Mais, des sites sur la reconversion professionnelle, il en existe une centaine (et peut-être même bien plus !). Il suffit de chercher “reconversion professionnelle” sur Google et d’observer le nombre de résultats. Pas facile de faire sa place !

Votre but peut donc être de vous positionner sur les requêtes liées à la reconversion professionnelle pour capter du trafic et vous faire connaître. Pour cela, vous allez utiliser un certain nombre de techniques pour améliorer votre référencement. 

Par exemple, vous pouvez optimiser vos articles de blog, vos fiches produits, etc. 

Et bien, sachez que l’un des facteurs les plus récents pour remonter sur les résultats de recherche est l’optimisation mobile. Ce critère a été introduit dans le dernier algorithme de Google : Page Experience. 

En effet, Googlebot (le robot de Google qui scanne l’ensemble des pages internet) s’intéresse en priorité à la version mobile d’une page pour évaluer sa pertinence. 

Une page bien adaptée au mobile, avec un temps de chargement rapide, aura plus de chance de se hisser sur les mots clés ciblés. 

Raison de plus pour peaufiner le SEO sur sont site WordPress !

Les bonnes pratiques pour optimiser son site WordPress pour mobile

Bonne pratique #1 : Choisir un thème WordPress optimisé pour mobile

Choisir un thème WordPress optimisé pour mobile (on parle aussi de thème responsive) est le premier réflexe à avoir lorsque l’on crée son WordPress. 

Sans thème responsive, vos efforts d’optimisation seront vains.

La bonne nouvelle, c’est que vous n’avez pas besoin d’avoir des connaissances en code pour mettre en place un thème optimisé. WordPress en propose une large sélection sur son catalogue. Vous n’avez qu’à choisir celui qui vous convient !

Pour savoir si le thème est responsive, vous pouvez jeter un oeil à la description. Cette information est généralement bien mise en évidence. 

Mais ne vous y fiez pas uniquement. La plupart des thèmes ont tendance à se définir comme tel. Alors qu’en réalité, ils ne sont pas toujours très bien optimisés. 

Je vous conseille donc de faire quelques vérifications supplémentaires. 

• Lire les avis des utilisateurs du thème pour observer s’il y a des retours négatives ou positives sur l’optimisation ;
• Tester l’optimisation du site. Pour cela, il vous suffit de sélectionner un site utilisant le thème en question et d’effectuer la vérification via les outils de développement (Je vous explique la marche à suivre à la fin de l’article). 

Pour vous aider, voici quelques thèmes WordPress optimisés :

• Divi ;
• Astra ;
• Ocean WP ;
• Hestia. 

Notez que le thème WordPress par défaut Twenty Twenty est responsive. Idéal si vous n’avez pas de besoins spécifiques (vous souhaitez uniquement créer un blog par exemple) et que vous ne voulez pas perdre trop de temps sur le catalogue. 

Bonne pratique #2 : Utiliser des extensions compatibles pour mobile

Pour créer un WordPress en phase avec votre projet, vous allez probablement être amené à utiliser des extensions (ou plugins). 

Les extensions WordPress servent notamment à ajouter une fonctionnalité sur votre site. Par exemple, si vous souhaitez créer un formulaire, mettre en place une newsletter, il vous faudra installer un plugin.

Il faut bien avoir en tête que l’extension est indépendante du thème choisi. Le code de l’extension est totalement différent. Il faut donc veiller à ce que le plugin soit lui aussi optimisé avant de l’installer. Sans quoi, votre site risquerait de devenir incompatible

Prenons un cas concret pour y voir plus clair.

Lise est naturopathe en freelance. Elle a créé un site WordPress sur lequel elle partage son expérience et ses conseils.  Elle a bien veillé à choisir un thème responsive pour que son site soit optimisé pour mobile. 

Lise aimerait proposer des consultations en ligne. Pour cela, elle décide donc d’installer une extension pour permettre la prise de rendez-vous sur sa page d’accueil.

Or, il s’avère que l’extension n’est pas responsive. Résultat : l’extension casse l’intégralité de la compatibilité de la page. Et malheureusement, la page d’accueil n’est plus compatible. 

Bonne pratique #3 : Éviter de mettre du contenu lourd

Vous pouvez tout à fait illustrer votre site. C’est toujours plus agréable d’avoir des visuels ! Mais veillez à ce que vos images ne soient pas trop lourdes. En moyenne, il est préférable qu’elles ne dépassent pas 30 ko. Au risque de ralentir la vitesse de chargement de votre page. 

Et si votre page met plus de quelques secondes à se charger, il est probable que votre visiteur n’ait pas envie d’aller plus loin. Et qu’il quitte votre site sans même lui laisser une chance. 

Dans sa dernière mise à jour, l’algorithme Google Page Experience met l’accent sur le temps de chargement des pages. Il nous fournit des indications plus précises en estimant que “le temps nécessaire pour afficher le plus grand élément visible d’une page web doit être inférieur à 2,5 secondes”.

? Pour connaître la vitesse de chargement de vos pages, vous pouvez consulter l’outil Page Speed Insight proposé par Google. 

Bonne pratique #4 : Bien insérer son contenu 

Soyez vigilant au moment d’intégrer votre contenu.

Une erreur assez récurrente concerne les vidéos YouTube. 

Lorsque vous ajoutez un contenu YouTube (ou tout autre type de contenu de manière générale), faites-le obligatoirement via la fonction dédiée sur WordPress. Pour cela, rien de plus simple. Il vous suffit d’ajouter l’URL de la vidéo et WordPress se charge de l’intégrer. Le contenu est alors parfaitement adapté à la version web et mobile.

Surtout, ne copiez pas le code HTML de la vidéo. (Vous savez, c’est le lien accessible sous chaque vidéo lorsque vous cliquez sur “Partager” puis “Intégrer la vidéo”). En procédant de cette manière, la largeur et la hauteur du contenu seront fixes et ne s’adapteront pas à un visionnage sur mobile. 

Bonne pratique #5 : Utiliser le format AMP 

Vous êtes au clair avec les 4 bonnes pratiques que je viens de vous énoncer ? Félicitations : vous avez accompli la part la plus importante du travail d’optimisation.

Mais vous pouvez aller encore plus loin, grâce au format AMP. Un sigle un peu obscur qui signifie simplement Accelerate Mobile Performance, ou Accélérer la performance mobile, en français. 

Comme son nom l’indique, le format AMP a été lancé par Google dans le but de charger plus rapidement les pages d’un site sur mobile. 

Je vous épargne les spécificités techniques de ce langage. Pour résumer simplement, le format AMP est une version simplifiée du HTML classique. Pour autant, une page AMP conserve l’ensemble du contenu (visuels, vidéos, audios, etc.) présent dans la version web de votre site. 

Le format AMP est disponible sur WordPress. Et vous n’avez pas nécessairement besoin de savoir coder pour l’utiliser ! Vous pouvez télécharger une extension dédiée (comme AMP WordPress) et le tour est joué ! Votre site bénéficiera d’une version AMP, et le visiteur sur mobile y sera automatiquement redirigé. 

Bonne pratique Bonus : Améliorer les performances globales de votre site WordPress

Outre l’optimisation mobile, une autre clé essentielle pour offrir une expérience utilisateur fluide est d’optimiser la vitesse de chargement de votre site WordPress. Pour cela, plusieurs leviers techniques sont à actionner :

• Le cache : Il permet de conserver en mémoire des versions pré-générées de vos pages web afin d’éviter de recalculer tout le contenu à chaque visite. Cela réduit considérablement le temps de chargement.
• La compression des images : Les images sont souvent les fichiers les plus lourds sur un site. En les compressant (sans perte visible de qualité), on diminue leur poids et donc la durée de chargement.

• L’optimisation des ressources : Il s’agit de minimifier et combiner les fichiers CSS et JavaScript, de différer le chargement des scripts non essentiels, et de réduire le nombre de requêtes effectuées au serveur.

• ⁠Le CDN (Content Delivery Network) : Ce réseau de serveurs répartis dans le monde permet de distribuer votre contenu au plus proche géographiquement de vos visiteurs, accélérant ainsi la livraison des pages.

Pour mettre en place ces optimisations, il existe de nombreux plugins WordPress spécialisés : WP Rocket, Smush pour les images, Autoptimize pour les ressources, et des services CDN comme KeyCDN.

Toutefois, gérer plusieurs extensions peut devenir complexe. C’est pourquoi je vous recommande Nitropack, une solution tout-en-un qui regroupe cache, compression d’images, optimisation des ressources et CDN dans une interface unique. Grâce à Nitropack, vous pouvez améliorer la performance de votre site WordPress facilement, sans multiplier les plugins ni configurations techniques.

En combinant ces optimisations avec les bonnes pratiques mobiles déjà vues dans cet article, votre site sera rapide, fluide, et prêt à offrir une excellente expérience à vos visiteurs (tant sur mobile que sur ordinateur ou tablette).

Comment vérifier que son site WordPress est bien optimisé pour mobile ?

• Le test d’optimisation mobile de Google.

Pour l’utiliser, il suffit d’indiquer l’URL de votre WordPress dans l’encadré. En quelques secondes, vous savez si votre site est suffisamment optimisé.

Si ce n’est pas le cas, Google vous indique ce qui perturbe la compatibilité mobile et vous donne des conseils pour y remédier. 

• La Search console de Google.

La Search Console vous signale les éventuelles erreurs liées à votre optimisation mobile. Rendez-vous dans l’onglet “Ergonomie mobile” pour obtenir tous les détails.

• Le test manuel. 

Malheureusement, tous les défauts d’optimisation mobile ne sont pas détectables par les outils.

C’est notamment le cas pour les images. Admettons que vous avez l’habitude de personnaliser vos photos en y mettant du texte. Le rendu sera peut être impeccable sur votre version web. Mais le texte va changer d’emplacement, parfois rétrécir, sur la version web. Dans certains cas, il ne sera plus lisible par le visiteur. 

Pour déceler ces défauts, rien ne vaut un test manuel. Utilisez votre téléphone et consultez votre site, comme si vous étiez un simple visiteur. L’expérience utilisateur est-elle agréable ? Tous les contenus sont-ils lisibles ?

Le must est d’utiliser la fonction aperçu sur les outils de développement pour visualiser votre site sur différents modèles de téléphone et de taille d’écrans. 

Sur Google Chrome, il suffit de :

• Se rendre sur le menu “afficher” en haut de l’écran, puis “options pour les développeurs” et “outils de développement” ;
• Cliquer sur l’icône représentant un téléphone et une tablette .

Vous pouvez ainsi admirer le rendu de votre site internet sur différents modèles de téléphones.

Démonstration avec le site de LiveMentor :

Il existe également des outils comme Am I Responsive? pour avoir un aperçu de votre page sur mobile. Mais ils sont moins précis et n’offrent pas autant d’options que les outils de développement. 

Finalement, optimiser son WordPress pour mobile est à la portée de tout le monde. En respectant ces quelques bonnes pratiques, vous devriez aisément vous en sortir. Maintenant, c’est à vous de jouer. 

Si vous rencontrez tout de même quelques difficultés, n’hésitez pas à m’en faire part dans les commentaires.

Cet article est une introduction à notre formation WordPress. La formation complète pour apprendre à créer son WordPress de A à Z. Découvrez dès maintenant comment sécurisé son site WordPress ou comment monétiser son site WordPress en toute simplicité