X
Google AMP
Thierry Thaureaux / vendredi 29 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.


Print
1799

x
Rechercher dans les dossiers
Actuellement à la Une...
Pour avoir enfreint deux brevets de Qualcomm, Apple risque d’être malmené en Chine. Un tribunal a en effet donné raison au géant des semi-conducteurs, interdisant à l’importation et à la vente en Chine des iPhones 6S Plus, 7, 7 Plus, 8, 8 Plus et X.

Le Syntec Numérique a publié ses prévisions pour 2019 et les chiffres de 2018. La croissance des services et conseils IT et de l’édition de logiciels en France a été dynamique cette année et le restera l’an prochain. Et, question recrutement, tout va bien aussi. Un changement de ton qui n’est pas sans surprendre.

Prendre appui sur sa position dominante dans les médias et les services de vidéos pour s’étendre vers les flux ayant les mêmes caractéristiques quitte à bousculer son offre devient la nouvelle stratégie portée par Quantum. Annonces de produits à l’appui.


La messagerie disparaîtra en mars prochain, moins de trois ans après son lancement. En avril dernier, Google annonçait déjà mettre en pause le développement d’Allo, lui préférant l’application Android Messages, présente sur la quasi-totalité des smartphones Android, et le standard Rich Text Communication qui reprend l’essentiel des fonctionnalités d’Allo.

La plateforme collaborative aurait engagé Goldman Sachs en vue de préparer une probable IPO en 2019. La jeune pousse, valorisée 7...

Big Blue continue le dégraissage de ses vieilles solutions. Il vend Appscan, Notes&Domino, Portal et quatre autres logiciels à l’Indien HCL Technologies pour 1,8 milliard de dollars.

Après la rumeur, l’annonce officielle. Microsoft a dévoilé ses intentions d’adopter Chromium en lieu et place d’EdgeHTML pour Edge. Un choix motivé par la contribution à l’open source et l’interopérabilité… qui ne ravit pas forcément les éditeurs de navigateurs ne fonctionnant pas sous Chromium, Firefox en tête.

Le service de VTC vient de déposer sa déclaration d’enregistrement auprès de la SEC, préalable à son introduction en bourse que l’on estime pouvoir intervenir au premier semestre 2019. Soit dans la même fenêtre que l’IPO de son pire ennemi, Uber.

La nouvelle offre Freebox contient une nouvelle fonctionnalité modeste en apparence mais qui est une étape importante dans le domaine de l'IoT. C'est la "zéro G" le très bas débit permanent. Et c'est Sigfox qui a été choisi pour équiper le boîtier serveur et pour fonctionner avec le player Delta. Essentiellement la zéro G va permettre d'assurer les fonctions de sécurité et de surveillance.

La société FireEye annonce avoir détecté plusieurs cyberattaques dirigées contre des sites institutionnels, à l’instar de celui de l’Urssaf et du ministère de la Justice, de la part d’activistes se revendiquant du mouvement des gilets jaunes.

Toutes les News

LIVRES BLANCS

Tous les secteurs industriels dans le monde sont confrontés à des défis informatiques spécifiques qui conditionnent le succès ou l’échec de l’entreprise.


Au cours de la dernière année, les données volées et vulnérables se sont révélées des armes précieuses pour les adversaires de tous les horizons, dans toutes les régions, et pour toutes les motivations.


Au fur et à mesure que votre exposition à d’autres entreprises augmente, votre exposition au risque augmente également. Il ne s’agit pas uniquement de vos propres fournisseurs mais également les leurs. Comment pouvez-vous suivre toutes ces relations afin de gérer vos risques?


Pour répondre aux exigences de rapidité du modèle DevOps en conservant une cybersécurité efficace, de nouvelles approches doivent être adoptées en matière de sécurité de l'information, comme la sécurité intégrée, l’automatisation et la prévention proactive.


PROTECTION ENDPOINT NEXT-GEN : ÉVOLUTION OU RÉVOLUTION ?, un Livre Blanc SOPHOS.

Après la révolution Next-Gen Firewall de ces dernières années, une nouvelle révolution Next-Gen est cours dans le domaine de la sécurité des systèmes Endpoint. Au-delà du débat pour savoir s’il s’agit d’une révolution ou d’une simple évolution, il est certain qu’une série de nouvelles technologies est en train de rapidement émerger, en apportant une contribution significative à la lutte contre les menaces avancées.


Tous les Livres Blancs