Pourquoi et comment installer AMP pour WordPress ?

Nous en entendons parler depuis un bon moment ! AMP par ci, AMP par là… Il faut l’installer…ou pas ? Mais de quoi s’agit-il exactement ?

J’ai donc décidé de me pencher sur cet acronyme étrange. Nous allons voir dans cet article ce qu’est AMP, à quoi il sert, si il faut absolument l’installer et comment, enfin quelques astuces pour le customiser…

C’est quoi AMP et à quoi ça sert ?

AMP est l’acronyme de Accelerate Mobile Performance, littéralement en français “Accélérer la Performance Mobile“. Le but d’AMP est un chargement plus rapide des pages de votre WordPress sur mobile.

AMP est un format d’affichage plus rapide car limité principalement au HTML et CSS, le tout propulsé par un cache ultra-performant. De fait, l’affichage de pages AMP est quasi instantané.

Ainsi si un mobinaute clique sur le lien d’une page web qui dispose d’une version AMP, il sera redirigé vers cette version AMP et non vers la version standard de la page. L’objectif étant ici de réduire drastiquement les temps de chargement.

Attention de ne pas confondre site responsive et AMP, ce n’est pas la même chose. De plus, votre site à beau être “responsive”, c’est à dire qu’il s’adapte aux dimensions selon les écrans, il n’en demeure pas moins qu’il reste long à charger pour les utilisateurs naviguant sur mobile.

Faut-il installer AMP ?

Le format AMP est lancé par Google sous la forme d’un projet open source, ce dernier prône des pages légères qui puissent se charger rapidement sur les mobiles. Faut-il donc absolument l’installer ? Autant vous dire que quand Google préconise fortement quelque chose, il vaut mieux être à l’écoute. Toutefois on peut aussi se rappeler de la balise Rel Author et de Google+ :p

Un des avantages du format AMP, outre le gain en vitesse sur mobile, est d’avoir une page affichée dans le carrousel parmi les résultats Google mobile, pour cela il faut que la page soit une actualité ou un article de blog.

Quoiqu’il en soit, le 24 février 2016 dernier, la firme Google a commencé à pousser des pages AMP dans les pages de résultats de son moteur de recherche sur mobile, il serait vraiment dommage de ne pas y être, non?

A quoi ça ressemble AMP ?

Plutôt qu’un long discours, voici en 3 images les différentes versions de WPFormation. La première (en partant de la gauche) c’est la version normale, la deuxième c’est la version responsive, et enfin la dernière c’est AMP.

On est d’accord, visuellement la version AMP ça casse pas 3 pattes à un canard (et encore j’ai modifié le CSS de base) mais c’est juste bluffant en terme de vitesse ^^ Nous y reviendrons plus en détails plus bas dans cet article.

Pour les plus curieux/septiques, voici le code source d’une page AMP :

Comment installer AMP simplement ?

Bande de petits veinards… Vous êtes sous WordPress et comme par hasard il existe déjà un plugin qui le fait pour vous ;) L’installation est très simple et quant aux réglages c’est encore plus simple, il n’y en a pas ! Tu l’installes, tu l’actives et tu l’oublies…

Pour activer en deux petits clics AMP sur votre WordPress, je vous conseille le plugin d’Automattic sobrement appelé AMP.

Une fois le plugin installé, ce dernier va créer automatiquement des URLs avec un /amp/ à la fin de l’adresse sur tous vos articles, ce qui vous donnera une URL de type : monsite.com/monarticle/amp/. En résumé, le contenu de l’article est parsé et remplacé par les balises au standard AMP.

Le plugin d’Automattic supporte les différents médias, les tweets, les embeds, les vidéos Youtube, instagram, etc… Par défaut, il affiche le contenu de l’article, son auteur, la date de publication, la catégorie.

En théorie, on peut passer tout le contenu de son WordPress (pages, catégories, tags…) au format AMP mais compte tenu des limitations de l’affichage du carrousel Google (réservé aux actualités et articles de blog), je ne vois pas l’intérêt d’y passer autre chose que des articles.

Le plugin ajoutera dans le code de vos articles, un “link rel” qui fera référence à la version AMP de la page pour que Google et les autres plates-formes en aient connaissance. Voici ce qui est ajouté : <link rel=”amphtmlhref=”http://monsite.com/ monarticle/amp/” />. En revanche sur les pages AMP générées, il ajoutera <link rel= “canonical” href= “http://monsite.com/monarticle/” /> pour faire référence à la version canonique standard et éviter ainsi le contenu dupliqué. CQFD !

Laisser mijoter et Google viendra crawler et indexer vos pages AMP. Vous pourrez par ailleurs consulter l’état d’indexation et les erreurs AMP directement depuis la Search Console. Assurez-vous que vos pages AMP soient valides, fonctionnent comme prévu pour les mobinautes et qu’elles puissent s’afficher parmi les pages AMP des résultats de recherche. Les pages AMP non valides ne bénéficieront pas de certaines fonctionnalités de la recherche Google. Plus d’informations sur les consignes Google à ce sujet sur https://support.google.com/webmasters/answer/6340290

AMP et la vitesse

La vitesse sur mobile, c’est au final le but premier d’AMP ! Pour la quantifier, j’ai simplement mesuré le site en version standard versus la version d’AMP. A gauche la version standard du site et à droite la version AMP :

Les gains en terme de vitesse sont juste impressionnants ! On passe de 1,10 secondes à 286 ms pour la version AMP. A noter également le nombre de requêtes qui passe de 83 à 13 et que dire du poids de la page tout simplement divisé par 5.

Bien sûr, on peut directement ressentir le gain de vitesse en navigant avec son mobile mais les chiffres ci-dessus parlent d’eux-mêmes. Bon, en même temps en faisant sauter quasiment tous les scripts et le JS,  c’est sûr que ça va beaucoup plus vite;)

Comment personnaliser le CSS d’AMP ?

Le rendu visuel de la version AMP est épuré à l’extrême. De votre rendu habituel, il ne reste que l’essence de votre article. Tout le reste à disparu, plus de barre latérale, plus de logo, plus de menus, exit les commentaires… Bref, uniquement le contenu de l’article!

Il faut bien le dire, le rendu visuel de base est assez moche : une couleur primaire bleue, absence de logo:/

On peut parfaitement modifier le CSS manuellement mais nos amis de chez Yoast ont récemment sorti un petit plugin nommé Glue For Yoast Seo Amp qui permet de modifier le CSS d’AMP directement depuis l’interface de leur plugin éponyme SEO by Yoast (ils envisagent même de l’intégrer dans SEO d’ici quelques mois), et je dois avouer que c’est bien pratique.

Une fois le plugin Glue installé, vous retrouverez ses réglages depuis SEO>>AMP. Cela vous permettra de sélectionner sur quels contenus AMP doit s’activer (articles, pages ou CPT), de régler le CSS à votre convenance (couleurs, liens, blockquotes), d’ajouter du CSS personnalisé et du code dans le <head>. Enfin, vous pourrez suivre vos stats analytics AMP avec un code de suivi personnalisé.

Ajouter les images à la une

Par défaut les articles sous AMP n’affichent pas les images à la une, si vous souhaitez les ajouter, il vous suffira d’inclure le code suivant dans le fichier functions.php de votre thème (c’est encore mieux si c’est dans votre thème enfant) :

add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
function xyz_amp_add_custom_actions() {
    add_filter( 'the_content', 'xyz_amp_add_featured_image' );
}

function xyz_amp_add_featured_image( $content ) {
    if ( has_post_thumbnail() ) {
        // Just add the raw <img /> tag; our sanitizer will take care of it later.
        $image = sprintf( '<p class="xyz-featured-image">%s</p>', get_the_post_thumbnail() );
        $content = $image . $content;
    }
    return $content;
}

Nota 1 : N’oubliez pas de sauvegarder votre functions.php avant de le modifier.
Nota 2 : Le code ci-dessus ne fonctionne qu’avec le plugin AMP d’Automattic.

Plus de customisations disponibles sur https://github.com/Automattic/amp-wp/

Ajouter les articles en rapport avec AMP

Une fois que vous avez modifié le CSS, un élément important reste absent : les articles en rapport. A l’instar des commentaires, ces derniers ont aussi disparu. Pas top pour inciter le lecteur à parcourir notre site plus en profondeur.

Pas de panique ! Un simple ajout dans le fichier functions.php de votre thème va venir combler ce manque. Ajoutez juste le code suivant :

/**
 * Template tag to show related posts on AMP
 * Output is an unordered list of links
 * @param int $count the number of posts to list
 */ 
function my_amp_related_posts( $count = 2 ) {
 
 global $post;
 $taxs = get_object_taxonomies( $post );
 if ( ! $taxs ) {
 return;
 }
 
 // ignoring post formats
 if( ( $key = array_search( 'post_format', $taxs ) ) !== false ) {
 unset( $taxs[$key] );
 }
 
 // try tags first
 
 if ( ( $tag_key = array_search( 'post_tag', $taxs ) ) !== false ) {
 
 $tax = 'post_tag';
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array( 'fields' => 'ids' ) );
 }
 
 // if no tags, then by cat or custom tax
 
 if ( empty( $tax_term_ids ) ) {
 // remove post_tag to leave only the category or custom tax
 if ( $tag_key !== false ) {
 unset( $taxs[ $tag_key ] );
 $taxs = array_values($taxs);
 }
 
 $tax = $taxs[0];
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array('fields' => 'ids') );
 
 }
 
 if ( $tax_term_ids ) {
 $args = array(
 'post_type' => $post->post_type,
 'posts_per_page' => $count,
 'orderby' => 'rand',
 'tax_query' => array(
 array(
 'taxonomy' => $tax,
 'field' => 'id',
 'terms' => $tax_term_ids
 )
 ),
 'post__not_in' => array ($post->ID),
 );
 $related = new WP_Query( $args );
 
 if ($related->have_posts()) : ?>
 
 <aside>
 <h3>Ne manquez pas :</h3>
 <ul>
 
 <?php while ( $related->have_posts() ) : $related->the_post(); ?>
 
 <li><a href="<?php echo amp_get_permalink( get_the_id() ); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 
 <?php endwhile; 
 wp_reset_postdata(); ?>
 
 </ul>
 </aside>
 
 <?php endif;
 
 }
 
}
 
/**
 * Add related posts to the AMP template footer
 */function my_add_related_posts_to_amp( $template ) {
 ?>
 <div class="amp-wp-content">
 <?php my_amp_related_posts( 3 ); ?>
 </div>
 <?php
}
add_action( 'amp_post_template_footer', 'my_add_related_posts_to_amp' );

(source : http://isabelcastillo.com/related-posts-wp-amp)

Si vous souhaitez faire apparaître 2, 3, 5 ou plus d’articles en rapport, changez le “3” de cette ligne <?php my_amp_related_posts( 3 ); ?>, à votre convenance.

Nota 1 : N’oubliez pas de sauvegarder votre functions.php avant de le modifier.
Nota 2 : Le code ci-dessus ne fonctionne qu’avec le plugin AMP d’Automattic.

Conclusion AMP et WordPress

Le Web pour mobile prend de plus en plus d’importance et Google pousse dans ce sens. Entre ce projet open source amp, les instant articles de Facebook et les applis android pour WordPress, il y a de quoi faire!

Bien ou pas bien ? Là n’est pas la question ! Si le principal moteur de recherche commence à donner un avantage dans les SERPs mobile aux sites qui tirent partie d’AMP, il est, à mon avis, pas idiot d’y aller aussi !

Qui plus est, quand l’installation est aussi simple sur notre CMS favori pourquoi s’en priver ? Pour infos, en tout et pour tout l’installation d’AMP sur WP Formation ne m’a pris que 5 minutes.

  • Les avantages : Le temps de chargement de vos articles sur mobile, le confort de lecture procuré au lecteur, le gain SEO dans les SERPs pour mobile.
  • Les inconvénients : La disparition des barres latérales, logos, formulaires, etc… Bref, plus de JS ! L’impossibilité de convertir (newsletter, contact), l’absence de navigation que l’on peut toutefois atténuer avec les articles en rapport.

En conclusion de cet article je dirais que AMP n’est pas pensé pour nous (éditeurs de site) mais bien pour nos lecteurs ! Jamais le web mobile n’aura été aussi rapide et comme aime à le dire si souvent Google : Web should be fast !

A bon entendeur, salut ;)

Post-scriptum : Si vous avez envie de consulter cet article au format AMP et de voir à quoi cela ressemble, cliquez sur https://wpformation.com/amp-wordpress/amp/

Cet article a été modifié le 4 novembre 2016 9 h 31 min

Partagez

Voir Commentaires

  • Excellente description et résumé de ce qu'est AMP. Je vais tester prochainement, le temps de chargement divisé par 5 ça fait rêver ! ça va certainement et simplement devenir un standard du WEB comme l'est devenu dernièrement le Responsive.

    • @luc la réduction du temps de chargement est effectivement une bonne chose, en supprimant le JS et les applications tierces c'est plus facile aussi!

      A noter que Twitter mettra également en avant les liens AMP directement sur sa plateforme via son application "Twitter Moments" et sa section dédiée sur l’application Twitter : https://blog.twitter.com/2016/explore-links-in-moments-1

  • Merci pour ce super article ! :)
    As-tu eu l'occasion de tester Pagefrog ? Avec les Instant Articles de Facebook et les Apple News ça pourrait t'intéresser.

  • Merci pour ce tuto très complet - j'avais fait un essai mais pas très concluant. Question, qu'en est-il de adsense ? De ce que je comprends, il part également avec l’eau du bain. C'est un peu étonnant de la part de Google inc.

    • @paul il est possible de l'intégrer, voir le lien dans l'article vers plus de customizations ;)

  • Super cet article, je pense que tout le monde se pose des questions ;-)
    Je essayer tout çà bientôt alors !
    Merci Fabrice

    • Merci @martial

      C'est à essayer, attention toutefois son principal intérêt est surtout pour les articles. Les produits ecommerce n'en bénéficieront pas^^

  • C'est ce que je me suis dis en lisant l'article...çà peut quand même aider aux articles...
    Mais du coup peut on ne pas mettre les produits (donc les laisser en responsive design) et mettre le reste en AMP (du partiel donc !)

    • @martial-couderette oui, teste une page de WPFormation en AMP (donc en ajoutant /amp/ à la fin de l'URL), tu verras que les liens internes qui pointent vers du contenu WPF pointent vers la version "responsive".

      De plus si une page n'a pas de version amp alors c'est la version standard qui s'affiche!

  • Bonjour,
    Merci pour cet article qui me fait découvrir une fonctionnalité intéressante.

    L'intérêt de permettre aux pages statiques de passer en AMP dépend des sites web. Sur le mien, j'ai des pages statiques qui sont mises à jour régulièrement comme les photos de paquets de tabac ou celles de leurs caractéristiques (nicotine, CO, goudrons).

    Limiter AMP aux articles n'a du coup pour mon site que peu d'intérêt ! Dommage. Il y a un plugin complémentaire à AMP, c'est « Custom AMP » https://fr.wordpress.org/plugins/custom-amp-accelerated-mobile-pages/ mais sauf erreur de ma part, il ne permet de passer les pages statiques non plus en AMP.

    Sinon, l y a un autre plugin qui n'a pas cette limitation et qui fait passer les pages statiques en AMP c'est « Accelerated Mobile Pages » https://fr.wordpress.org/plugins/accelerated-mobile-pages/ Le problème est qu'il allonge vers les bas les miniatures de photos de cigarettes (qui au départ sont en 150x150).
    Du coup, je vais attendre que ces plugins mûrissent avant de les installer.

    Quant à pagefrog, je ne sais pas si je peux m'en servir car je ne lie pas mon site avec facebook et je n'ai même pas activé les boutons like ni ceux des réseaux sociaux.

    • @luciole135 oui actuellement AMP donne la priorité aux articles et aux news, de fait les pages et CPT n'ont actuellement aucune chance d'apparaître dans le carrousel Google.

      Comme je le dis très souvent à mes élèves, ne négligez pas la puissance des articles et des catégories. Dans les mois à venir, il y aura aussi "instant articles" de Facebook à prendre en compte, sans oublier que Twitter va aussi pousser le format AMP. 3 poids lourds du Web qui veulent accélérer le web mobile, il ne faut pas passer à côté.

      Merci pour les ressources supplémentaires, toutefois à titre personnel je donne bien plus de crédit au plugin d'Automattic ;)

    • Merci @frank pour la ressource, toutefois attention j'ai testé et c'est pas terrible en terme de rendu (donc il faudra mettre du CSS) et en fonctionnalités cela reste limité