Nous sommes très heureux d’avoir pu accueillir à nouveau Daniel Roch, fondateur de SeoMix et expert depuis une dizaine d’années sur le référencement naturel de WordPress.
Dans ce webinaire, Daniel nous a expliqué comment optimiser un site WordPress pour qu'il soit adapté au mobile. Restez avec nous, pour découvrir ses conseils pratiques et les erreurs à éviter en optimisation mobile pour WordPress.
Pourquoi s’intéresser au mobile ?
D’abord pour une raison évidente de business. Au niveau mondial, il y a de moins en moins de trafic sur ordinateur et de plus en plus sur mobile (+ 25 % en un an vs. – 20 % pour desktop). Il faut donc absolument s’intéresser à la comptabilité mobile.
Deuxième raison : c’est extrêmement utile pour le référencement naturel. Cela améliore tout ce qui est indexation et crawl. Les Google bots navigueront alors plus facilement sur votre site.
Troisième raison : avec l’index mobile-first de Google qui est en train d’arriver et les AMP, Google met de plus en plus l’accent sur les sites compatibles avec le mobile.
Donc, vous devez vous intéresser absolument à tous les aspects mobiles de votre site. En 2107, c’est incontournable !
Pourquoi WordPress ?
Beaucoup de gens ont une vision basique de cet outil, et ils ne s’intéressent pas à toutes ses possibilités. Par exemple, WordPress a tout ce qu’il faut pour une compatibilité mobile parfaite avec un temps de chargement excellent.
WordPress renferme de nombreuses fonctions pour le mobile. Daniel nous donne des exemples de quelques-unes :
-
wp_is_mobile() : pour savoir si l’utilisateur utilise un appareil mobile (pour le rediriger ou changer le chargement des contenus)
-
add_image_size(). Pour adapter les images aux différents types d’écrans. Vous pouvez utiliser l’extension Ajax Thumbnail Rebuild pour régénérer toutes les miniatures et les tailles d’image.
Les solutions avec WordPress
Daniel rappelle quelques généralités sur WordPress et insiste particulièrement sur les hooks, ces portes d’entrée qui permettent à votre développeur d’intercepter le code et de le modifier. La plupart des solutions que Daniel va donner se basent sur les hooks.
Créer un site mobile à part entière (m.monsite.fr)
Daniel déconseille de créer plusieurs installations WordPress différentes et recommande plutôt l’installation multisite.
Mais d’une manière générale, créer un site dédié n’est pas la meilleure solution, car ça provoque beaucoup de problèmes liés au gestion de contenu pour synchroniser les sites. Et ça entraîne également des problèmes d’indexation, car vous donnez deux fois plus de contenu aux moteurs de recherche, ainsi que des problèmes de duplication de contenu.
Daniel recommande carrément d’oublier cette solution.
Installer une extension pour avoir un site mobile
Cette solution avait le vent en poupe il y a quelques années. L’extension gère alors automatiquement pour vous l’intégralité de la version mobile de votre site.
WPtouch est la plus connue : elle crée un site mobile avec les mêmes URL.
Daniel déconseille également cette solution. En effet le design et les contenus seront différents (vous n’aurez pas le même menu, footer, etc.), et il y aura aussi des problèmes de performance.
Avoir un thème Responsive
Daniel est catégorique : c’est obligatoire. Il faut donc utiliser le Responsive Design, c’est-à-dire que tout l’aspect visuel va s’adapter en temps réel à la taille d’écran de l’utilisateur. Et vous n’avez pas à vous soucier de son appareil.
Dans ce cas, il ne faut pas oublier quelques points :
-
Faire attention lorsqu’on rajoute des extensions (une extension tableau, par exemple), car il est possible qu’elles ne soient pas prises en compte par le thème et cassent toute la compatibilité de la page.
-
Il faut que les utilisateurs, ceux qui ajoutent du contenu, soient formés. Par exemple, quand on ajoute une vidéo, il ne faut pas copier-coller le petit bout de code que YouTube nous donne, mais insérer l’URL de la vidéo.
-
Avoir un site bien paramétré (robots.txt, notamment, qui peut empêcher de tester la comptabilité mobile)
Il ne faut pas hésiter à tester la compatibilité mobile des pages, par exemple avec la Search Console ou en donnant une URL à l’outil de test mobile de Google. Il existe aussi plein de logiciels d’accessibilité.
Mais il ne faut pas oublier le simple bon sens. Par exemple, si vous affichez du texte sur une image, quand celle-ci rétrécit, le texte se déplace et peut ne plus être lisible (car il se retrouve sur la même couleur que sa police, par exemple).
L’application mobile
Cela consiste à pouvoir fournir une appli mobile sur Google Play ou App Store à mes utilisateurs. C’est excellent pour le marketing, mais ça ne transforme pas WordPress en site compatible mobile. L’appli mobile ne remplace pas les autres solutions. C’est un supplément, que Daniel conseille pour fidéliser sa clientèle.
Google AMP
Il s’agit d’une solution pour rendre vos pages les plus rapides possible à charger.
Pourquoi faire de l’AMP ? Parce que ça permet une meilleure visibilité sur mobile (en particulier avec Google News) et parce que, bien sûr, ça améliore le temps de chargement.
Pour le faire dans WordPress, Daniel recommande l’extension WordPress AMP.
Mais quelle que soit l’extension qu’on utilise, il s’agit de bien s’assurer que :
-
les URL sont uniques /amp
-
entre l’URL AMP et l’URL normale, on a utilisé des canoniques
-
on a ajouté le bon code Analytics pour suivre nos visites
-
les données sont structurées
On peut tester ses AMP avec la Search Console manuellement ou avec l’outil gratuit en ligne de test AMP.
Les extensions WordPress, parfois, ne mettent pas de l’AMP partout, il faut donc bien tout tester.
Les Progressive Web Apps (PWA)
Qu’est-ce que c’est ? Grosso modo, ça reste des sites web, mais qui ne réagissent pas comme des sites traditionnels, et s’associent à plein d’avantages qu’ont les applis mobiles. Les Progressive Web Apps sont à mi-chemin entre les applis et les sites traditionnels. Beaucoup de gens pensent que c’est l’avenir du web.
L’App Shell représente la trame de votre site et vous permet d’insérer du contenu. Elle contient un petit script, Service Workers, qui est installé entre votre téléphone et votre site web et injecte le contenu.
Les avantages de la PWA :
-
L’utilisateur n’a pas à l’installer (il n’y a donc pas de temps d’installation ni de mises à jour)
-
C’est cross-platform et cross-device
-
Pages extrêmement rapides à charger
-
Peut fonctionner hors ligne et l’utilisateur peut faire des notifications quand il perd sa connexion
-
Peut être indexée par Google
-
Amélioration progressive en fonction du device
En revanche, les PWA sont complexes à mettre en place.
Daniel déconseille d’utiliser les extensions WordPress qui existent pour la PWA, parce qu’elles ont plein de défauts. Une PWA est un énorme plus, mais à condition que ce soit bien fait.
Si vous faites une PWA avec une extension, il faudra la corriger.
Ou alors, vous la codez vous-même, mais sachez que ça vous prendra beaucoup de temps. Dans ce cas, Daniel recommande d’utiliser la REST API de WordPress pour envoyer et recevoir des données au bon format, et de « jouer » avec les hooks suivants :
-
stylesheet
-
template
-
theme_root
-
theme_root_uri
Peut-on allier PWA et AMP ?
Le problème de l’AMP, c’est qu’on est énormément bridé sur le rendu du contenu (les fonctionnalités, les scripts, etc.). La PWA a de gros avantages pour l’utilisateur : envoi de notifications, mises en cache...
Il s’avère qu’on peut allier PWA et AMP, et c’est même Google qui le conseille.
Pour cela, il faut d’abord mettre en place l’AMP (en n’oubliant pas de faire les corrections nécessaires). Et une fois que l’AMP fonctionne, que Google trouve vos contenus, etc., vous appliquer par-dessus le Worker de la PWA.
Ainsi l’AMP permet d’attirer l’internaute sur votre site, puis la PWA le fidélise.
Pour récapituler comment rendre réellement WordPress compatible pour tous les périphériques mobiles, Daniel conseille de :
- Avoir un site responsive
- Former ceux qui gèrent le site au quotidien
- Mettre en place l’AMP
- Rajouter une Progressive Web App
- (En option) Basculer tout le site en PWA (ou bien avoir un site mobile en PWA et site normal pour desktop).
Pour terminer, Daniel recommande Google Lighthouse pour vérifier que votre site obéit à toutes les préconisations sur les PWA.
Nous remercions Daniel pour son intervention riche en informations de qualité et en conseils utiles.
