X
Google AMP
Thierry Thaureaux / jeudi 28 juin 2018 / Thèmes: Dossier, Web

Google AMP

Internet à 300 à l’heure ou menace pour le Web ouvert ?

Les Accelerated Mobile Pages de Google permettent aux éditeurs - blogs, entreprises, médias, marques and co - d’apporter un contenu web mieux adapté à la navigation mobile. Pour autant, cette innovation en termes de rapidité ne séduit pas tout le monde.

Vous trouverez la liste des plates-formes supportées par AMP à l’adresse : https://www.ampproject.org/support/faqs/supported-platforms.

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.

D’autres solutions ?

Il est clairement urgent qu’une alternative validée par le W3C soit développée et proposée. D’une part, l’aspect propriétaire du framework met en danger les services qui ne peuvent pas être intégrés et force à suivre les réglementations spécifiques d’un seul éditeur, Google, qui pourrait très bien abandonner le projet à n’importe quel moment. L’OpenSource et les normes ouvertes n’ont pas été inventés pour rien. D’autre part, le découpage du contenu (l’utilisation d’une URL spécifique telle que "xxx.com/ article/amp/") pose le problème de la fragmentation du Web entre les différents utilisateurs, appareils et services. En résulte de multiples versions spécifiques qui engendrent des frais de développement et de maintenance importants. Enfin, le système de cache utilisé par AMP pour délivrer rapidement les pages web pose problème dans de nombreux cas où le contenu évolue à intervalle de temps régulier. Le HTML responsive est encore un modèle viable, aussi rapide que l’AMP et bien plus adapté en termes de qualité de service. Reste à charge des développeurs d’optimiser leur site et de proposer une vraie version mobile efficace. Cela sera sans aucun doute un investissement bien plus rentable à long terme que de développer une version alternative pour AMP. Il est indispensable de maintenir un Web ouvert, accessible et le plus interopérable possible. Est-ce vraiment ce que nous proposent Google et ses acolytes avec AMP ?


GOOGLE MODIFIE SA GESTION DES URL POUR AMP

Google a annoncé qu’à partir du second semestre 2018, les URL AMP affichées dans ses résultats de recherche feraient référence à l’adresse du site web proposé et non plus à son nom de domaine. Il faut préciser que cette modification était demandée depuis longtemps par nombre d’éditeurs. Les URL AMP affichées dans les SERP faisaient jusqu’à maintenant référence à des intitulés positionnés chez Google (commençant par « https://google.com/amp… ») au lieu de la véritable URL de l’éditeur. Cela engendrait une perte de trafic qui freinait clairement les ardeurs des propriétaires de sites web. La solution serait basée sur le nouveau standard Web Packaging.


LES AMP STORIES, NOUVEAU FORMAT POUR LES AMP

À l’occasion de la dernière AMP Conf organisée à Amsterdam, la firme de Mountain View a présenté un nouveau format à destination des médias. Baptisé AMP Stories, cette déclinaison multimédia du format de pages AMP permettra aux médias de créer des stories (histoires) à la façon de Discover de Snapchat ou des Instagram Stories. Les AMP Stories – à format vertical – apportent une nouvelle interface et une nouvelle manière de consommer du contenu de type marque ou média. Ils se font une place de choix sur les SERP de Google. Google a ouvert à tous la possibilité de créer des AMP Stories. Néanmoins, vu le côté encore expérimental de la chose, rien ne garantit que votre story apparaisse dans les premiers résultats de recherche.


3618

x
Rechercher dans les dossiers

Actuellement à la Une...
Depuis quelques jours le port du masque est obligatoire dans les lieux clos, Pepper, le robot de SoftBank Robotics, est doté d'une nouvelle fonctionnalité, la reconnaissance des masques.

L’éditeur de solutions de sécurité dans le Cloud reprend Spell Security, une start-up qui a développé un EDR (Endpoint Detection and Response).

Cedric O a annoncé que l’application de contact tracing avait été téléchargé plus de deux millions de ...

L’entreprise spécialisée en cybersécurité CheckPoint a découvert dans la célèbre application de “dating” plusieurs vulnérabilités qui auraient pu permettre à des attaquants, au moyen de faux liens, de dérober les données des utilisateurs et utilisatrices du site de rencontre.

Le vendeur de portefeuilles à cryptomonnaies a été victime fin juin d’une intrusion dans ses systèmes. Une attaque qui n’a pas été détectée avant mi-juillet, mais qui ne touche pas directement les fonds stockés par les utilisateurs : les pirates n’ont eu accès qu’à une base de données e-commerce et marketing, contenant principalement des adresses email.

Toutes les autres News
LIVRES BLANCS

Aujourd'hui, les Directeurs Comptables et Financiers ont envie de dématérialiser leurs factures fournisseurs. C'est plutôt l'idée de devoir s'intégrer à un environnement multi-ERP déjà existant qui les freine. Mais est-ce réellement une barrière ? Dans son nouveau Livre Blanc, Esker explore ce sujet. En le téléchargeant, vous découvrirez comment la dématérialisation peut être une aubaine plutôt qu'un fardeau.


Actuellement, il existe un gouffre entre les environnements informatiques traditionnels des entreprises et le cloud public. Tout diffère : les modèles de gestion, de consommation, les architectures applicatives, le stockage, les services de données.


Les avantages de l’architecture hyperconvergée étant de plus en plus reconnus, de nombreuses entreprises souhaitent l’utiliser pour des types d’applications variés. Cependant, son manque de souplesse pour une mise à niveau des ressources de calcul indépendantes de celles de stockage ne lui permet pas d’être utilisée plus largement.

Au cours de l’événement HPE Discover qui s’est tenu en juin 2019, HPE a répondu à cette préoccupation en présentant la plateforme HPE Nimble Storage dHCI.

Ce Livre Blanc IDC se penche sur les exigences du marché ayant stimulé le besoin de solutions HCI plus flexibles, puis il examine brièvement la solution HPE Nimble Storage dHCI en expliquant pourquoi elle répond à ce besoin.


Découvrez dans ce livre blanc, les avantages des toutes nouvelles solutions NETGEAR, pour simplifier et rentabiliser vos déploiements, et gérer votre réseau à distance, où que vous soyez, au bureau ou en télé-travail.


Tous les Livres Blancs