AMP. Ou « Accelerated Mobile Page ». Derrière cet acronyme un peu barbare qui est sur toutes les lèvres se cache une petite révolution dans l’univers du web. Il s’agit en fait de la dernière innovation de Google en matière d’optimisation du contenu digital.
Decryptage. 😉
AMP, ou le principe d’offrir du contenu ultra-rapide sur le web mobile
Comme moi, vous avez dû connaître la frustration de ne pouvoir charger un contenu depuis votre mobile, alors que vous vouliez accéder à une information toute simple.
Dans ce genre de cas, comme tout le monde, vous quittez le site pour aller chercher le même contenu ailleurs. Et vous n’êtes pas seuls dans ce cas ! La plupart des internautes réagissent négativement face aux lenteurs et plébiscitent les expériences les plus rapides. Ce comportement utilisateur a pour conséquence un bien meilleur taux d’engagement des utilisateurs, et un meilleur référencement pour les sites qui auront misé sur la Web Performance.
Et c’est dans ce contexte de quête d’instantanéité, que le projet open-source AMP est lancé en 2016, par Google. Ce projet a d’ailleurs bien grandi depuis puisqu’il représente désormais une communauté de plus de 160 contributeurs au travers du monde.
Plus concrètement, AMP décrit un format permettant de créer une page qui va s’afficher plus rapidement sur les terminaux mobiles. Nous parlons ici d’un temps médian perçu par les utilisateurs de moins d’1 seconde.
Techniquement, les pages AMP sont finalement justes des pages web “normales”, en HTML, et donc compatibles avec l’ensemble des navigateurs web. Elles sont néanmoins fine-tunées pour être très légères dans leur chargement sur mobile. Et c’est là où ce projet devient intéressant pour Quanta, car Google touche directement à la question de la Web Performance sur mobile.
Le fonctionnement de Google AMP
AMP répond à plusieurs problématiques pour la rapidité d’affichage du contenu.
- Chargement instantané (originellement Instant rendering)
Il y a dans AMP la possibilité d’effectuer du pré-chargement des liens que l’utilisateur serait à même de cliquer, de sorte que lorsqu’il clique, le contenu s’affiche immédiatement comme s’il était déjà totalement en cache (en fait c’est un peu le même principe que le cache d’ailleurs, sauf qu’on le construit avant même d’accéder au contenu pour la première fois).
Pour ne pas trop surcharger le CPU et la bande passante nécessaire pour charger des contenus que l’utilisateur n’irait finalement pas voir, le système AMP va se contenter de pré-charger le haut de la page de destination uniquement et quand l’utilisateur accède réellement au contenu le reste de la page est chargée pendant qu’il prend connaissance du haut de la page.
- Non-modification de la mise en page pendant le chargement des éléments
Dans AMP, la taille de chaque élément est fixée dans le code HTML, ce qui permet d’éviter les “surprises” en cours de chargement. Une fois que le texte est affiché, il ne bougera plus tant que l’utilisateur n’interagit pas avec la page, s’assurant ainsi que la lecture ne soit pas perturbée.
Bien entendu, ce principe ne vaut pas que pour le texte classique. 😉 Si vous avez des vidéos et plein de trucs funky avec des “call to action” à afficher entre les paragraphes de votre texte, AMP peut se révéler une aide précieuse grâce au système des placeholders.
Grâce aux placeholders, vous pouvez ainsi afficher des bannières de pubs, des vidéos, ou n’importe quel autre élément venu d’extensions diverses, mais la taille de chaque élément sera pré-définie dans la page avec une zone pré-établie (typiquement un carré gris).
Un exemple simple serait celui d’une vidéo Youtube. Sur la page AMP, un rectangle prédéfini va s’afficher dans un premier temps, puis se remplir avec le preview d’une vidéo YouTube pendant que l’utilisateur est tranquillement en train de lire l’article.
Cerise sur le gâteau, ce système de placeholders pour les éléments d’une page AMP fait que le problème (récurrent) des pages qui se décalent au fur et à mesure du chargement des éléments n’existe plus. Plus besoin donc de “scroller” pour retrouver la ligne sur laquelle on était, comme si on reprenait la lecture d’un livre en étant dérangé toutes les 3 secondes !
- Les polices de caractères
Il y a dans le web une certaine lourdeur technique dans le chargement des fonts (ou polices de caractères) qui pour la plupart des pages se chargent très tard dans le déroulement du téléchargement de la page. Généralement, les polices de caractères vont être chargées après tout contenu pouvant éventuellement faire appel à une font, soit après l’ensemble des javascripts. Avec AMP, l’ordre de chargement est optimisé, et la ou les fonts vont pouvoir se charger dès le début en parallèle du reste ce qui fini par rendre l’affichage final beaucoup plus rapide.
- Analytics et vitesse enfin réunis
Avec AMP, l’usage des tags est limité de sorte d’éviter d’avoir plusieurs dizaines de tags pouvant potentiellement bloquer la page.
Chez Quanta, nous constatons que certains e-commerçants gardent fréquemment des tags dont ils ne se servent plus, ce qui ne fait que ralentir leurs utilisateurs. Et chacun de ces ralentissement amène un impact négatif sur leur taux de conversion.
Dans AMP, le sujet a été donc pris au sérieux pour éviter au maximum ces chargements intempestifs. Les tags peuvent être appelés mais seulement via une interface unique qui ne peut pas ralentir la page (asynchrone). Pour la plupart des “tag vendors”, l’implémentation du système de Google est assez simple. Maintenant, si vous utilisez des tags un peu plus “exotiques”, il sera toujours possible d’y faire appel moyennant un peu d’adaptation technique pour les utiliser avec AMP.
Toutes ces spécificités du système AMP ne sortent bien sûr pas de nulle part. Ce sont le résultat de nombreuses recherches et choix finalement très malins issus de discussions entre “perf-gurus” qui en avaient certainement assez qu’Internet soit toujours aussi lent, et ce, malgré les avancées technologiques.
Une innovation et…une controverse
Google AMP a pour but ultime une rapidité jusqu’ici inégalée sur mobile, soit un chargement qui parait désormais “instantané”. Cela semble donc une arme de web performance parfaite.
Cependant, comme toute nouveauté technique, Google AMP ne vient pas sans controverse.
Tout d’abord, il est à noté que ce nouveau format a été lancé sans l’aval du consortium W3C, qui, comme chacun le sait, est chargé de régir internet de façon ouverte et indépendante, à la manière d’un conseil des sages. Ce respect tacite du rôle du W3C sur le net permet bien souvent aux nouveaux formats qui peuvent apparaître de devenir des standards techniques, et donc, d’être largement diffusés. En bypassant W3C, Google prend donc le risque que le format AMP ne perdure pas longtemps.
Par ailleurs, une autre critique récurrente faite par de nombreux fins analystes du web (je vous conseille notamment les articles de Numérama, The Register, et CSS-Tricks sur le sujet) concerne la nature profonde du projet AMP.
Comme je l’ai expliqué dans cet article, le concept d’AMP vise à adapter le contenu à des spécifications techniques qui, à leur tour, servent la Web Performance. La crainte de nombreux auteurs est qu’à terme, dans l’espoir de voir leur référencement dans Google maintenu et leur attractivité auprès des utilisateurs toujours bonne, les créateurs de contenus digitaux finissent par appauvrir leurs productions pour coller aux recommandations techniques de Google.
Peur certainement justifiée, mais au regard des bénéfices en terme de Web Performance, chez Quanta, nous partons du principe que, comme toujours : « The truth lies somewhere in the middle.« .
Et vous, que pensez-vous de Google AMP ? L’utilisez-vous pour votre site ? N’hésitez pas à nous laisser des commentaires !