MobileWordpress

AMP sous WordPress : un premier test

Par Guillaume Thavaud - Publié le 20 octobre 2015

Sitôt sorti, sitôt testé : j’ai installé le plugin AMP officiel de WordPress, pour voir ce que ça donne. Attention, nous ne sommes ici que sur la version 0.1 donc il y a encore des marges de progression ! Pour rappel, AMP (Accelered Mobile Pages) est un nouveau format HTML initié par Google, et permettant d’accélérer le chargement des pages (voir cet article pour plus d’infos)

Côté installation, c’est très rapide, et aucun paramétrage particulier n’est nécessaire (si ce n’est de ré-enregistrer le paramétrage des permaliens, pour créer des URL AMP).

Ceci étant fait, il suffit d’ajouter /amp à la fin d’une URL pour voir sa version AMP HTML, fabriquée par le plugin. Sobre et efficace… Vous pouvez en juger en tapant vous-même /amp à la fin de l’URL d’un article de ce site, ou en cliquant sur le lien [version AMP] que j’ai pris soin de glisser sous le titre de l’article.

Le plugin proposé par WordPress va à l’essentiel, comme vous pouvez le voir avec les captures ci-dessous (ou en faisant vous-même le test)

  • le menu de navigation est supprimé
  • la colonne de droite avec tous les widgets est supprimée

Il ne reste que l’article et rien que l’article, dans une mise en forme propre et très lisible. A noter que mon module de commentaire, basé sur Google+, a disparu (logique puisque AMP se débarrasse de tous les codes javascripts superflus, même celui de Google…)

version HTML

version HTML

 

version AMP

version AMP

Et du côté du code source, c’est comment ?

C’est également très épuré, seule la balise Title est conservée, la meta description a disparu, ainsi que la balise meta robots.

On voit aussi que tous les styles CSS sont désormais intégrés dans la page (ce qui était prévu, AMP évite le plus possible de faire appel à des fichiers externes).

code-source-amp

J’ai également noté que les balises img devenaient des balises <amp-img>, dont l’écriture est de ce type :

<amp-img class="size-medium wp-image-821" src="xxxx" alt="xxxx" width="310" height="300" layout="responsive"></amp-img>

C’est clair que ça change ! On voit que dans cette nouvelle balise, des dimensions width et height sont spécifiées, mais mon navigateur n’en tient malheureusement pas du tout compte, et les images prennent toute la largeur disponible (c’est bien la peine d’utiliser le système de miniatures WordPress !). Ceci dit, sur un smartphone, ce problème disparait car la largeur disponible n’est de toute façon pas très grande.

Bref, globalement le but est atteint : fabriquer une page qui se charge très vite sur un téléphone mobile (j’ai fait le test, ça déboite). Par contre, pour le moment le plugin se focalise sur l’article et rien que sur l’article. Pas de navigation ni de moteur de recherche, il n’est pas prévu que le lecteur navigue sur le site… J’espère que cela viendra 😉