Vous êtes-vous déjà demandé à quel point est important la partie mobile de votre site ? Si vous regardez souvent les articles sur le référencement ou même la création de site web, vous avez certainement déjà vu tout l’engouement autour du web Mobile.

On parle depuis plusieurs années du responsive design, le fait que les sites web puissent s’adapter à l’écran qui les affiches. Que ce soit 3 pouces ou bien 25 pouces, votre site peut s’adapter grâce à cette technologie.

Mais le plus important est de bien comprendre que le mobile prend une part importante dans le web. Selon cette infographie de Hootsuite :

infographie de Hootsuite sur le trafic web et ses appareils

Le mobile est utilisé à 34% sur le web, c’est 49% plus qu’en 2017.

De plus, nous ferrions plus de recherches via Google sur mobile que sur ordinateur.

Ces chiffres montrent réellement l’importance d’adapter son site aux mobiles mais également de les rendre plus performant pour ces appareils.

On parle également de développer des sites web d’abord pour les mobiles et ensuite pour les ordinateurs, ce qui était l’inverse auparavant. En effet, on parle de « Mobile-first », le mobile en premier.

Google compte changer la façon de faire pour ses classements, on parle également d’« Index Mobile First ». Le moteur de recherche va classer les sites selon la version mobile et non plus selon la version desktop.

Il y a une vraie tendance pour le mobile et si vous n’avez pas encore fait le pas, je vous conseille de vous y mettre dès maintenant.

Pour ceux qui ont déjà fait ce pas et qui souhaitent optimiser encore plus leur site web en termes de temps de chargement mais également de référencement naturel, je vous propose de passer vos pages au format Accelerated Mobiles Pages ou bien AMP pour les intimes !

Qu’est-ce que le projet Accelerated Mobile Pages (AMP) ?

Le projet AMP est né de la collaboration entre Google et Twitter. Il a pour but d’améliorer le temps de chargement des pages sur mobile. C’est un projet en open source qui reprend un site déjà adapté par mobile en lui enlevant ce qui est lourd à charger. Cela donne simplement une page sobre et efficace.

Toutes les informations sur le projet se trouvent ici : https://www.ampproject.org/fr/
Cependant les traductions ne sont pas encore très bien travaillées, il y a encore beaucoup d’anglais dessus.Le site du projet AMP

Google a bien saisi l’importance d’adapter les pages aux mobiles, les chiffres en introduction montre l’intérêt des utilisateurs pour les mobiles.

Google cherche à donner de la pertinence dans ses résultats de recherche.

La pertinence d’un résultat, c’est quoi ?

  • Premièrement, c’est un résultat qui correspond à l’attente de l’internaute, qui vient répondre à son besoin, à sa demande.
  • Deuxièmement, c’est un résultat qui va accessible, c’est-à-dire qui va se charger rapidement et qui ne va pas le bombarder de pubs. C’est ce qui se rapporte à l’ergonomie finalement.

Google vient à travailler sur le coté Ergonomie et interaction entre la page web et l’utilisateur. Cela s’inscrit dans leur processus de pertinence qui leur permet de fournir une meilleur expérience utilisateur et donc beaucoup plus de bénéfices à la clé.

Comment fonctionne l’AMP ?

Selon un article de Search Engine land, Il y a 3 parties :

  • AMP HTML : Cela fonctionne de la même manière que l’HTML grâce à un système de balise.
  • AMP JavaScript : C’est un Framework javascript pour les pages mobiles. Il n’y a pas besoin de s’attarder dessus, il n’y a pas de JavaScript en AMP. Le but est d’avoir une page légère.
  • AMP CDN : Google va mettre en cache vos contenus / images grâce à son CDN. Vous aurez des performances optimisées automatiquement.

Pour simplifier, l’accelerated mobile pages va rendre vos pages mobiles plus rapides en utilisant les balises propres au projet et en supprimant celles inutiles aux mobiles. Votre page est plus sobre donc plus performante.

Voici un schéma tout simple pour mieux comprendre :Explications sur le projet Accelerated Mobile pages

À gauche, vous avez la page web classique, non mobile.

En haut à droite se trouve la page AMP, disponible depuis les mobiles.

En bas à droite se trouve la page mise en cache par Google, gstatic.

Les flèches en vert représentent des balises link rel= « canonical » qui permettent de montrer la page source pour éviter le contenu dupliqué et l’autre balise link rel= « amphtml » sert à designer la version amp de la page normale.

Sachez également ces quelques points :

  • Le CSS utilisé est beaucoup plus limité.
  • Vous êtes limité en javascript. Ce langage est lourd donc on l’utilise le moins possible
  • Vous devez valider vos pages AMP
  • Pas de formulaire
  • Déclarer la hauteur et largeur de vos images
  • La vidéo demande des extensions approuvées par le projet

Comment mettre en place L’AMP

Installer Le projet AMP sur son site n’est pas une chose bien compliquée. Cela va dépendre de la façon dont vous générez votre site. Est-ce que c’est grâce à un CMS type WordPress ou bien est-ce pour un site développé avec du code pour une utilisation spécifique ?

Site développé sans CMS :

Pour ceux qui ont un site codé et sans CMS, voici les informations que je peux vous donner.

Cela va vous demander de reprendre votre contenu originel et de changer le balisage. Cela se passe en 6 étapes :

  • Créer votre page AMP HTML
  • Inclure une image
  • Modifier la présentation et la disposition
  • Prévisualiser et valider
  • Préparer votre page pour la détection et la distribution
  • Quelques étapes avant la publication

Si vous souhaitez mettre cela en place, je vous invite à vous rendre ici : https://www.ampproject.org/fr/docs/getting_started/create

Site développé avec WordPress :La zone de téléchargement des plugins AMP

Vous êtes sur WordPress ? Bonne nouvelle, ça va être beaucoup plus rapide à mettre en place, vraiment ! Je peux vous proposer deux plugins qui fonctionnent très bien :

  • AMP for WordPress : développé par ceux qui ont créé WordPress, il est très simple et efficace.
  • AMP for WP – Accelerated Mobile Pages : développé par deux frères assez puissant et flexible.

Il vous suffit de l’installer et de le paramétrer. Pour ma pat je vous conseil de mettre en place l’AMP simplement pour vos articles et pas l’ensemble de vos pages.

Pour les autres CMS :

Il existe quand même des ressources :

Les bénéfices de l’Accelerated Mobile Page

Vous l’aurez compris, avec l’AMP, vous allez pouvoir augmenter la vitesse de chargement de vos pages mobiles. Il y a vraiment un gain non négligeable.Les stats liées au projet Accelerated Mobile Pages

Mais qu’est-ce que cela entraine ?

Un visiteur qui peut naviguer de manière extrêmement fluide sur votre site a beaucoup plus de chance d’y rester. Cela entraine une réduction du taux de rebond et possiblement plus de ventes puisque l’expérience utilisateur est améliorée.

Voici un exemple de pages AMP et non AMP :Comparaison entre AMP et non AMP

Le design en est très simplifié même si de base, le design de mon blog reste très simple.

Voici quelques avantages :

  • Un chargement rapide que les utilisateurs adorent : passer de 2 secondes à 0.7 secondes change réellement l’expérience utilisateur
  • Augmentation de la visibilité dans les SERPs mobiles: on peut venir à afficher son contenu directement dans le carrousel en haut des résultats, comme ceci :Une recherche avec des résultats AMP
  • Bénéfice en termes de placement dans les SERPs : qui dit vitesse de chargement rapide dit meilleure expérience utilisateur et donc impact sur résultats de recherches.

 

Mes conseils pour optimiser votre site avec AMP

L’Accelerated Mobile Page s’installe sur l’ensemble de votre site si vous le souhaitez : Votre page d’accueil, de contact, de services, vos articles… Partout !

Cependant, je vous conseille une chose : n’installez pas l’AMP sur l’ensemble de votre site. Je vous incite à l’installer que sur vos articles de blog.

Pourquoi ? Parce qu’au final vous allez devoir recréer un site web complet tout en revoyant votre charte graphique. Tandis qu’avec les articles, on ne s’attend pas forcément à une page extrêmement travaillée d’un point de vue design mais bien à un contenu à haute valeur.

Les désavantages de l’AMP

Après tous les bénéfices qu’on vient de voir, je tiens cependant à vous mettre en garde. L’AMP n’est pas forcément apprécié par tous.

Le premier problème est que si votre CMS ne propose pas d’extension pour l’AMP ou bien que vous deviez coder vous-même l’AMP, la mise en place est plutôt compliquée.

Pour publier du contenu, cela demande plus de temps et également des ressources humaines supplémentaires qui ont des capacités techniques pour créer et gérer ces pages AMP.

Si vous êtes sur WordPress par exemple, ce problème ne vous concerne pas.

Le deuxième problème est que cela peut avoir un impact négatif sur vos ventes. Je disais un peu plus haut que cela va augmenter le temps passé sur votre site, oui ! Mais vous perdez le coté marketing sur vos pages et également l’identité que vous avez créé grâce à votre charte graphique.

Je montrais une image de 2 pages, on pouvait voir que la sidebar n’était plus présente, ce qui peut avoir un impact sur vos publicités, liens affiliés, inscription aux newsletters…

On peut voir sur la sphère anglophone plusieurs articles de blogueurs qui sont contre ce processus AMP. Tapez « avoid AMP » dans Google, il y a plus de 110 millions de résultats. On peut également voir certains articles francophones comme celui d’Oseox, il expliquera le problème de manière plus complète que moi.

On peut également voir des personnes réussir à faire mieux que l’AMP, par exemple ce tweet :Un tweet au sujet de l'AMP

«  Mon blog est plus rapide que la version AMP de Google
Vrai site web : 12.9 KB (111ms) Google AMP : 249.9KB (328ms) Je gagne »

Conclusion

Après avoir fait tout un argumentaire sur le fait que l’AMP est très bon pour votre site, référencement naturel, etc. Je vous dis juste après qu’il peut être mauvais pour votre business.

La question que vous devez certainement vous posez maintenant est : Est-ce que j’installe le projet sur mon site ou pas ?

Je ne peux pas vous donner la réponse claire et précise parce que cela dépend des cas mais voici ce que je peux vous dire pour vous aiguiller.

J’ai moi-même plusieurs sites que je gère et le seul à avoir l’AMP est celui sur lequel vous lisez cet article. En effet, je souhaite donner la meilleure expérience à mes lecteurs avant tout, ce qui m’empêche d’avoir ma sidebar où je me présente et où je mets des liens qui sont importants pour moi. Ceci-dit, je pourrais certainement retirer l’AMP de mon site un beau jour.

Je vous conseille de faire le pour et le contre, aux vues des éléments au-dessus. Mais je conseillerais à des sites qui ne souhaitent pas monétiser leur blog de mettre de l’AMP et le reste de ne pas le mettre.

Je reviens également sur un élément important : en juillet 2018, Google passe son index en mobile first. Il va d’abord analyser votre site mobile et classer ce dernier. Avant c’était le site mobile que l’on venait à classer. Il va y avoir du mouvement dans les SERPs.

Ayez au moins un site responsive design, l’AMP reste facultatif et dépend de votre stratégie d’acquisition de client.

Si vous souhaitez en parler et débattre, rendez-vous sur les commentaires de la vidéo en début d’article pour poster vos questions et remarque.

J’espère que cet article vous plaira et à bientôt pour le prochain.

Share This