• Paru le 1 février 2017

Faut-il passer votre blog au format AMP ?

2013 mots - 9mn

Faut-il passer votre blog au format AMP ?

1024 683 Tout sur WordPress

Google a lancé le format AMP pour réduire le temps de char­ge­ment des pages sur les termi­naux mobiles. Vous trou­ve­rez dans cet article une brève intro­duc­tion à AMP, ainsi que les outils néces­saires pour créer une version de votre site compa­tible avec ce format.

Après avoir poussé à opti­mi­ser les sites pour les mobiles, Google a constaté que le temps moyen d’accès à une page web était de l’ordre de 19 secondes avec une connexion 3G (sur une base de plus de 10 000 sites rete­nue par Google).

Beaucoup trop quand on sait que :

  • lors d’une consul­ta­tion sur mobile, 53% des inter­nautes aban­donnent si la page met plus de 3 secondes à se char­ger
  • la part du mobile connaît une crois­sance expo­nen­tielle

Que lorsque une page  se charge en 5 secondes plutôt qu’en 19 :

  • une session dure en moyenne 70% plus long­temps
  • le taux de rebond dimi­nue de 35%
  • la visi­bi­lité des publi­ci­tés augmente de 25%
  • les reve­nus publi­ci­taires sont multi­pliés par 2

Alors qu’on a déjà perdu plus de 53% des visi­teurs. Imaginez en passant en-dessous de ce seuil !

L’objectif est passé de Mobile Ready à Mobile First avec un temps de char­ge­ment infé­rieur à la seconde, si possible.

Et c’est dans ce but précis que le format AMP a vu le jour. Lancé par Google le 24 février 2016, ce format a su séduire et convaincre ceux qui l’ont adopté. Beaucoup plus ouvert (!) que les Instant Articles de Facebook et plus large­ment diffusé que le format Apple News. (et acces­soi­re­ment, Apple News n’est toujours pas dispo­nible pour le fran­çais).

Un char­ge­ment de deux à quatre fois plus rapide que pour les pages tradi­tion­nelles, d’après Le Parisien, quasi instan­tané à en croire Les Échos.

Le secret de cette rapi­dité ? Un langage HTML simpli­fié (AMP HTML), ultra-léger, du javas­cript asyn­chrone et réduit au mini­mum, des CSS mini­ma­listes, incluses dans la page et d’une taille maxi­male de 50Ko, des images de taille fixe (et opti­mi­sées), un contenu hébergé sur les CDN de Google.

RTL, Sud Ouest, 20 minutes, Le jour­nal du Net, France Télévision, The Guardian, The New York Times, The Washington Post, Google News ou encore Ebay, pour ne citer que des sites à très fort trafic, se sont lancés dans l’aventure.

Et vous ? Avez-vous une version AMP de votre blog WordPress ? Si vous n’avez pas encore fran­chi le pas, cet article est pour vous : vous allez décou­vrir le format AMP, ainsi que trois exten­sions gratuites pour mettre votre blog en confor­mité avec ce nouveau stan­dard.

Le format AMP : pour qui, pourquoi ?

Qui béné­fi­cie le plus d’un char­ge­ment accé­léré de ses pages ? Potentiellement, tout le monde. Ceci-dit, si votre site est déjà opti­misé mobile, ne comprend pas d’encarts publi­ci­taires et met moins d’une seconde à se char­ger… le béné­fice ne sera pas aussi évident pour vous.

Et pour­tant, les pages AMP, stockées dans le CDN de Google, vont quand même vous faire écono­mi­ser de la bande passante. Et chaque milli­se­conde gagnée est bonne à prendre. D’autant que les pages au format AMP béné­fi­cient d’une affi­chage parti­cu­lier dans les résul­tats du moteur de recherche : elles sont précé­dées du  logo et de l’acronyme AMP, et c’est cette version que Google propose direc­te­ment à l’internaute.

Résultats de recherche sur mobile

Résultats de recherche sur mobile

Enfin, une étude de SEO PowerSuite révèle que 75% des profes­sion­nels de la SEO ont déjà effec­tué des recherches quant à ce format, que 49% pensent qu’il va impac­ter le réfé­ren­ce­ment, mais seule­ment 23% l’ont déployé à ce jour.

Ce qui signi­fie que plus tôt vous crée­rez une version AMP de votre blog, mieux vous vous posi­tion­ne­rez dans les SERP.

Un exemple concret

Tous les articles de ce blog sont dispo­nibles au format AMP ; voici quelques captures d’écran :

Pour créer mes pages AMP, j’ai fait appel aux deux exten­sions que vous allez décou­vrir dans la suite de cet article.

Et voici le lien vers l’article des captures d’écran précé­dentes (Installer, acti­ver, mettre à jour et suppri­mer une exten­sion WordPress au format clas­sique, et le lien vers l’article au format AMP), qui explique comment instal­ler et acti­ver une exten­sion, si vous n’avez jamais effec­tué ces opéra­tions. Utile pour la suite, puisque nous allons voir comment…

Créer une version AMP de votre blog

En fait, ce n’est pas l’ensemble du blog qui va être dispo­nible au format AMP, mais unique­ment les articles, les pages et les archives. Les pages et les archives ne sont pas encore conver­tibles avec l’extension AMP de base, mais nous allons voir comment contour­ner cette limi­ta­tion.

Même si les articles consti­tuent l’essentiel de votre blog, je vous encou­rage à avoir une version adap­tée à la navi­ga­tion sur mobile (thème respon­sive ou adap­ta­tive), si ce n’est pas encore le cas, pour vos Custom Post Types ou pour les pages créées via un construc­teur de page par exemple, qui eux ne peuvent être passés au format AMP aussi simple­ment.

Une seule exten­sion suffit à géné­rer vos pages AMP : il s’agit de AMP (par Automattic), tout simple­ment.

Installez, vali­dez, et c’est fini. Enfin presque… En tentant la vali­da­tion, je me suis aperçu que certains éléments indis­pen­sables faisaient défaut (la balise title  par exemple). Et que le look était vrai­ment basique, très (trop) basique.

Une deuxième exten­sion m’a permis de résoudre les problèmes de vali­da­tion et de custo­mi­ser l’affichage : Accelerated Mobile Pages (et pas que l’affichage, d’ailleurs).

Installez, acti­vez, et direc­tion les réglages : vous allez person­na­li­ser l’expérience AMP dans les moindres détails.

Réglages de l'extension "Accelerated Mobile Pages"

Réglages de l’extension « Accelerated Mobile Pages »

Onglet après onglet, vous allez pouvoir tracer les visites sur ces pages, grâce à Google Analytics, appor­ter votre touche person­nelle au design, ajou­ter les boutons des réseaux sociaux (Facebook, Twitter, Google +, Pinterest, LinkedIn et WhatsApp, plus un lien pour parta­ger par cour­riel), créer une version AMP des pages et des archives, ajou­ter du contenu lié… c’est un bon quart d’heure de person­na­li­sa­tion qui vous attend 😉

Dans l’onglet Design, vous verrez un bouton Launch Post Builder (vous ne pouvez pas ne pas le voir), et juste au-dessous, un champ de sélec­tion (pour choi­sir entre 2 desi­gns types). En cliquant sur le bouton, vous ouvrez un nouvel onglet (ou une nouvelle fenêtre, tout dépend de la confi­gu­ra­tion de votre navi­ga­teur) et vous avez dans l’outil de person­na­li­sa­tion tous les éléments option­nels de votre page AMP.

Outil de personnalisation - design des articles au format AMP

Outil de person­na­li­sa­tion – design des articles au format AMP

Vous pour­rez même ajou­ter un menu (via l’onglet Menu, en dessous). Le nec plus ultra. Le logo, c’est bien, certes, mais un menu, c’est quand même mieux.

L’optimisation pour les moteurs de recherche n’est pas en reste, l’extension a prévu d’importer les balises SEO ainsi que la descrip­tion depuis Yoast SEO.

Vous pestez de ne pas pouvoir ajou­ter de pubs au format AMP ? S’il est vrai que les publi­ci­tés clas­siques ne passent pas toutes, Accelerated Mobile Pages a prévu de ne pas vous priver de toute source de reve­nus : l’onglet Advertisement prévoit sept tailles person­na­li­sées et quatre empla­ce­ments pour insé­rer des pubs Adsense ou DoubleClick (et de 90 sources au total via une exten­sion factu­rée 2999$ hors promo­tion).

Vous trou­ve­rez l’ensemble des modules dédiés à l’extension Accelerated Mobile Pages sur leur site inter­net. Le module AMP WooCommerce est gratuit, les autres – permet­tant de gérer la publi­cité, les Custom Post Types, les ACF ou l’évaluation (note entre une et cinq étoiles) sont payants.

Au vu des statis­tiques concer­nant la corré­la­tion entre la rapi­dité de char­ge­ment des pages et le taux de trans­for­ma­tion, je dirais que ne pas essayer AMP WooCommerce serait pour le moins dommage.

Une fois que vous avez terminé de person­na­li­ser vos pages AMP, n’oubliez pas d’enregistrer les modi­fi­ca­tions via le bouton Save Changes – lui non plus, vous ne devriez pas le louper, avec sa sublime couleur bleu / violet 😀

Aller plus loin

Par défaut, les liens dans votre page AMP… ne sont pas au format AMP 🙁 J’ai trouvé une astuce sur le web (WordPress pour AMP : Comment créer des liens internes au format AMP ?) avec un bout de code que j’ai quelque peu modi­fié, pour que les liens avec ancre puissent eux aussi être conver­tis au format AMP sans problème.

Pour gérer vos bouts de code, je vous recom­mande d’utiliser l’extension Code Snippets plutôt que d’intégrer le code dans votre fichier functions.php .

Tout est en place ? Vous avez testé l’affichage de vos pages ? Alors main­te­nant, il reste une étape impor­tante…

Validez vos pages AMP

Si vous n’avez pas besoin de dire à Google que vous avez une version opti­misé de vos articles (la balise link  poin­tant vers votre page AMP avec l’attribut rel="amphtml"  suffit, elle est incluse auto­ma­ti­que­ment dans la page géné­rée par WordPress), il est préfé­rable indis­pen­sable de tester la vali­dité de la page AMP géné­rée. Le projet AMP met à votre dispo­si­tion un outil de vali­da­tion des pages AMP, et Google en propose un lui aussi, plus agréable visuel­le­ment, et un peu plus parlant. Si vous utili­sez les outils pour webmas­ters de Google, vous aurez accès à une troi­sième console de test, bien plus détaillée.

Au prochain passage des robots d’indexation, votre contenu AMP sera trouvé et mis en cache sur le CDN de Google : si un inter­naute visite votre blog à partir d’un lien (externe ou interne) c’est la page géné­rée par WordPress qui sera utili­sée. S’il vient du moteur de recherche, c’est la version du CDN qui sera affi­chée.

Et voilà ! Vous avez vos articles dispo­nibles au format AMP. Sans prise de tête, sans connais­sance du langage AMP HTML.

En conclusion

Parce que bien sûr, je vous aime bien, mais bon, on a vu l’essentiel. Ceci-dit…

Le format AMP n’est pas la pana­cée, loin s’en faut. C’est une solu­tion parmi tant d’autres à la fréné­sie qui pousse les inter­nautes (vous et moi compris) à vouloir toujours plus, toujours plus vite.

Quand elles sont servies par le CDN de Google, les pages AMP peuvent être refer­mées – et vous retour­nez direc­te­ment à la recherche Google ? D’où un taux de rebond plus impor­tant.

Mais il ne faut pas pour autant oublier les avan­tages majeurs du format AMP…

Gain de temps (de char­ge­ment pour l’internaute), gain de bande passante, gain probable pour la SEO, expé­rience utili­sa­teur opti­mi­sée… que deman­der de plus ?

Non, non, non et non ! Je vous le répète, ni WordPress ni Google ne vous feront le café ?

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…

    Rapport de faute d’orthographe

    Le texte suivant sera envoyé à nos rédacteurs :