La technologie AMP (Accelerated Mobile Pages) a été créée afin de permettre un affichage ultra rapide des pages sur les mobiles.
Pourquoi ultra rapide ? Parce qu’une page au format AMP est capable de se charger en 10 fois moins de temps ! Rien que ça.
Avant toute chose, l’AMP est adapté aux pages statiques. La technologie repose sur 3 éléments :
1. l’AMP HTML
il s’agit d’une version HTML avec des propriétés AMP et quelques animations
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>Sample document</title> <link rel="canonical" href="./regular-html-version.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> h1 {color: red} </style> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": [ "thumbnail1.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00" } </script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></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>Sample document</h1> <p> Some text <amp-img src=sample.jpg width=300 height=300></amp-img> </p> <amp-ad width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad> </body> </html>
Comme vous pouvez le constater, ça ressemble quand même vâchement à du langage HTML classique, même si les différents tags HTML ont été renommés : « amp-img » pour ne citer que cet exemple.
Voici les éléments indispensables pour une compatibilité AMP :
Les éléments classiques :
- le doctype (forcément) : <!doctype html>
- une section <head> et <body>
- la balise <meta charset= »utf-8″> pour l’encodage
Les éléments spécifiques :
- un tag <html ⚡> (vous pouvez remplacer le petit éclair par « amp »)
- une balise canonical pour indiquer la version de la page classique, non-amp.
- La balise Viewport, essentielle pour l’affichage sur mobile et tablettes <meta name= »viewport » content= »width=device-width,minimum-scale=1″>
- la déclaration du script AMP dans la section <head> : <script async src= »https://cdn.ampproject.org/v0.js »></script>
- le boilerplate AMP (que vous trouverez facilement dans le code présenté au dessus.
2. l’AMP JS : une librairie Javascript adaptée !
Les créateurs de l’AMP project ont mis à disposition une librairie de ressources Javascript adaptée au format.
Bien entendu c’est relativement restreint, mais il ne faut pas perdre l’objectif principal : la rapidité.
Toutefois, il vous sera quand même possible d’afficher de la publicité, de tracker vos pages avec Google Analytics, d’ajouter des lecteurs de vidéos…
Ces ressources doivent d’ailleurs se charger de manière asynchrone, c’est à dire que plusieurs ressources peuvent se charger parallèlement.
3. La gestion du cache au coeur de l’AMP
Toutes les pages AMP sont mises en cache automatiquement et délivrées par un CDN pour augmenter les performances.
Ainsi, toutes les ressources (documents, fichiers JavaScript, ou encore images) sont chargées depuis la même source.
De plus, le protocole HTTP2 (basé sur le projet d’expérimentation SPDY de Google) y est intégré. Il est notamment réputé pour son efficacité en termes de compression des données et surtout multiplexage de plusieurs requêtes au sein d’une même connexion).
Pour les plus « tekos' » d’entre vous, voici un petit tuto pour apprendre à créer des pages AMP.
Testez la mise en place de l’AMP sur vos pages
Voici quelques liens vers des outils de debug qui vous permettront de vérifier la bonne mise en place de l’AMP
L’outil de validation en ligne
L’extension pour Google Chrome
AMP et SEO font bon ménage
Oui parce que jusqu’à présent, on a parlé de rapidité, de balises, tout ça tout ça. Mais ce qui vous intéresse c’est le SEO, je sais bien.
Google a lancé officiellement les pages AMP, mais a surtout commencé à les intégrer dans les pages de résultats de recherche début 2016. Alors c’est vrai, avec ce type de pages, on peut avoir l’impression d’avoir fait un sacré bon en arrière niveau interaction. Sauf que voilà, la plupart du trafic sur l’International Network (Internet pour les intimes) se fait via mobile et qu’il fallait peut être que quelqu’un commence à penser « performances« . Aujourd’hui les sites commencent à adopter majoritairement le Responsive Web Design sauf que c’est plus ou moins bien fait. Vous n’imaginez pas le nombre de fois où un site compatible mobile, est quasiment aussi lourd que la version classique.
Autre point à retenir, Facebook avait déjà lancé son Facebook Instant Articles qui fait a peu près la même chose. Alors il était temps pour Google de réagir à cette concurrence ; il s’est entouré pour l’occasion d’acteurs majeurs du secteur : Twitter, Pinterest, Linkedin, WordPress, Chartbeat, Parse.ly ou encore Adobe Analytics. Sachant que Facebook a choisi de monétiser sa technologie en prenant 30% des revenus publicitaires générés, ça ne devrait pas être trop compliqué d’imposer l’AMP.
La technologie AMP est bénéfique pour les articles d’actualités dans un premier temps. Même si lors du SMX Paris, il courait le bruit que Google développe son modèle AMP pour les e-commercants. Ebay utilise déjà l’AMP pour ses listings produits, toutefois les fonctionnalités comme le panier ou encore le tunnel de comandes ne sont pas encore pris en charge.
N’oubliez pas que pour espérer une mise en avant dans le caroussel AMP des pages de résultats de recherche, il est recommandé d’ajouter le balisage spécifique aux articles. Vous pourrez vérifier la bonne mise en place de ce balisage sur la search console dans la section « Apparence dans les résultats de recherche » et Accelerated Mobile Pages. Parmi les erreurs les plus communes, on notera des erreurs d’intégration des logos (du site ou de l’auteur). Pensez donc à vérifier votre balisage sur l’outil de test dédié.
Comme nous le précisions dans notre billet du mois de mai, l’AMP a aussi été intégré dans le rapport d’analyse de la Search Console.
Dans les pages de résultats de recherche, les articles AMP sont mis en avant par un carrousel comme ci-dessous. Les résultats affichés de manière « classique » bénéficieront du picto « éclair ».
L’AMP devrait devenir un facteur de positionnement de plus en plus important dans les prochains mois. Attention tout de même si vous utilisez des plugins « tout prêts » pour votre CMS. Selon votre thème et votre site, il arrive très souvent que quelques ajustements soient nécessaires. Il serait dommage que l’implémentation de l’AMP ait un effet négatif sur votre stratégie SEO.
Pour terminer, voici quelques résulats suite à la mise en place de l’AMP sur des sites importants :
- Le Washington Post aurait augmenté de 23% le nombre de mobinautes revenant sur sont site dans les 7 jours et aurait amélioré de 88% la vitesse de chargement des pages mobiles.
- 90% du trafic AMP du site Daily Dot et 80% du trafic AMP de Gizmodo provient de nouveaux visiteurs
- Les mobinautes du site Miami Herald passent 10% de temps supplémentaire sur la version AMP que sur la version mobile classique
- Le site Slate a augmenté son nombre de visiteurs uniques SEO de plus de 44%
- Les taux de clics sur les publicités de la version AMP est 63% plus élevés pour le site Wired que sur la version mobile classique
- 14% du trafic du site The Verge est généré par les pages AMP
