AMP : Comment ça marche ?

Cet article est le premier d’une série consacrée au projet AMP, une initiative poussée par Google pour améliorer l’expérience utilisateur sur mobile.

Au sommaire de cette série :

  1. Nous allons commencer dans ce premier article par expliquer ce qu’est AMP, comment ça marche, et comment le mettre en place pour vos sites.
  2. Dans le deuxième article nous verrons ce qu’il faut prendre en compte lors du design d’une page AMP.
  3. Enfin, nous aborderons dans le troisième et dernier article les problématiques que pose ce projet vis à vis du Web ouvert et indépendant.

AMP, pour « Accelerated Mobile Pages », est un projet Open Source lancé par Google en 2015.

AMP est la solution de Google à un constat partagé par beaucoup. Les sites mobiles sont très lents, truffés de pubs et de popups intrusifs, et l’expérience utilisateur est en général très mauvaise. La solution de Google : retirer tout ce qui n’est pas nécessaire, mettre en cache tout ce qui peut l’être, et servir le tout depuis des serveurs Google.

Et histoire d’encourager tout le monde à adopter ce nouveau format, les pages AMP sont mises en avant sur les résultats de recherche de Google, et très souvent en tête de liste.

Pages AMP dans les résultats de recherche Google
Exemples pris totalement au hasard. 🙂

Tout de suite je vous sens beaucoup plus intéressés ! Passons aux détails un peu plus techniques de l’implémentation.

Comment ça marche ?

Plutôt que tout expliquer avec des mots, je vous propose une infographie illustrant le cycle de développement d’une page AMP.

Développement d’une page AMP

Le développement passe par 3 étapes :

  1. Création de la page à l’aide de balises et de composants prédéfinis.
  2. Validation de la page via le validateur officiel.
  3. Distribution de la page via Google et les autres fournisseurs de cache à l’aide de balises meta spécifiques à placer sur la page source pour indiquer l’URL de la version AMP correspondante.
Composants de la lib AMP Start
Composants fournis par la bibliothèque Composants AMP Start.

Le code des pages AMP diffère de celui des pages HTML sur plusieurs points.

  • Pas de CSS externe
    Il est impossible de lier une feuille de style externe. Donc impossible de mutualiser le CSS entre les différentes pages, ou bien entre les pages AMP et non-AMP.
  • Pas de JavaScript
    Impossible pour le développeur d’inclure son propre code JavaScript. Il est seulement possible d’utiliser ce qui est inclue dans la bibliothèque fournie par AMP.
  • Validation stricte
    Si une page devient invalide, Google la supprimera automatiquement de son cache. Pensez donc à bien valider vos pages avant chaque mise en production.
  • Pas de formulaire*
    Donc pas de newsletter, formulaire de commentaire, formulaire de contact, tunnels de paiement, ou quoi que ce soit qui comporte un champ de formulaire.
    * il est tout de même possible d’utiliser des composants mis à dispo par AMP qui eux contiennent des formulaires.

VERS Un Web mobile encadré ?

Si je récapitule, ce que propose Google via son projet AMP est simple et direct. Si nous, acteurs du web, ne sommes pas capables de nous restreindre, alors Google le fera pour nous.

Ce cadre que nous impose Google vous semble contraire aux principes d’ouverture et de liberté inhérents au Web ? Et que dire de la liberté des designers de concevoir et innover ? Rendez-vous la semaine prochaine pour un début de réponse.

Series NavigationAMP : Principes de design >>

A propos de l'auteur

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Ajouter un commentaire

Laisser un commentaire

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Sur les réseaux

Derniers articles