Faut-il passer votre blog au format AMP ?

Google a lancé le format AMP pour réduire le temps de chargement des pages sur les terminaux mobiles. Vous trouverez dans cet article une brève introduction à AMP, ainsi que les outils nécessaires pour créer une version de votre site compatible avec ce format.

Cet article prend 8 minutes à lire et comporte 1780 mots.

Après avoir poussé à opti­miser les sites pour les mobiles, Google a con­staté que le temps moyen d’ac­cès à une page web était de l’or­dre de 15 sec­on­des avec une con­nex­ion 3G (sur une base de plus de 10 000 sites retenue par Google).

Beau­coup trop quand on sait que :

• lors d’une con­sul­ta­tion sur mobile, 53% des inter­nautes aban­don­nent si la page met plus de 3 sec­on­des à se charg­er
• la part du mobile con­naît une crois­sance expo­nen­tielle

Que lorsque une page  se charge en 5 sec­on­des plutôt qu’en 19 :

• une ses­sion dure en moyenne 70% plus longtemps
• le taux de rebond dimin­ue de 35%
• la vis­i­bil­ité des pub­lic­ités aug­mente de 25%
• les revenus pub­lic­i­taires sont mul­ti­pliés par 2

Alors qu’on a déjà per­du plus de 53% des vis­i­teurs. Imag­inez en pas­sant en-dessous de ce seuil !

L’ob­jec­tif est passé de Mobile Ready à Mobile First avec un temps de charge­ment inférieur à la sec­onde, si pos­si­ble.

Et c’est dans ce but pré­cis que le for­mat AMP a vu le jour. Lancé par Google le 24 févri­er 2016, ce for­mat a su séduire et con­va­in­cre ceux qui l’ont adop­té. Beau­coup plus ouvert (!) que les Instant Arti­cles de Face­book et plus large­ment dif­fusé que le for­mat Apple News. (et acces­soire­ment, Apple News n’est tou­jours pas disponible pour le français).

Un charge­ment de deux à qua­tre fois plus rapi­de que pour les pages tra­di­tion­nelles, d’après Le Parisien, qua­si instan­ta­né à en croire Les Échos.

Le secret de cette rapid­ité ? Un lan­gage HTML sim­pli­fié (AMP HTML), ultra-léger, du javascript asyn­chrone et réduit au min­i­mum, des CSS min­i­mal­istes, inclus­es dans la page et d’une taille max­i­male de 50Ko, des images de taille fixe (et opti­misées), un con­tenu hébergé sur les CDN de Google.

RTL, Sud Ouest, 20 min­utes, Le jour­nal du Net, France Télévi­sion, The Guardian, The New York Times, The Wash­ing­ton Post, Google News ou encore Ebay, pour ne citer que des sites à très fort traf­ic, se sont lancés dans l’aventure.

Et vous ? Avez-vous une ver­sion AMP de votre blog Word­Press ? Si vous n’avez pas encore franchi le pas, cet arti­cle est pour vous : vous allez décou­vrir le for­mat AMP, ain­si que trois exten­sions gra­tu­ites pour met­tre votre blog en con­for­mité avec ce nou­veau stan­dard.

Le format AMP : pour qui, pourquoi ?

Qui béné­fi­cie le plus d’un charge­ment accéléré de ses pages ? Poten­tielle­ment, tout le monde. Ceci-dit, si votre site est déjà opti­misé mobile, ne com­prend pas d’en­car­ts pub­lic­i­taires et met moins d’une sec­onde à se charg­er… le béné­fice ne sera pas aus­si évi­dent pour vous.

Et pour­tant, les pages AMP, stock­ées dans le CDN de Google, vont quand même vous faire économiser de la bande pas­sante. Et chaque mil­lisec­onde gag­née est bonne à pren­dre. D’au­tant que les pages au for­mat AMP béné­fi­cient d’une affichage par­ti­c­uli­er 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 ver­sion que Google pro­pose directe­ment à l’in­ter­naute.

Ce qui sig­ni­fie que plus tôt vous créerez une ver­sion AMP de votre blog, mieux vous vous posi­tion­nerez dans les SERP.

Un exemple concret

Tous les arti­cles de ce blog sont disponibles au for­mat AMP ; voici quelques cap­tures 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 arti­cle.

Et voici le lien vers l’ar­ti­cle des cap­tures d’écran précé­dentes (Installer, activ­er, met­tre à jour et sup­primer une exten­sion Word­Press au for­mat clas­sique, et le lien vers l’ar­ti­cle au for­mat AMP), qui explique com­ment installer et activ­er une exten­sion, si vous n’avez jamais effec­tué ces opéra­tions. Utile pour la suite, puisque nous allons voir com­ment…

Créer une version AMP de votre blog

En fait, ce n’est pas l’ensem­ble du blog qui va être disponible au for­mat AMP, mais unique­ment les arti­cles, les pages et les archives. Les pages et les archives ne sont pas encore con­vert­ibles avec l’ex­ten­sion AMP de base, mais nous allons voir com­ment con­tourn­er cette lim­i­ta­tion.

Même si les arti­cles con­stituent l’essen­tiel de votre blog, je vous encour­age à avoir une ver­sion adap­tée à la nav­i­ga­tion sur mobile (thèmerespon­sive ou adap­ta­tive), si ce n’est pas encore le cas, pour vos Cus­tom Post Types ou pour les pages créées via un con­struc­teur de page par exem­ple, qui eux ne peu­vent être passés au for­mat AMP aus­si sim­ple­ment.

Une seule exten­sion suf­fit à génér­er vos pages AMP : il s’ag­it tout sim­ple­ment de AMP(par Automat­tic et Google prin­ci­pale­ment).

AMP

Auteur(s) : West­on Ruter

Ver­sion actuelle : 2.5.5

Dernière mise à jour : 10 avril 2025

amp.2.5.5.zip

76%Éval­u­a­tions 500 000+Instal­la­tions WP 6.5+Néces­saire

Installez, validez, et c’est fini. Enfin presque… En ten­tant la val­i­da­tion, je me suis aperçu que cer­tains élé­ments indis­pens­ables fai­saient défaut (la balise title  par exem­ple). Et que le look était vrai­ment basique, très (trop) basique.

Une deux­ième exten­sion m’a per­mis de résoudre les prob­lèmes de val­i­da­tion et de cus­tomiser l’af­fichage : AMP for WP — Accel­er­at­ed Mobile Pages (et pas que l’af­fichage, d’ailleurs).

AMP for WP – Accel­er­at­ed Mobile Pages

Auteur(s) : Mohammed Kalu­di

Ver­sion actuelle : 1.1.4

Dernière mise à jour : 8 avril 2025

accelerated-mobile-pages.1.1.4.zip

88%Éval­u­a­tions 100 000+Instal­la­tions WP 3.0+Néces­saire

C’est d’ailleurs cette deux­ième exten­sion que je vous con­seille d’u­tilis­er.

Installez, activez, et direc­tion les réglages : vous allez per­son­nalis­er l’ex­péri­ence AMP dans les moin­dres détails.

Onglet après onglet, vous allez pou­voir trac­er les vis­ites sur ces pages, grâce à Google Ana­lyt­ics, apporter votre touche per­son­nelle au design, ajouter les bou­tons des réseaux soci­aux (Face­book, Twit­ter, Google +, Pin­ter­est, LinkedIn et What­sApp, plus un lien pour partager par cour­riel), créer une ver­sion AMP des pages et des archives, ajouter du con­tenu lié… c’est un bon quart d’heure de per­son­nal­i­sa­tion qui vous attend 😉

Dans l’on­glet Design, vous ver­rez un bou­ton Launch Post Builder (vous ne pou­vez pas ne pas le voir), et juste au-dessous, un champ de sélec­tion (pour choisir entre 2 designs types). En cli­quant sur le bou­ton, vous ouvrez un nou­v­el onglet (ou une nou­velle fenêtre, tout dépend de la con­fig­u­ra­tion de votre nav­i­ga­teur) et vous avez dans l’outil de per­son­nal­i­sa­tion tous les élé­ments option­nels de votre page AMP.

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

L’op­ti­mi­sa­tion pour les moteurs de recherche n’est pas en reste, l’ex­ten­sion a prévu d’im­porter les balis­es SEO ain­si que la descrip­tion depuis Yoast SEO.

Vous pestez de ne pas pou­voir ajouter de pubs au for­mat AMP ? S’il est vrai que les pub­lic­ités clas­siques ne passent pas toutes, Accel­er­at­ed Mobile Pages a prévu de ne pas vous priv­er de toute source de revenus : l’on­glet Adver­tise­ment prévoit sept tailles per­son­nal­isées et qua­tre emplace­ments pour insér­er des pubs Adsense ou Dou­bleClick (et de 90 sources au total via une exten­sion fac­turée 29⁹⁹$ hors pro­mo­tion).

Vous trou­verez l’ensem­ble des mod­ules dédiés à l’ex­ten­sion Accel­er­at­ed Mobile Pages sur leur site inter­net. Le mod­ule AMP WooCom­merce est gra­tu­it, les autres — per­me­t­tant de gér­er la pub­lic­ité, les Cus­tom Post Types, les ACF ou l’é­val­u­a­tion (note entre une et cinq étoiles) sont payants.

Au vu des sta­tis­tiques con­cer­nant la cor­réla­tion entre la rapid­ité de charge­ment des pages et le taux de trans­for­ma­tion, je dirais que ne pas essay­er AMP WooCom­merce serait pour le moins dom­mage.

Une fois que vous avez ter­miné de per­son­nalis­er vos pages AMP, n’ou­bliez pas d’en­reg­istr­er les mod­i­fi­ca­tions via le bou­ton Save Changes — lui non plus, vous ne devriez pas le louper, avec sa sub­lime couleur bleu / vio­let 😀

Par défaut, les liens dans votre page AMP… ne sont pas au for­mat AMP 🙁 J’ai trou­vé une astuce sur le web (Word­Press pour AMP : Com­ment créer des liens internes au for­mat AMP ?) avec un bout de code que j’ai quelque peu mod­i­fié, pour que les liens avec ancre puis­sent eux aus­si être con­ver­tis au for­mat AMP sans prob­lème.

add_filter('the_content', 'replace_href_with_amp_url', 2);
function replace_href_with_amp_url($content ){

  if (is_amp_endpoint() ){

	$doc = new DOMDocument();
	$doc->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));

	$links = $doc->getElementsByTagName('a');

	foreach ( $links as $item ) {

	  if( $item->hasAttribute('href') ){
		if( strpos($item->getAttribute('href') , "/tag/" ) == false &&
		strpos($item->getAttribute('href') , "/wp-content/uploads/" ) === false &&
		strpos($item->getAttribute('href') , "votre-domaine.com" ) !== false ) {
		  $rawUrl = $item->getAttribute('href').'amp/';
		  if( strpos( $rawUrl, '?' ) !== false ) {
			$url = explode( '?', $rawUrl );
			$ampUrl = rtrim( $url[0], '/' ) . '/amp/?' . $url[1];
			
		  }
		  elseif( strpos( $rawUrl, '#' ) !== false ) {
			$url = explode( '#', $rawUrl );
			$ampUrl = rtrim( $url[0], '/' ) . '/amp/#' . $url[1];			
		  }
		  else {
			$ampUrl = $rawUrl;
		  }
		  $item->removeAttribute('href');
		  $item->setAttribute('href', $ampUrl);
		}
	  }
	}

	$content = $doc->saveHTML();
  }

  return $content;
}

Pour gér­er vos bouts de code, je vous recom­mande d’u­tilis­er l’ex­ten­sion Code Snip­pets plutôt que d’in­té­gr­er le code dans votre fichi­er functions.php .

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

Validez vos pages AMP

Si vous n’avez pas besoin de dire à Google que vous avez une ver­sion opti­misé de vos arti­cles (la balise link pointant vers votre page AMP avec l’at­trib­ut rel="amphtml" suf­fit, elle est incluse automa­tique­ment dans la page générée par Word­Press), il est préférable indis­pens­able de tester la valid­ité de la page AMP générée. Le pro­jet AMP met à votre dis­po­si­tion un out­il de val­i­da­tion des pages AMP, et Google en pro­pose un lui aus­si, plus agréable visuelle­ment, et un peu plus par­lant. Si vous utilisez les out­ils pour web­mas­ters de Google, vous aurez accès à une troisième con­sole de test, bien plus détail­lée.

Au prochain pas­sage des robots d’in­dex­a­tion, votre con­tenu AMP sera trou­vé et mis en cache sur le CDN de Google : si un inter­naute vis­ite votre blog à par­tir d’un lien (externe ou interne) c’est la page générée par Word­Press qui sera util­isée. S’il vient du moteur de recherche, c’est la ver­sion du CDN qui sera affichée.

Si vous voulez gag­n­er un peu de temps sur la prochaine index­a­tion, vous pou­vez aus­si pass­er par un out­il de val­i­da­tion “made in Google” : le Test AMP.

Votre page sera scan­née et vous pour­rez la soumet­tre en direct pour index­a­tion.

Et voilà ! Vous avez vos arti­cles disponibles au for­mat AMP. Sans prise de tête, sans con­nais­sance du lan­gage AMP HTML.

En conclusion

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

Le for­mat AMP n’est pas la panacée, loin s’en faut. C’est une solu­tion par­mi tant d’autres à la frénésie qui pousse les inter­nautes (vous et moi com­pris) à vouloir tou­jours plus, tou­jours plus vite.

Quand elles sont servies par le CDN de Google, les pages AMP peu­vent être refer­mées — et vous retournez directe­ment à la recherche Google ? D’où un taux de rebond plus impor­tant.

Mais il ne faut pas pour autant oubli­er les avan­tages majeurs du for­mat AMP…

Gain de temps (de charge­ment pour l’in­ter­naute), gain de bande pas­sante, gain prob­a­ble pour la SEO, expéri­ence util­isa­teur opti­misée… que deman­der de plus ?

Le café ? Non, non, non et non ! Je vous le répète, ni Word­Press ni Google ne vous fer­ont le café 😉 Quoique… on est par­ti pour un thé ?

Et vous, avez-vous créé une ver­sion AMP de votre blog ? En voyez-vous l’u­til­ité ? Quelles exten­sions utilisez-vous pour cela ?