Internet à 300 à l’heure ou menace pour le Web ouvert ?
Google AMP, ou quand le Web devient instantané
Derrière l’acronyme AMP se cache une petite révolution dans l’univers du Web : rien moins que la dernière innovation de Google en matière d’optimisation d’affichage de contenu digital. Le projet Accelerated Mobile Pages (AMP) de Google réunit déjà plus de 31 millions de domaines. La technologie AMP repose sur un format de page allégée plus rapide à charger pour les mobiles ou plus généralement pour les appareils disposant d’un petit écran et d’un accès internet de faible qualité. Le but est d’atteindre un temps médian perçu par les utilisateurs de moins d’une seconde. Le contenu doit s’afficher presque instantanément, comme avec les Apple News ou Facebook Instant. Les pages AMP seraient, en moyenne, dix fois plus légères et quatre fois plus rapides à charger. Google valorisant ce type de contenu sur les SERP (Search Engine Result Page), ou page de résultats des moteurs de recherche, les sites compatibles avec le format AMP ont plus de chance que les autres de se positionner dans les premiers résultats lors d’une recherche sur Google depuis un appareil mobile. Qui n’a jamais connu la frustration de ne pouvoir charger un contenu web depuis son mobile, même pour une simple consultation ? Lorsque cela se produit, vous quittez illico le site en question pour essayer de trouver le même contenu ailleurs, là où l’herbe est plus verte… l’affichage plus instantané. La majorité des internautes, et surtout des mobinautes, réagissent ainsi face aux lenteurs, plébiscitant les sites les plus rapides. Les éditeurs ont donc tout intérêt à miser sur la Web Performance pour attirer le maximum d’utilisateurs. C’est dans ce contexte que Google a lancé, en 2015, le projet open-source AMP. Techniquement, les pages AMP sont des pages web à peu près classiques, écrites en HTML et donc compatibles avec tous les navigateurs web. Elles sont en quelque sorte « tunées » pour être très légères et s’afficher plus vite sur un mobile.
Pour apprendre à créer des pages AMP, rendez-vous sur le site : https://developers.google.com/amp
Fonctionnement de Google AMP
AMP répond à plusieurs problématiques concernant la rapidité d’affichage du contenu. INSTANT RENDERING (CHARGEMENT INSTANTANÉ) AMP permet d’effectuer du pré-chargement des liens sur lesquels l’utilisateur est le plus à même de cliquer. Du coup, le contenu s’affiche quasi immédiatement lorsque vous cliquez dessus. C’est un peu le même principe que le cache, sauf que celui-ci est en quelque sorte préconstruit, même lorsque c’est la première fois que vous accédez au contenu. Afin de ne pas surcharger la CPU et la bande passante avec des contenus que l’utilisateur a peu de chance d’aller voir au moins dans un premier temps, le système AMP va se contenter de précharger le haut de la page avec les éléments présélectionnés. Ainsi, le reste de la page est chargé pendant qu’il prend connaissance du haut de page et l’accès à l’ensemble du site paraît de la sorte plus fluide. NON-MODIFICATION DE LA MISE EN PAGE PENDANT LE CHARGEMENT DES ÉLÉMENTS Autre astuce d’AMP : la taille de chaque élément est fixée dans le code HTML. Cela permet d’éviter toute mauvaise surprise en cours de chargement. Une fois les éléments affichés, plus rien ne bouge tant que l’utilisateur n’interagit pas avec la page, assurant ainsi une lecture non parasitée. Ce principe ne vaut que pour le texte classique et des images légères. Si néanmoins vous devez afficher des vidéos et autres éléments dynamiques, il vous faudra utiliser le système des placeholders d’AMP. Les placeholders servent à afficher des bannières de pub, des vidéos ou tout autre objet de ce genre. L’emplacement et la taille de chacun de ces éléments doivent être prédéfinis dans la page. Un rectangle prédéfini (gris) s’affichera dans un premier temps sur la page AMP puis se remplira ensuite avec le preview de l’élément, vidéo ou autre. Pendant ce temps, l’utilisateur peut tranquillement lire son article qui lui s’est affiché instantanément. Avec ce système de placeholders, le problème – assez – récurrent de pages qui se décalent au fur et à mesure du chargement des éléments disparaît. L’utilisateur n’a donc plus besoin de faire défiler la page dans un sens ou dans l’autre pour retrouver la ligne sur laquelle il était avant que tout ne soit bousculé par le chargement saccadé des éléments. CHARGEMENT PRÉCOCE DES FONTS Le chargement des polices de caractères sur une page web est parfois lent. Il est généralement effectué après tout contenu pouvant y faire appel, donc après le chargement du code javascript. AMP optimise l’ordre de chargement afin de charger les fonts dès le début, en parallèle du reste ce qui, au final, rend l’affichage global bien plus rapide. MEILLEURE GESTION DES TAGS De nombreux sites d’e-commerce gardent des tags sur leurs pages alors qu’ils ne s’en servent plus. Cela ne fait que ralentir l’affichage et donner une image négative des sites concernés. AMP limite l’usage des tags de sorte à ne pas se retrouver avec plusieurs dizaines de tags pouvant potentiellement bloquer l’affichage d’une page web. AMP s’est aussi intéressé à ce problème en vue d’éviter au maximum ces chargements intempestifs. Les tags peuvent être appelés, mais uniquement via une interface spécifique fonctionnant de manière asynchrone afin de ne pas ralentir l’affichage. Si l’implémentation du système AMP reste assez simple pour la plupart des vendeurs de tags, il faudra légèrement plus de technique pour des tags un peu plus complexes.
La plate-forme WordPress.com fournit un plug-in pour rendre les pages de ses clients compatibles avec AMP : https://wordpress.org/plugins/amp/
Un format incontournable
Google proposant déjà des pages AMP à ses utilisateurs dans les résultats de recherche, il n’est pas difficile d’imaginer que le HTML AMP va vite devenir incontournable, de gré ou de force, pour tous. La plate-forme WordPress. com, qui représente tout de même un quart des pages web mondiales, fournit un plug-in pour rendre les pages de ses clients compatibles et il existe aussi des extensions AMP pour Joomla et Drupal. De nombreux sites majeurs ont également annoncé leur participation immédiate ou prochaine. L’une des caractéristiques techniques fondamentales d’AMP est d’empêcher le chargement des scripts JavaScript, à l’exception de ceux préalablement validés par l’AMP Project. Il est possible aujourd’hui d’intégrer des messages Twitter, des posts Facebook ou des vidéos YouTube, mais pas encore des vidéos Dailymotion ou des documents Scribd. Cela reste un « standard propriétaire », très fermé et ne permettant pas aux différents éditeurs et développeurs d’innover librement. Derrière l’avantage procuré par un affichage quasi simultané se cache sans doute la volonté pour Google de prendre le contrôle total sur certains marchés du Web et leurs pratiques. Ainsi, pour afficher dynamiquement des publicités en HTML AMP et mesurer leur audience, il faut obligatoirement passer par l’une des régies qui bénéficient d’un laisser-passer de Google, parce qu’ils se conforment à des règles très opaques et propriétaires : A9, AdTech, AdReactor, Google AdSense, et autres DoubleClick. Un éditeur web ne peut plus utiliser son propre ad-server ou celui d’une petite régie exclue dudit programme. Pour développer le format AMP, Google s’est associé à plusieurs dizaines d’éditeurs, notamment de grands journaux, et de plates-formes. C’est en effet les sites qui doivent implémenter la technologie AMP pour que Google puisse rediriger les mobinautes vers les pages accélérées. Les pages des sites web qui disposent du format AMP sont étiquetées d’un label du même nom, précédé d’une petite icône en forme d’éclair. Seules les pages disposant du format AMP peuvent apparaître dans le carrousel des articles à la Une. En revanche, les pages AMP apparaissent aussi dans les résultats traditionnels de Google. Sachant que les utilisateurs passent plus de temps sur leur mobile que sur leur ordinateur pour faire des recherches, optimiser son site internet ou ses e-mails pour mobile est devenu depuis quelques années un enjeu marketing essentiel. La technologie AMP s’intègre dans cette logique. Utiliser la technologie AMP permet in fine d’obtenir plus de trafic sur son site.
Les AMP Stories, la déclinaison multimédia du format de pages AMP qui permet de créer des stories à la façon de Discover de Snapchat.
Utiliser AMP
Si vous souhaitez intégrer AMP sur les pages de votre site, vous devez revoir et enrichir leur code HTML avec de l’AMP HTML. Les pages AMP sont, tout simplement, des pages utilisant le format AMP HTML, qui peut être assimilé à une sous-partie ou une version simplifiée de HTML5. Il faut savoir, tout d’abord, qu’il n’est pas possible de créer une seule et unique page AMP. L’intégration d’AMP touche forcément toutes les pages de votre site – ou presque. Elle consiste à créer une deuxième version simplifiée de chacune de vos pages, ne retenant que les éléments textuels et les images, au détriment des scripts JavaScript third party qui sont supprimés ou simplifiés.Composition d’une page AMP
Les pages AMP sont construites avec trois composants principaux. AMP HTML L’AMP HTML est du HTML étendu par des extensions spécifiques AMP. La balise ampimg, par exemple, offre une prise en charge totale de srcset, même pour les navigateurs non compatibles. AMP JS La bibliothèque AMP JS propose un rendu rapide des pages AMP HTML. Elle implémente toutes les meilleures pratiques d’AMP en termes de rapidité, gère le chargement des ressources et offre les balises personnalisées nécessaires. La plus importante optimisation est sans doute la désynchronisation de la gestion des ressources externes. Cela évite tout bonnement que le chargement trop lent d’un élément de la page ne bloque le rendu des autres éléments. AMP CACHE Google AMP Cache est un réseau de distribution de contenus basé sur un proxy et fournissant les documents AMP valides préenregistrés. Il extrait les pages AMP HTML des sites, les stocke en mémoire cache et les charge plus rapidement que le site de l’éditeur. Ce cache intègre également le système de validation AMP qui vérifie le bon fonctionnement de la page et l’absence de dépendance vis-à-vis de ressources externes. Ce système de validation applique une série d’assertions afin de vérifier que le balisage de la page respecte la spécification AMP HTML. Une autre version du système de validation est intégrée à chaque page AMP. Cette version peut consigner les erreurs de validation directement dans la console du navigateur. Cela permet de connaître immédiatement l’impact de changement de code sur les performances.Créer votre page AMP HTML
Voici un exemple de page AMP HTML : <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <title>Salut AMP !</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> </body> </html> Le corps (body) est assez classique. Il faut, en revanche, un peu de code supplémentaire dans l’en-tête (head) de la page. Les documents AMP HTML doivent commencer par le type du document <!doctype html> et contenir : • une balise <html ><html amp> de niveau supérieur. • des balises <head> et <body>. • une balise <link rel="canonical" href="/$url_du_site"> dans l’en-tête qui pointe vers la version HTML standard du document AMP HTML ou vers le document en soi s’il n’y a pas de version HTML. • une balise <meta charset="utf-8"> comme premier enfant de la balise head. • une balise <meta name="viewport" content="width=device-width,minimum-scale=1"> dans la balise head. Il est également recommandé d’inclure initial-scale=1. • une balise <script async src="https://cdn.ampproject.org/v0.js"></script> comme dernier élément de l’en-tête (inclut et charge la bibliothèque AMP JS). • Enfin, les drôles de lignes qui suivent dans la balise <head> : <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>Du bon et du mauvais dans AMP
Les spécificités du système AMP ne sortent pas de nulle part. Elles sont le résultat de nombreuses recherches, de choix et de discussions entre des perf-gurus (gourous des performances…) du Net. Si AMP représente sans conteste une innovation intéressante, la technologie de Google est aussi une belle source de controverses. Parmi celles-ci, il faut déjà relever que ce nouveau format a été lancé sans l’aval du consortium du Web, le W3C. Le respect du rôle du W3C sur le Net permet généralement aux nouvelles normes de devenir plus rapidement des standards techniques validés par tous et d’être ainsi plus largement adoptées et diffusées. En faisant l’impasse sur le W3C, Google prend comme risque que son format ne soit pas adapté par tous et, au final, abandonné car considéré comme propriétaire. Plus grave encore, ce choix de Google pourrait entraîner nombre d’acteurs à oublier l’importance d’utiliser uniquement des normes ouvertes reconnues par tous et à plonger dans des choix propriétaires néfastes à longue échéance. Sur un autre plan, la crainte de nombreux auteurs est, qu’à terme et dans l’espoir de conserver un bon positionnement dans les recherches via Google, les créateurs de contenus digitaux finissent par appauvrir leurs productions pour coller à ces nouvelles recommandations techniques. AMP – ou plutôt Google – impose aux éditeurs de décliner dans une version minimaliste très rapide à charger le contenu (jugé principal) de leurs pages web. La technologie s’appuie sur l’éventuelle, mais fortement recommandée, mise en cache dans des CDN – Google en offrant un gratuitement – et surtout l’utilisation exclusive de technologies validées au préalable par l’AMP Project, consortium regroupant Google et ses partenaires, sélectionnés par… Google et selon des critères assez personnels, pour ne pas dire intimistes. Il y aura donc désormais d’un côté les pages HTML, conformes aux recommandations du W3C, et de l’autre les mêmes pages HTML AMP conformes aux restrictions strictes imposées par le groupe de Mountain View. Techniquement, ces dernières auront la même URI que les pages HTML normales, mais avec /amp/ à la fin.
Le manifeste pour un Web ouvert (Extensible Web Manifesto) sur github.