Ce que vous devez savoir sur AMP

google AMP accelerated mobile pages

Il ne se passe quasiment pas une semaine sans que le projet AMP ne fasse parler de lui dans l’actualité du web. Mais pourquoi s’intéresser à AMP ? Comment ça marche AMP ? Et qu’est-ce que ça peut changer ?

On va essayer de tout vous raconter en trois questions, promis, mais on ne pouvait pas se passer d’une quatrième question…qui sera la première, et qui est :

C’est quoi déjà AMP ?

Acronyme d’Accelerated Mobiles Pages, AMP a pour ambition d’accélérer le chargement des pages web sur mobile. Lancé par Google en février 2016, le projet est initialement destiné aux sites de presse anglophones comme BBC News, The Washington Post, ou encore The Guardian.

Concrètement, voici à quoi cela ressemble :

Comme vous le voyez, une page peut avoir une version AMP et une version non-AMP.

Depuis, le projet AMP n’a pas cessé d’évoluer et peut même s’appliquer aujourd’hui à des sites e-commerce (comme par exemple Alibaba ou ebay).

 

Pourquoi s’intéresser à AMP ?

Pour pleins de raisons ! En regardant les évènements et le trafic sur le web de ces dernières années, c’est même assez logique. Mais… pourquoi ?

Parce que le “mobile moment” est arrivé

On ne vous apprendra rien en vous disant que le trafic mobile prend de plus en plus d’avance sur le trafic “desktop” (sur ordinateur), mais un cap a été franchi en novembre 2016, où d’après StatCounter, le trafic mobile a pour la première fois dépassé le trafic “desktop”.
Cette tendance s’est confirmée également dans le domaine de la recherche en 2017 par Google dans ce qu’ils appellent le “mobile moment” : le nombre de recherches mobiles aurait dépassé le nombre de recherches “desktop”.

Parce que les sites mobiles sont affichés en priorité…

…sur les résultats de recherche sur mobile, bien sûr. Google a annoncé la création de l’index “mobile first” en novembre 2016. Et depuis ce “mobile moment”, ne pas avoir de site mobile, c’est accepter d’avoir moins d’utilisateurs… ou plus d’utilisateurs insatisfaits !

Parce que Google ne veut plus faire le passe-plat

On le savait déjà : avec le Knowledge Graph, les Featured Snippets, les Instant Answers, et maintenant AMP, la logique de développement de Google est plus que jamais de garder les utilisateurs chez lui. Et c’est ce qu’il se passe avec AMP : une fois qu’un contenu est lu, l’utilisateur revient plus facilement à son résultat de recherche ou à un autre résultat de recherche, augmentant ainsi le taux de rebond.

Parce que les pages AMP sont affichées en priorité

Ce n’est pas encore vrai pour tous les résultats de recherche, mais c’est déjà un prérequis pour figurer dans les sliders d’actualités. Si vos concurrents utilisent AMP et pas vous, vous leur ouvrez un boulevard d’opportunités.
Et d’ailleurs, après l’index “mobile first” décrit plus haut, pourquoi Google n’afficherait-il pas uniquement les pages AMP d’ici quelques années ? Et pourquoi ne généraliserait-il pas son concept au “desktop” ?

Parce que le temps de chargement est un critère de classement

On en parlait dans la revue du web, Google a officialisé en janvier 2018 le “speed update” qui vise à prendre en compte la vitesse de chargement d’un site comme un critère de classement dans ses résultats mobile. Et ça tombe bien, c’est exactement ce que permet AMP !

 

AMP : comment ça marche ?

Créer une page compatible AMP est assez simple en suivant le tutoriel sur le site du projet (même moi j’y arrive), en revanche, adapter un site au format AMP, ce n’est pas si simple…

Tout d’abord, sur la version non-AMP d’une page, vous devrez ajouter une balise qui mentionne l’adresse de la version AMP de cette même page (par exemple : https://www.monsite.fr/a-propos/amp). Sur la même page version AMP, les choses se compliquent, vous devrez :

  • ajouter plusieurs balises (dont charset, viewport), une URL canonique, et même un éclair ⚡après la balise html, oui oui, un éclair !
    (attention, ça ne fonctionne pas avec l’emoji nuage + pluie + éclair ⛈)
  • intégrer les styles CSS au sein de votre page, c’est à dire sans faire référence à un fichier CSS
  • de même pour le JS, où AMP impose des bonnes pratiques
  • transformer certaines balises, par exemple une balise img devient amp-img
  • utiliser des composants spécifiques pour gérer des animations et des interactivités (intégrer un slideshow, un code de suivi Google Analytics, des sections en accordéon…). Attention, il faut vous attendre à une version dégradée de votre page non-AMP !
  • …ah oui, et il y a des balises interdites, et d’autres qui auraient mérité d’être précisées. Par exemple, sur la balise SVG, il est écrit que “la plupart des éléments SVG sont autorisés” sans plus d’explications.

Bien heureusement, pour faciliter la mise en place des pages AMP, plusieurs outils ont été mis en place :

  • AMP Validator permet de vérifier si un code est conforme AMP ou non. Si ce n’est pas le cas, AMP Validator indique clairement les erreurs et propose des solutions
  • Test AMP permet d’analyser la compatibilité AMP d’une URL précise
  • Enfin, Google Chrome permet également de vérifier la conformité d’un code AMP, sans devoir passer le site AMP Validator

Notez au passage qu’il y a peu de chances qu’un site soit transposable exactement tel quel dans sa version AMP, et qu’à aucun moment nous n’avons parlé du design ! Je vous laisse imaginer les échanges entre directeurs artistiques et développeurs…

AMP accelerated mobile pages

Quand votre serviteur était encore au Poudlard de l’AMP

Est-ce qu’il faut tout passer en AMP ?

Oui, non… en fait, pour être honnête, personne ne sait. Google essaye d’imposer une nouvelle norme dans le web avec le projet AMP, au même titre que le W3C, mais celle-ci évolue sans cesse et n’est pas simple à maintenir.

Passer à AMP, c’est accepter les règles de Google : faire des compromis graphiques, accepter de voir augmenter son taux de rebond, limiter les contenus dynamiques… mais dans certains cas comme le Kitch-o-maton de La Haute Société, on imagine difficilement une version AMP.

En revanche, dans certains domaines, il suffit que certains éditeurs de site se rangent du côté d’AMP pour faire chuter le trafic des autres. C’est par exemple ce qu’il est en train de se passer sur les sites d’actualités : je vous invite à faire des recherches liées à l’actualité sur votre smartphone, et suis prêt à parier que vous ne verrez que des éclairs.
Dans le top 50 des sites d’actualités en France, 15 sites étaient compatibles en 2016, et 25 en 2017.


Pour ne rien rater de nos actualités, inscrivez-vous à notre newsletter !