Comment accélérer vos pages web sur mobile avec le format AMP de Google
Les courbes se sont croisées en 2015. Selon la dernière étude Médiamétrie publiée en octobre, les Français surfent davantage sur mobile que sur leur ordinateur fixe. A condition de le pouvoir. Hors des zones couvertes par la 3G ou 4G, la lenteur de l'affichage des pages web sur smartphone devient rédhibitoire. Un frein qui ne pouvait laisser indifférent les GAFA. Après Facebook et son service pour les médias Instant Article, Google lançait, en octobre 2015, le projet Accelerated Mobile Pages (AMP) qui fédère une trentaine d'acteurs du web dont LinkedIn et Twitter.
Un format entre 15%... et 85% plus rapide
Il s'agit en quelque sorte d'un framework HTML open source qui simplifie la structure des pages et place une partie des contenus en cache. L'affichage des pages ainsi optimisée serait, selon Google, "entre 15 et 85% plus rapide". Un résultat qui se fait particulièrement sentir quand une page contient des images, des vidéos. Sur son blog, Pinterest donne l'exemple d'un article du Washington Post "amplified" ou non.
Ce gain Mathieu Chartier a pu le vérifier. A la fois référenceur, webmaster et formateur, ce professionnel du web a passé son blog Internet-Formation sous AMP. Mais non sans difficultés. "L'AMP est une réécriture de HTML qui pourra rebuter des éditeurs ne maîtrisant déjà pas le HTML classique. Face à cette technicité, je crains que l'AMP ne soit pas massivement adopté par la communauté et que Google l'abandonne", prévient-il d'emblée. D'autant que l'AMP, en proscrivant un certain nombre d'éléments, propose une version de HTML particulièrement allégée. "Un retour en arrière de 10 à 15 ans". Autre spécialiste du web, Sébastien Sabattini le aussi déconseille à ses clients et le fait savoir dans un billet. On tempérera en rappelant qu'AMP est un programme récent, en plein développement, et qu'il pourrait tendre, dans les mois à venir, vers plus de simplicité.
Alléger la structure de vos pages
Pour être identifiée comme telle, une page AMP doit notamment contenir dans son <head> une balise canonique et un Viewport qui précise les dimensions de l'affichage sur terminal mobile. Dans le <body>, l'AMP proscrit certains enrichissements, à commencer par les codes JavaScript externes. Seules certaines bibliothèques de script sont autorisées (AMP JS library). De même, l'utilisation des feuilles de style (CSS) via l'attribut inline CSS est refusée. Il faut se conformer à des CSS personnalisés.
De même les composants <base>, <frame>, <frameset>, <object>, <applet>, <embed> et <form> sont prohibés (voir le tableau plus bas). Ce qui exclut des éléments comme les menus déroulants ou les formulaires de recherche. <form> sera toutefois supporté à l'avenir précise Google. Les tags à vocation multimédia sont remplacés par leurs équivalents AMP. <img> devient ainsi <amp-img> pour insérer une image. Même préfixe "amp" pour un fichier audio (<amp-audio>), une vidéo (<amp-video>) ou un GIF animé (<amp-anim>).
Les partenaires de Google ont également leur préfixe. On trouve ainsi un amp-youtube, un amp-instagram ou un amp-vine. Mais avec chacun des particularités. Si pour embarquer une vidéo il faut normalement préciser l'URL et les attributs liés à la hauteur et la largeur, AMP exige, par exemple, pour la plateforme Brightcove d'autres attributs qui compliquent la tâche.
Pas fou, Google a prévu la possibilité d'afficher une publicité dans la page avec l'élément <amp-ad>. Les annonces de A9, AdReactor, AdSense AdTech et Doubleclick sont actuellement supportées.
Validez vos pages
Compte tenu du nombre élevé d'erreurs potentielles, il est fortement conseillé de débugger au préalable votre page AMP. Il suffit pour cela de l'ouvrir dans votre navigateur puis d'ajouter "#development=1" à la fin de l'URL pour avoir accès au validateur AMP (qui est fourni avec l'AMP Runtime). Ouvrez ensuite la Google Search Console qui fait partie des outils mis à disposition par Google aux webmasters. Ce validateur teste la page et indique les balises et attributs manquants et invalides puis, le cas échéant, redirige le codeur vers le guide officiel. Mathieu Chartier regrette qu'une fois les erreurs corrigées il ne soit pas possible de revalider dans la foulée, le robot de Google testant la page seulement par intervalles.
Un plugin WordPress génère automatiquement des pages AMP
Si vous souhaitez vous épargner de mettre les mains dans le cambouis, WordPress propose un plugin qui génère automatiquement des pages compatibles AMP. D'autres CMS pourraient suivre le mouvement. Pour Mathieu Chartier, ce plugin WordPress est loin d'être parfait. "Il change votre thème par un thème standard AMP et chasse un certain nombre d'éléments comme la sidebar ou le pied de page. On se retrouve avec un article brut dont les liens internes renvoient sur des pages classiques", constate le professionnel qui travaille actuellement sur sa propre extension - qui ajouterait et supprimerait des attributs à la volée.
Mesurez votre audience
Depuis fin janvier, Google propose une possibilité d'AMP Analytics. Pour récolter les données et les envoyer vers un serveur d'analyse d'audience, il faut au préalable passer par un objet de configuration JSON et y renseigner l'identifiant de ce serveur. Pour l'heure, AMP Analytics ne fonctionne qu'avec Google Analytics. Mais selon Google, d'autres outils de mesure devraient suivre d'ici fin février dont comScore, Chartbeat et Parse.ly. En outre, Nielsen, Adobe Analytics, et ClickTale ont aussi manifesté leur intention de soutenir l'initiative AMP.
Un avantage pour le SEO ?
Google commencera à envoyer du trafic vers les pages AMP dans son moteur de recherche fin février. Au lancement du projet, il a toutefois fait savoir que les pages AMP ne seront pas avantagées en termes de référencement naturel. Depuis, sa position semble évoluer si on en croit les récentes déclarations de John Mueller, webmaster trends analyst chez Google. "Il faut une carotte en compensation des efforts fournis", veut croire Mathieu Chartier. Google offre déjà un avantage SEO aux sites "mobile friendly" et la vitesse de chargement d'une page web est un critère favorisant un meilleur positionnement.
Quid de la duplication de contenu
En revanche, pas d'inquiétude de se voir pénaliser pour contenu dupliqué, les versions AMP et HTML classique d'une même page pouvant être jugées identiques. A condition néanmoins de le faire savoir aux robots de Google. Ce qui suppose d'indiquer dans la page HTML traditionnelle qu'elle est aussi disponible au format AMP avec la nouvelle balise "link rel=amphtml". Réciproquement, sur la page AMP, il faut mentionner la version classique via la balise canonique "link rel=canonical".