Sommaire de la série / Comprendre AMP et ses enjeux
- AMP : Comment ça marche ?
- AMP : Principes de design
- AMP : Et le Web ouvert dans tout ça ?
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 :
- 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.
- Dans le deuxième article nous verrons ce qu’il faut prendre en compte lors du design d’une page AMP.
- 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.
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 :
- Création de la page à l’aide de balises et de composants prédéfinis.
- Validation de la page via le validateur officiel.
- 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.
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.
