AMP HTML est un nouveau format HTML avec des restrictions fortes au niveau de JavaScript qui sera majoritairement absent. Il s’agit principalement de promouvoir un standard Open Source pour construire des pages allégées.
Pour le gain de performances, AMP HTML est mis en cache par des CDN (content delivery networks ) sur les serveurs de Google pour accélérer l’accès aux contenus.
Google AMP se déploie à grande vitesse et j’ai étudié les performances de cette nouvelle technologie et son mode de déploiement.
Je suis parti du premier article sur le Washington Post
https://www.washingtonpost.com/politics/hillary-clintons-debate-performance-complicates-bidens-path/2015/10/14/28e0fe94-729b-11e5-ba14-318f8e87a2fc_story.html
Lançons un PageSpeed Insight pour voir les performances de la page :
https://developers.google.com/speed/pagespeed/insights/
La page se présente comme étant peu optimisé.
Désormais étudions le code source pour voir comment il indique le format AMP
En fait, ils ont simplement déployé une balise amphtml avec l’url optimisé au format AMP
<link rel= »amphtml » href= »https://www.washingtonpost.com/amphtml/politics/hillary-clintons-debate-performance-complicates-bidens-path/2015/10/14/28e0fe94-729b-11e5-ba14-318f8e87a2fc_story.html« />
Relançons un PageSpeed sur cette nouvelle url et effectivement les performances sont au rendez-vous.
Analyse SEO
- Pour éviter tout Duplicata Content, on remarque une balise canonical qui pointe vers le contenu original :
<link rel= »canonical » href= »https://www.washingtonpost.com/politics/hillary-clintons-debate-performance-complicates-bidens-path/2015/10/14/28e0fe94-729b-11e5-ba14-318f8e87a2fc_story.html« > - La balise title est exactement la même
- La balise description ne sert plus
- Aucun bloc de maillage est présent sur la page, on affiche que le contenu
Analyse Technique
- Le code débute avec la balise <!doctype html>
- Les balises <head> et <body> sont obligatoires
- Il faut indiquer l’encodage <meta charset= »utf-8″>
- La balise viewport est vivement recommandé name= »viewport » content= »width=device-width,minimal-scale=1″ />
- Tout le CSS est embarqué dans une balise <style amp-custom>
- Les markups sont au format JSON-LD
- Il y a des javascripts optimisés pour youtube, twitter, …
https://cdn.ampproject.org/v0/amp-twitter-0.1.js
https://cdn.ampproject.org/v0/amp-youtube-0.1.js
https://cdn.ampproject.org/v0/amp-carousel-0.1.js - On reste sur du HTML5 avec des balises spécialisés pour les images, les vidéos indiquant à Google tous les contenus à mettre en cache.
- Bien sûr, il ne faut pas oublier le script JS qui fait le lien avec les CDN : https://cdn.ampproject.org/v0.js
Méthologie SpeedCurve
Désormais avec SpeedCurve, un excellent outil de monitoring, étudions plus en détail le fonctionnement de ce nouveau format.
https://speedcurve.com
Etude du SpeedIndex
Le Speed Index représente le temps moyen auquel les parties visibles d’une page sont affichées. Il est exprimé en millisecondes et dépend de la taille du « view port ».
Le Speed Index affiche d’excellents résultats.
Etude du cache
Tout le contenu est en cache et la durée la plus basse est sur l’HTML pour environ 30 minutes, ce qui permet des mises à jour rapide sur un article.
Ensuite, le javascript est mis en cache pour une durée de 1H et tout le reste pour une durée d’un mois.
Comparatif entre la version AMP et sans AMP
Sur ce cas précis, la page au format AMP est 377% plus rapide que la page classique.
Conclusions
Google va privilégier ce nouveau format sur Mobile pour 2016 donc il convient rapidement d’étudier sa mise en oeuvre.
Selon les technologies, ce format sera plus ou moins difficile à déployer mais il a le très grand avantage d’être Open Source.
Bonus : Le validator AMP est d’ailleurs très simple à utiliser, vous devez juste indiquer : #development=1 à l a fin de l’url et vous rendre dans le debugger de Chrome qui indique le bon fonctionnement ou les erreurs le cas échéant.
