Le projet AMP, son historique et les raisons de sa création

Le logo du projet AMP

Le logo du projet AMP

D’après la description officielle, l’AMP pour Accelerated Mobile Project, est un projet open source lancé par Google en collaboration avec Twitter en février 2016. Ce projet est passé par une phase expérimentale en 2015 depuis son lancement, visant à améliorer l’environnement du contenu pour tous. En d’autres mots, cela viendrait à créer des contenus web à la fois rapide et donnant une meilleure expérience utilisateur. Ce sont des modules à ajouter à votre page web, dont vous avez totalement le contrôle pour améliorer le contenu de vos pages.

Créé sur la base des compétences et connaissances liées à la conception web, il supporte différentes plateformes et l’AMP inclus 25 millions de domaines, plus de 100 fournisseurs de technologie et la majeure partie des navigateurs liés à la publicité, le E-commerce, les petits business ou locaux.

Les composantes de l’AMP

Le projet AMP est subdivisé en petites parties et chacune d’elle a une spécification  particulière et est destinée à un but précis. Il existe trois parties :

  • Il est du HTML comportant certaines restrictions pour assurer des performances fiables, ainsi que certaines extensions permettant de créer du contenu enrichi plus élaboré qu’avec le HTML de base.
  • La bibliothèque AMP JS, qui garantit un rendu très  rapide des pages AMP HTML.
  • Le Google AMP Cache ou CDN (en option), fournit les pages AMP HTML optimisées automatiquement grâce un système de backuping de vos images et autres afin de les restituer plus rapidement.

Comment mettre l’AMP sur votre page web ?

Qu’est-ce qui rend l’AMP différent des autres ?

La particularité de ce « langage » réside dans le fait qu’il débute par un entête comme suit :

< ! DOCTYPE HTML > OU  < HTML AMP > qui marche aussi bien. Le reste des choses à savoir en ce qui le concerne est accessible sur le site AMP by example. Dans l’affichage, il est caractérisé par un « petit éclair » en dessous du titre et de la description qui signifie que la page est en « mode AMP » , contrairement à la version non optimisée en AMP qui n’en possède pas.

La page en version  HTML donne plus de détails et voilà pourquoi il prend du temps à se charger. Dans la version AMP ce n’est que l’essentiel qui est affiché.

Pour ceux débutant dans le Web design, il est préférable de disposer de deux versions de vos pages d’articles : la version HTML (principale on peu dire) et la version AMP. Vu que l’AMP ne permet pas certains points comme les éléments et les tierces parties des JavaScripts, vous ne disposerez plus de commentaires, et d’autres éléments pour avoir votre page en affichage standard.

Comme indiqué plus haut, la mise en page de la version AMP de votre page requiert des adaptations particulières de votre page en version HTML avec la mention < ! DOCTYPE HTML > OU  < HTML AMP > en début de code. La seconde particularité réside dans le fait qu’il faut indiquer aux Google bots que votre page est en  AMP  grâce à la ligne de code suivant :

Head

<meta charset=’’utf-8’’>

<script async src=’’https://cdn.ampproject.org/v0.js’’></script>

<link rel=”canonical” href=”https://ampbyexample.com/introduction/hello_world/”>

Le fichier  AMP requiert  une déclaration reporter à une valeur initiale=1 :

<meta name=”viewport” content=”width=device-width, minimum-scale=1,initial-scale=1″>

Il est à noter quand même qu’au niveau du code CSS que l’ensemble du fichier ne doit dépasser la taille de 50 KB suite aux nombreuses restrictions dont la version AMP fait face.  Par exemple, pour insérer une image dans votre page, vous devez le faire en utilisant une balise spéciale. Ceci est pareil pour le cas où vous voulez héberger une vidéo localement par le biais  de HTML5, appelé AMP-Video.  Pour ceux important une vidéo de YouTube, il existe une balise aussi, l’AMP-YouTube. Il existe aussi d’autres balises pour les slideshows à travers AMP-Carousel,  AMP-image-lightbox pour les images lightboxes. Les réseaux sociaux tels que Twitter, Facebook, Instagram, Pinterest et Vine, utilisent chacun leur propre balise pour pouvoir les utiliser.

En vue de faire « détecter » la version AMP de votre article (ainsi que toutes les autres technologies supportant l’AMP), la version originale de votre article doit comporter la mention suivante, qui est une balise canonique indispensable pour les pages AMP :

<link rel=”amphtml” href=”http://www.exemple.com/blog-post/amp/”>

Utiliser le projet AMP sur les CMS:

Comme vous vous en doutez, il existe des plugins vous permettant d’intégrer l’AMP à votre page web pour ceux qui gèrent leurs sites par le biais des CMS tels que WordPress, Joomla, etc.

Vous êtes sur WordPress ? Bonne nouvelle, ça va être beaucoup plus rapide à mettre en place. Il deux bons plugins disponible sur le site officiel de WordPress que nous vous propose et qui ne nécessite que l’installation puis le paramétrage et c’est fin prêt pour être utilisé. Il s’agit de :

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. Il est recommandé de mettre en place l’AMP simplement pour vos articles et pas l’ensemble de vos pages.

Pour ce qui est certains des autres CMS, voici ce qui existe :

Quelques avantages liés à l’AMP:

Le premier  but de l’AMP étant de valoriser une navigation plus rapide et plus fluide sur les appareils mobiles (pages web mobile), 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.

Un chargement rapide que les utilisateurs adorent : passer de 2 secondes à 0.7 secondes change réellement l’expérience utilisateur.  Ce qui entraîne un meilleur classement dans les SERPs mobiles.

De petits inconvénients à noter :

L’AMP est un véritable passe partout car il peut s’installer à tous les niveaux de votre site (page d’accueil, fiches produits, les services, etc.).

Néanmoins il peut représenter pour un site web donné (lorsque installé sur toutes les pages du site) une perte de temps considérable car cela reviendra à « cloner » votre site principale ce qui n’est pas nécessaire car juste opérant le changement sur les pages comportant les articles suffit.

Le second problème est que pour certains sites, la version AMP est même plus lente que la version HTML. A ce niveau, il est conseillé de conserver votre site que vouloir opérer des modifications qui ne vous servent à rien.

Conclusion

L’AMP, bien que possédant de véritable atouts et offrant beaucoup d’opportunités pour ce qui est de faire chuter le taux de rebonds sur votre site mobile, améliorer le taux de clics ainsi que votre classement dans SERPs ; il a quelques petits défauts qui produiraient l’exact contraire des résultats escomptés. Ainsi, avant de « devenir » AMP, veillez à analyser tous les contours et si possible, demander l’avis de quelques experts du domaine.