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.


3046

x
Rechercher dans les dossiers
Les derniers dossiers...
Réduire

Actuellement à la Une...
Deux semaines après que le Pentagone ait préféré Azure à AWS pour son cloud, l’entreprise de Jeff Bezos conteste formellement cette décision, dénonçant « des lacunes évidentes, des erreurs et un parti pris flagrant ».

Quelques jours après le rachat de Carbonite, l’éditeur canadien de gestion de l’information d’entreprise étend sa solution de protection des contenus avec son partenaire Reveille.

Le géant de l’ITSM s’apprête à racheter Fairchild Resiliency Systems, éditeur d’une solution de BCM (Busi...

Commerce.AI est une très jeune entreprise hébergée encore au sein des locaux de Tech Plug & Play dans la Silicon Valley, un espace de co-working et de communauté pour des start-ups. Sa technologie qui s’appuie sur l’intelligence artificielle propose d’optimiser le placement et la réussite des produits dans les magasins.

Remonter le temps pour restaurer les données dans une version antérieure. Ce principe a été développé il y a plus de 20 ans par la PME française Atempo. Après une période compliquée sous direction américaine, l’entreprise est repassée sous pavillon français et renoue aujourd’hui avec la croissance. Les secrets de ce retour : des méthodes agiles, de nombreux recrutements et de l’intelligence collective. Article paru dans L'Informaticien n°181.

Le rachat de Docker Enterprise par Mirantis n’est que la partie émergée de la restructuration en cours au sein du spécialiste des conteneurs. Docker change à nouveau de CEO, lève des fonds à des fins de recapitalisation et annonce se concentrer de nouveau sur les développeurs.

Créée en 2018 après 24 mois de travail en mode secret, ShieldIO propose une nouvelle approche du chiffrement pour protéger les données.

Créée par d’anciens du DoE (Department of Energy) aux USA, Corelight est une nouvelle entreprise qui propose une suite de monitoring du trafic réseau s’appuyant sur Zeek, un projet open source.

Le streaming illégal de séries et films peu rapporter gros. Mais lorsque l’ALPA s’en mêle et que les services de police alertés remontent jusqu’au webmaster cela se termine assez rapidement en correctionnelle.

Après l'infrastructure sous-jacente, c'est au tour des systèmes de paiement des applications de Facebook d'être unifiés. Le géant annonce le lancement de Facebook Pay, une solution de paiement mobile pour le réseau social, Messenger, Instagram et WhatsApp.

Toutes les News
LIVRES BLANCS
Les entreprises et les organismes publics se focalisent aujourd’hui sur la transformation numérique. En conséquence, les DevOps et l’agilité sont au premier plan des discussions autour des stratégies informatiques. Pour offrir ces deux avantages, les entreprises travaillent de plus en plus avec les fournisseurs de services de cloud public et développent désormais des clouds sur site à partir d’une infrastructure qui répond à trois exigences de base:
1. Agilité sans friction des ressources physiques
2. Systèmes de contrôle optimisant l'utilisation des ressources physiques et offrant un retour sur investissement maximal
3. Intégration des divers composants de l'infrastructure pour un provisionnement et une gestion des ressources automatisés.


Pour fonctionner, votre entreprise doit pouvoir compter sur une solution de sauvegarde efficace, essentielle dans un monde marqué par une croissance exponentielle des données. Vous devez à la fois accélérer vos sauvegardes et pouvoir y accéder plus rapidement pour satisfaire les exigences actuelles de continuité d’activité, disponibilité, protection des données et conformité réglementaire. Dans cette ère de croissance effrénée, les cibles sur bande hors site et autres approches traditionnelles sont simplement dépassées.


L’Intelligence Artificielle promet de révolutionner la perception de la cybersécurité au coeur des entreprises, mais pas uniquement. Ce changement de paradigme engage, en effet, une redéfinition complète des règles du jeu pour les DSI et les RSSI, ainsi que l’ensemble des acteurs de la sécurité.


Lorsque l'on déploie des postes de travail, ils ont généralement tous la même configuration matérielle et logicielle (avec certaines spécificités selon les services). Mais on ne peut pas toujours tout prévoir et il arrive par exemple que de nouveaux programmes doivent être installés ou n’aient pas été prévus. L’accumulation de logiciels « lourds » est susceptible de provoquer des lenteurs significatives sur un PC allant jusqu’à l’extinction nette de l’application. Ce livre blanc explique comment optimiser les performances au travers de 5 conseils rapides à mettre en place.


Ce guide est conçu pour aider les entreprises à évaluer les solutions de sécurité des terminaux. Il peut être utilisé par les membres de l'équipe de réponse aux incidents et des opérations de sécurité travaillant avec des outils de sécurité des points finaux sur une base quotidienne. Il peut également être utilisé par les responsables informatiques, les professionnels de la sécurité, les responsables de la conformité et d’autres personnes pour évaluer leurs performances. les capacités de l’entreprise en matière de cybersécurité, identifier les lacunes dans la sécurité des terminaux et sélectionner les bons produits pour combler ces lacunes.


Tous les Livres Blancs