Optimiser parfaitement WordPress pour les mobiles avec AMP HTML

Mathieu Chartier 11 décembre 2015 à 10:42 Tutoriels illustrés 13 commentaires

Le projet AMP (Accelerated Mobile Pages) est une librairie HTML open source qui permet de considérablement accélérer les pages web sur les supports mobiles. Les pages en AMP HTML peuvent être chargées jusqu'à 4 fois plus rapidement que les pages web classiques, tout cela en chargeant jusqu'à 8 fois moins de données qu'habituellement.

Soutenu notamment par Google, Twitter, Pinterest et Linkedin, AMP HTML risque de devenir un phénomène majeur sur mobile en 2016, à tel point que Google a déjà évoqué un boost SEO et une indexation spécifique des pages en AMP HTML (sans oublier le label "fast" qui pourrait accompagner ces pages optimisées dans les SERP).

Comme je suis un passionné de WordPress et que le firme soutient AMP également, je me suis penché sur la question d'un passage de WordPress vers AMP HTML, notamment pour le WPTech qui se tenait à Nantes le 5 décembre 2015. Je tiens donc à vous fournir quelques premières possibilités pour optimiser votre site WordPress pour les mobiles.

Retenons qu'il nous faut plusieurs étapes pour que le système fonctionne :

  1. Installer le plugin WordPress AMP. Si ce dernier est disponible dans les extensions du CMS (https://wordpress.org/plugins/amp/), il est conseillé de le télécharger via la page GitHub qui lui est dédiée, la version étant mise à jour et plus complète (https://github.com/Automattic/amp-wp).
  2. Détecter les supports mobiles. Cela peut se faire par user-agent (ce sera le cas ici) ou par analyse de la résolution du support (un peu comme en responsive web design en CSS).
  3. Optimiser le passage vers les pages en version AMP HTML. Ici, je vais présenter ce que j'ai fait pour ce blog, à savoir créer un bouton pour laisser le choix à l'utilisateur (car toutes les pages ne fonctionnent pas en AMP HTML, il faut le savoir). Mais il existe une alternative qui force le chargement des pages AMP HTML sur les mobiles si cela vous sied davantage.
  4. Modifier l'ensemble des URL WordPress avec le suffixe "AMP". Selon le type de permaliens que vous utilisez, le suffixe peut prendre la forme de "?amp=1" ou "/amp/" (le dernier slash est optionnel en fait). Le problème du plugin, c'est qu'il ne modifie pas automatiquement les URL WordPress utiles (il ne faut pas toutes les changer puisque des pages ne fonctionnent pas avec AMP HTML), ce qui oblige les utilisateurs à retomber dans la version classique du site dès qu'ils cliquent sur un lien. Comme je n'ai pas ça (ce n'est pas ergonomique), je vous proposerai une solution en Javascript natif pour contrecarrer ce problème.
  5. Adapter votre thème en AMP HTML. Le plugin créé un thème simple et rapide à charger, mais qui casse complètement votre thème originel, retirant même le menu (voir capture ci-dessous). Les concepteurs planchent actuellement sur des solutions mais rien ne dit qu'ils trouveront une solution idéale. Je vais vous montrer comment j'ai fait sur ce blog pour obtenir le même thème avec ou sans AMP HTML en partant du plugin de WordPress.

Plugin de base AMP HTML pour WordPress : thème par défaut

Étape n°1

Installez le plugin AMP HTML via GitHub idéalement, puis créez un fichier Javascript (appelé ici detectmobilebrowserAMP.js) contenant une première fonction de détection des mobiles.

Cette fonction est basée sur les codes proposés par le site detectmobilebrowsers.com, mais réécrite pour retourner un booléen (true/false).

function isMobile(a){
	if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4))) {
		return true;
	} else {
		return false;
	}
}

 

Étape n°2

Créez un système pour passer vers les pages en AMP HTML.

Ici, j’ai surtout développé un bouton qui permet de switcher entre la version responsive design et la version en AMP HTML. Le code correspondant sera présenté à l’étape suivante, avec une variante possible (chargement direct de la page AMP).

Switch avec un bouton pour passer d'une version responsive vers AMP HTML

Étape n°3

Ajoutez le code suivant pour créez un switch entre la version mobile classique et la version AMP HTML.

N.B. : la variante permet de faire une redirection automatique vers les pages mobiles, mais il faut bien faire attention à ne pas le faire quand les pages ne fonctionnement pas avec AMP (non codé ici…).

 

if(isMobile(navigator.userAgent||navigator.vendor||window.opera)) {
	// Créer un lien pour la version AMP HTML
	var div = document.createElement('div');
	div.className = "amp-link"; // Ajout d'une classe CSS au bouton

	// Vérification de la présence du suffixe "/amp" dans l'URL
	// 1. Si le suffixe n'est pas présent, proposez le bouton vers AMP
	// 2. Dans le cas inverse, proposez un bouton vers la version classique
	if(document.URL.lastIndexOf("/amp") === -1) {
		urlAMP = document.URL;
		div.innerHTML = '<a href="'+urlAMP+'amp/">Version AMP (rapide)</a>';
	} else {
		urlAMP = document.URL.substr(0, parseInt(document.URL.indexOf("/amp")));
		div.innerHTML = '<a href="'+urlAMP+'">Version classique</a>';
	}
	
	// Ajout du lien dans la zone désirée
	// var cible = document.getElementById('header');
	var cible = document.getElementById('search-social');
	cible.parentNode.insertBefore(div, cible);
}

// Variante pour faire redirection automatique directe
if(isMobile(navigator.userAgent||navigator.vendor||window.opera)) {
	// Pensez à rajouter du code pour bloquer les pages non compatibles avec AMP
	window.location= document.URL+'amp/';
}

Étape n°4

Modifiez automatiquement toutes les URL compatibles avec AMP lorsque vous êtes dans la version optimisée.

Ici, vous verrez que j’ai dû traiter le cas des ancres nommées pointant vers les commentaires, inscrits par défaut par la fonction comments_popup_link() de WordPress notamment.

N.B. : par défaut, le plugin WordPress ne fait pas ce changement automatique, donc chaque clic sur une URL renvoie vers la version classique du site, il faut donc passer outre ce défaut actuel.

// Automatiquement ajouter le suffixe "/amp/" à tous les liens du site (sauf externes !)
if(document.URL.lastIndexOf("/amp") != -1) {
	for(var i = 0; i < document.links.length; i++){
		// Vérifie automatiquement s'il y a un slash à la fin de l'URL
		if((document.links[i].href.lastIndexOf('/') - document.links[i].href.length + 1) === 0) {
			var ampSuffixe = "amp/";
		} else {
			var ampSuffixe = "/amp/";
		}
		
		// Récupérer tous les liens du même domaine et ajouter le suffixe quand il le faut
		if(document.links[i].href.indexOf(document.location.origin) != -1) {
			// Option 1 : conserver uniquement les URL qui doivent porter le suffixe "/amp/"
			var regexPagePost = new RegExp("([0-9]+)/([0-9]+)/");
			if(regexPagePost.test(document.links[i].href)) {
				// Nettoyer le lien avec #respond (commentaires)
				var regexCommentaire = new RegExp("(#respond)");
				if(regexCommentaire.test(document.links[i].href)) {
					// Ajout du suffixe AMP pour l'ancre nommée vers les commentaires
					document.links[i].href = document.links[i].href.replace(/#respond/i, "amp/#respond");
				} else {
					if(urlAMP != document.links[i].href) {
						// Ajout du suffixe AMP automatiquement
						document.links[i].href = document.links[i].href+ampSuffixe;
					}
				}
			}
			/*
			// Option 2 : exclusion des liens qui ne doivent pas avoir le suffixe (à personnaliser selon le site)
			if(document.links[i].href.indexOf("/feed") == -1 && document.links[i].href.indexOf("#respond") == -1) {
				// Ajout du suffixe AMP automatiquement
				document.links[i].href = document.links[i].href+ampSuffixe;
			}
			*/
		}
	}
}

 

Étape n°5

Adaptez votre thème WordPress en AMP HTML. Il convient de modifier le thème par défaut qui est bien trop simpliste et limité, mais le plugin ne le permet pas par défaut, il faut donc développer le système manuellement.

Voici la technique que j’ai employée :

  • modification du fichier template.php du plugin AMP de WordPress (voir code).
  • ajout d’un dossier « amp » (ou « template » si vous préférez) dans le plugin avec une copie des pages à modifier. Cela dépend de votre thème mais en général, il s’agit de header.php, footer.php, single.php, page.php, category.php, etc.
  • modification des fichiers pour modifier le code et l’adapter à AMP HTML (changer les balises <img/> fixes en <amp-img>…</amp-img>, etc.). L’étape suivante vous montrera juste qu’il faut conserver le début de l’entête spécifique à AMP.

Ne déplacez que les fichiers nécessaires, il n’est pas utile de recopier le fichier style.css par exemple, ni les pages inadaptées en AMP HTML !

<?php include( dirname( __FILE__ ) . '/amp/header.php' ); ?>
<?php
if(is_home()) {
	include( dirname( __FILE__ ) . '/amp/index.php' );
} elseif(is_category()) {
	include( dirname( __FILE__ ) . '/amp/category.php' );
} elseif(is_single()) {
	include( dirname( __FILE__ ) . '/amp/single.php' );
} elseif (is_page()) {
	include( dirname( __FILE__ ) . '/amp/page.php' );
}
?>
<?php include( dirname( __FILE__ ) . '/amp/footer.php' ); ?>

Étape n°6

Pensez à conserver les lignes importantes du header.php, pour que le projet AMP soit bien activé dans les pages.

Je vous présente ici une version « light » du header.php original du plugin contenant les lignes à absolument conserver (en gras).

<!doctype html>
<html amp>
<head>
	<title><?php echo esc_html( $amp_post->get_title() ); ?> | <?php echo esc_html( get_bloginfo( 'name' ) ); ?></title>
	<meta charset="utf-8">
	<link rel="canonical" href="<?php echo esc_url( $amp_post->get_canonical_url() ); ?>" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
	<link href='https://fonts.googleapis.com/css?family=Merriweather|Open+Sans:400,700,400italic,700italic' rel='stylesheet'>
	<?php foreach ( $amp_post->get_scripts() as $element => $script ) : ?>
		<script custom-element="<?php echo esc_attr( $element ); ?>" src="<?php echo esc_url( $script ); ?>" async></script>
	<?php endforeach; ?>
	<script src="https://cdn.ampproject.org/v0.js" async <?php echo defined( 'AMP_DEV_MODE' ) && AMP_DEV_MODE ? 'development' : ''; ?>></script>
	<script type="application/ld+json"><?php echo json_encode( $amp_post->get_metadata() ); ?></script>
	<?php do_action( 'amp_head', $amp_post ); ?>
	<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
</head>

 

Conclusion

Si vous respectez toutes ces étapes, je ne doute pas que vous pourrez passer votre site WordPress en AMP HTML. Quoi qu’il en soit, je ne vois pas comment le plugin pourrait nous permettre de ne pas mettre les mains dans le code, il y aura forcément des morceaux du thème à modifier manuellement pour que tout soit bien compatible.

Vous pouvez téléchargez ici le fichier detectmobilebrowserAMP.min.js (version compressée) présenté dans ce tutoriel si nécessaire (avec toutes les fonctions du guide), cela vous évitera de tout recopier manuellement.

Télécharger “Code Javascript pour AMP et WordPress”detectmobilebrowserAMP.min_.js – Téléchargé 919 fois – 3,03 Ko

Ce tutoriel n’est pas parfait à 100% car il dépend de votre thème (et quand je vois certains thèmes achetés, j’ai peur…) et de vos capacités techniques pour adapter le template en AMP HTML. Qui plus est, le fait d’utiliser du Javascript peut être parfois contraignant, certains utilisateurs bloquent le langage par défaut dans les navigateurs. C’est pourquoi il est important d’avoir toujours une version responsive design de secours en amont…

Sachez que dans cet exemple, je n’ai pas traité les publicités Adsense (ou autres régies compatibles) qui utilisent le couple de balises <amp-ad>…</amp-ad> ni le cas traité récemment par Google pour Google Analytics, dont l’astuce est d’utiliser les balises <amp-pixel>…</amp-pixel>. Il faudrait donc encore aller plus loin dans le développement spécifique pour faire de l’AMP parfait pour WordPress.

Il est probable que je fasse un autre tutoriel sur AMP HTML via PHP prochainement, avec des fonctions spécifiques (dont certaines sont déjà créées) pour passer tous types de sites web vers ces versions optimisées. Le plus long est de développer les fonctions pour chaque type de balise, et comme je ne les utilise pas toutes dans mes propres sites web, je risque d’en oublier au passage…

13 commentaires

  • baptiste dit :

    Hello,
    Vu le travail à faire pour passer le site en APM, je ne pense pas que le projet sera déployé à grande échelle. même si cela semble sympa. Voir article ici ".arobasenet.com/2016/01/code-page-amp-google-mobile-2584.html"

    • Détrompez-vous, AMP HTML est actuellement travaillé par Google et d'autres grandes marques. Mieux, l'AMP HTML va sûrement accorder un boost SEO aux pages optimisées et Google travaille sur un outil de test dans la Google Search Console. Il faut prendre ça très au sérieux justement, ça risque de faire mal pour les non développeurs. Je bosse actuellement sur un plugin WordPress pour faciliter le portage.

  • Arnaud dit :

    Bonjour,
    il me semble encore un peu tôt pour aller triturer des templates et divers petits ajouts avec un plugin en version 0.1.
    J'avoue ne pas avoir envie de partir dans une solution qui ne soit pas pérenne si le plugin part dans une autre direction, même si ça m'amuse de faire mes propres templates. Mais ça démange quand même !

    Sinon, pour le coup, on arrive à faire des choses très bien avec WP-Touch même si hélas ce n'est pas du AMP-HTML

  • Arnaud dit :

    Pouvez vous d'ors et déjà préciser où vous placer vos fonctions ?
    est-ce dans le fichier du thème actif ou dans un fichier indépendant. Même le readme officiel n'est pas clair ou alors destiné à bien plus malin que moi (qui pourtant bidouille assez fortement).

    J'avoue que je bloque à ce stade préliminaire avant de vraiment adapter à thème à AMP.

    • Pour plus de facilités de gestion, les fonctions sont à placer dans votre thème. Seule l'étape du template AMP est à faire dans le dossier du plugin (car je ne peux pas faire mieux vu comment le plugin officiel est programmé). Attention toutefois, si vous optez pour la version 0.2 du plugin (sortie récemment), il faudra modifier le code des templates différemment (car le plugin a été complètement réécrit avec des fichiers déplacés, etc.).

      • Arnaud dit :

        hummm.. un peu choquant d'aller mettre des fonctions dans le theme classique.. ce qui est étonnant c'est que j'ai, par exemple, une fonction qui enlève les commentaires W3 Total cache et pourtant ça ne marche pas dans la version AMP. Va falloir se pencher sur tout ça... ça promet de la bidouille :)

      • Je ne comprends pas en quoi c'est choquant d'ajouter des fonctions dans son propre thème ? Le fichier functions.php est fait pour ça justement, et les Javascript doivent bien se mettre quelque part, non ? :D
        Il faut savoir que le plugin ne permet pas de tout passer en AMP, c'est extrêmement complexe sincèrement. Il y a tellement de cas particuliers que cela va s'affiner petit-à-petit, mais c'est une galère d'avoir un thème 100% AMP ! ^^

      • Arnaud dit :

        Pour moi c'est choquant d'ajouter des fonctions qui ne sont pas pour le thème actif. AMP se doit d'être un thème à part avec ses propres fonctions. Mélanger me semble risquer.

        Idéalement, j'aimerai que WP Touch se jette dans la bataille.

      • Les fonctions sont bien à part, ce sont juste des filtres WordPress parmi les milliers qui s'exécutent constamment (ce que fait WP Touch d'ailleurs !). Les deux solutions ont leurs qualité : avoir un thème à part laisse plus de liberté mais oblige de bien connaître le code. Avoir une adaptation en ligne permet aux non développeurs d'obtenir au moins une version AMP "light" (bien que des ajustements puissent être réalisés à la main via des filtres si nécessaire).
        Pour l'anecdote, j'utilisais le plugin WordPress AMP et la Search Console m'indiquait 309 erreurs AMP (toutes pages confondues). J'ai installé mon plugin non terminé et je suis tombé à 19 erreurs. C'est peut-être un hasard, je l'admets, mais pour le moment, ça me conforte dans mon idée.

      • Arnaud dit :

        Voici un exemple concret : pour le moment, il y a un bug sur le passage des smiley image en amp. C'est une erreur reconnue et probablement prochainement corrigé.
        J'ai donc voulu ajouter une fonction pour désactiver les images et laisser les bêtes emoticons. En mettant ma fonction dans mon fichier de theme, je désactive aussi sur le theme classique :(
        Ma seule solution est d'aller attaquer le code du plugin pour exécuter cette fonction dans une boucle propre à amp (je n'ai pas vu de test possible permettant de vérifier si on est en affichage amp).

        Je viens de modifier mes templates. J'avais aussi des erreurs, surtout à cause des smileys.

        ça reste du bricolage mais c'est un thème de geek pour le moment donc il ne se doit pas d'être parfait

      • De toutes façons, il restera toujours de petites erreurs tant il existe de cas particuliers et parfois complexes à coder. Il faut programmer une fonction du type "isAMP()" pour vérifier qu'une page est en AMP HTML ou non, et dans ce cas, on peut adapter le code en fonction, ajouter les bonnes URL canoniques, etc. Pour se faire, les plugins utilisent un suffixe comme ?amp=1 ou /amp/ (mais moins conseillé paradoxalement, car il ne fonctionne pas pour toutes les pages). Mais vous le dites, c'est du sacré bricolage ! :D

      • Arnaud dit :

        oui, j'espère qu'un isAmp va sortir et alors on va pouvoir joyeusement coder :)

  • zimou dit :

    Je pense que ce sont les includes de fichiers dans le html qui perturbent tout. Ils sont inclus au bas de la page tous ensemble et après il y a je ne sais quoi qui les positionne, au lieu de les mettre sur la page dans leur ordre d'affichage ...
    Je voulais tester cette façon de faire que j'avais vu sur un forum anglais mais rien ne vaut les bonnes vieilles méthodes pour ne pas tout mélanger.

  • Déposer un commentaire

    Répondre à Arnaud Annuler la réponse

    L'adresse de messagerie ne sera pas publiée.* Champs obligatoires