AMP : une méthode de développement dédiée au mobile à favoriser pour le SEO — Partie 1

Que faites-vous lorsque vous ouvrez votre navigateur internet sur votre mobile et que la page ne s’est pas affichée dans les 5 premières secondes ? Le temps semble durer une éternité dans ces situations bien trop fréquentes, et il y a de grandes chances pour que vous vous rendiez sur un autre site, au grand désarroi des éditeurs de contenu.  Éviter ce type de déconvenue est tout l’enjeu des pages AMP !

Alors comment fonctionnent ces pages web mobiles ? Quels sont leurs avantages, mais également leurs contraintes, notamment en termes de collecte de données ?

Afficher les pages mobiles plus rapidement avec la technologie AMP

L’Accelerated Mobile Pages (AMP), est une technologie web mobile disponible en open source, lancée par Google en 2015 avec plusieurs partenaires. La finalité des pages AMP est de diminuer considérablement leur temps de chargement par rapport à des pages web classiques, améliorant ainsi l’expérience utilisateur. Un éditeur qui souhaite utiliser cette technologie devra donc avoir 2 versions de son site : AMP (mobile) et desktop.

Les pages s’afficheront au format AMP seulement si elles respectent scrupuleusement les règles de syntaxe et d’utilisation. Pour valider leur code, les développeurs peuvent le soumettent à l’AMP validator.

Afin d’afficher plus rapidement le contenu, les contributeurs du projet AMP ont notamment optimisé :

• La structure de la page, en créant des balises AMP-HTML spécifiques. Elles reprennent les composants HTML W3C, mais avec certaines restrictions et certaines extensions.
• Le design de la page, en autorisant uniquement les feuilles de style en ligne, limitées à 50 Ko,  qui ne provoquent pas de requêtes HTTP supplémentaires ralentissant l’affichage de la page.
• Le choix du mode de chargement du JavaScript : les pages AMP intègrent exclusivement du JavaScript asynchrone, c’est-à-dire que plusieurs fichiers JavaScript se chargent simultanément, par opposition au JavaScript synchrone où les fichiers se chargent les uns après les autres. Un fichier JavaScript asynchrone peut donc réduire considérablement le temps d’affichage des premiers éléments d’une page Web (images, structure HTML etc.).
• L’utilisation du JavaScript : sur les pages AMP, le JavaScript est codé au sein d’éléments AMP-HTML customisés (bibliothèque AMP JS). Ce JavaScript est optimisé mais standardisé. Les développeurs n’ont pas la possibilité d’intégrer leurs propres scripts dans le processus principal (mais il peut être intégré dans une balise amp-iframe qui ne ralentit pas l’affichage de la page).
• Le cache : Pour diminuer les temps de chargement, les pages AMP sont mises en cache, ou stockées par les plateformes Google ou Cloudflare pour être ensuite  restituées plus rapidement aux utilisateurs.

Un intérêt croissant des éditeurs de sites pour la technologie AMP

On compte aujourd’hui 25 millions de domaines qui utilisent ce format, essentiellement des sites de presse auxquels la technologie s’adressait initialement (CNBC, The Washington Post, The Guardian, Spiegel Daily, etc.). Mais il y a désormais un vif intérêt de la part des sites e-commerce pour intégrer cette technologie dans leur environnement (AliExpress, eBay).

Les avantages sont en effet multiples. En premier lieu, elle permet d’avoir une meilleure expérience utilisateur avec des pages qui s’affichent quasiment instantanément. Les marques engagent davantage leurs clients et leurs prospects sur leurs sites, le tout au profit des taux de conversion.

Le deuxième intérêt de la migration vers des pages AMP est l’impact potentiel sur le référencement naturel de son site ( SEO). En effet, le temps de chargement d’une page est un paramètre pris en compte par Google pour ses résultats de recherche sur mobile.

Enfin, la visibilité des articles ou produits lors d’une recherche sur Google se trouve grandement favorisée. Les articles AMP sont en effet marqués d’un symbole qui prend la forme d’un petit éclair. Ils peuvent également apparaître dans un « host » carrousel ou un carrousel « top-stories » s’inspirant des stories de Snapchat, comme dans l’exemple ci-dessous des dernières nouvelles du journal Ouest France.

Les limitations sur l’utilisation du JavaScript imposent de nouvelles contraintes aux solutions de webanalyse

Parmi l’ensemble des contraintes techniques imposées par AMP, la limitation de l’utilisation du JavaScript est la plus problématique puisqu’elle aura un impact considérable sur la manière de collecter les données sur ces pages web spécifiques.

Sur un site web classique, les outils de webanalyse fournissent un script à intégrer sur chaque page du site. Ce script charge une librairie JavaScript et les développeurs appellent des fonctions natives à cette librairie dans leur code pour envoyer de la donnée vers les serveurs des outils. L’utilisation du JavaScript est donc quasiment incontournable dans leur utilisation standard.

Or les pages AMP cantonnent l’utilisation du JavaScript au sein de la bibliothèque AMP JS. Les solutions de webanalyse comme Google Analytics ont donc déployé leur propre balise spécifique. Cependant, des contraintes techniques pour les utilisateurs de ces solutions émergent, modifiant l’utilisation des outils comme Google Tag Manager pour le web.

Pour que les éditeurs de sites web décident massivement de migrer une partie de leur infrastructure vers les pages AMP, encore faut-il qu’il y ait une continuité dans la collecte des données ! Et c’est d’autant plus le cas pour les sites marchands ou e-commerçants, qui sont nombreux à utiliser notamment le tracking avancé des données e-commerce, ou “Enhanced Ecommerce”, une fonctionnalité que possède Google Analytics permettant d’enrichir le tracking sur les sites e-commerce. Or la documentation Google n’explique pas, à l’heure où nous écrivons ces lignes, comment procéder…

Chez fifty-five, nous avons étudié l’intégration de Google Analytics sur des pages AMP et testé les différentes possibilités pour collecter des données e-commerce. Loin d’être complexe, la collecte de données e-commerce avancées à partir de pages AMP peut se faire de multiples manières… Alors comment procéder pour transmettre des données Enhanced Ecommerce à Google Analytics à partir de pages AMP ? Et est-il possible de collecter des données ecommerce avancées sur des pages AMP avec d’autres solutions d’analytics (Adobe Analytics, Facebook Analytics…) ?

Si vous voulez en savoir plus, découvrez la suite de cet article ici !