Bienvenue dans la deuxième partie du Guide AMP pour WordPress. Dans notre dernier article, nous avons découvert l'importance d'une stratégie Web axée sur le mobile et comment AMP peut potentiellement changer la donne. Dans le guide d'aujourd'hui, nous allons en apprendre davantage sur :

  • Comment intégrer AMP à WordPress
  • Meilleurs plugins WordPress pour personnaliser AMP
  • Avons-nous vraiment besoin d'implémenter AMP dans notre site WordPress ?

Commençons.

Guide vidéo AMP pour WordPress

Reprenant là où la dernière publication de notre série s'est arrêtée, vous pouvez suivre la vidéo de WPCrafter sur la façon de configurer facilement AMP avec votre site Web WordPress. La vidéo d'Adam vous guide à travers chaque étape de notre guide – profitez-en !

Comment configurer AMP pour WordPress

ampli-plugin-wordpress-hero

Mise en place AMP pour WordPress est un processus très simple. Il vous suffit d'installer le plugin WordPress AMP développé par Automattic et le reste suivra.

  • Rendez-vous sur Tableau de bord WordPress> Plugins> Ajouter un nouveau
  • Rechercher “AMP”

Sélectionnez le plugin et cliquez sur Installer maintenant

comment-installer-amp-wordpress-plugin

Lors de l'activation du plugin, toutes les URL de publication de votre site auront une version AMP. Vous pouvez accéder au lien de n'importe quel message, ajouter /amp/ à la fin de l'URL et vous verrez la version AMP.

Jetons un coup d'œil à la version normale de la page Web.

test-site-no-amp_rz

Et voici la version AMP de la même page :

test-site-amp_rz

C'est tout – vous avez réussi à configurer AMP dans WordPress. Difficile de croire que c'est aussi simple, n'est-ce pas ?

Cependant, si vous n'avez pas jolis permaliens activé, vous pouvez obtenir la version ampli en ajoutant ?amp=1 au lien du poste. Par exemple, le lien du message serait :

  • Version normale : http://example.com/2016/01/01/hello-mobile-web/
  • Version AMP : http://example.com/2016/01/01/hello-mobile-web/amp/
  • Version AMP (avec les jolis permaliens désactivés) : http://example.com/2016/01/01/hello-mobile-web/?amp=1

Le plugin AMP ajoute une balise méta standard dans l'en-tête de vos pages HTML “normales” qui permet à Google et aux autres moteurs de recherche de reconnaître l'existence de la version AMP des pages. Il utilise le logo du site que vous pouvez définir dans le Personnalisateur de thème WordPress.

Il est important de noter que le plugin ne prend en charge que la conversion des publications en versions AMP. D'après la description du plugin consultée le 1st Novembre 2016, la prise en charge de la version AMP des pages WordPress est en cours de développement et sera bientôt disponible.

Mesurer l'impact des performances AMP

Nous avons décidé de mesurer l'impact sur les performances de la version AMP de la page dans Pingdom. Les résultats étaient radicalement différents. Gardez à l'esprit que notre configuration WordPress était dans un environnement d'hébergement partagé utilisant le thème Twenty Fourteen par défaut sans plugins de mise en cache ou d'optimisation installés.

La capture d'écran suivante montre le benchmark des performances de la version de base de la page :

test-site-no-amp-pingdom

Et voici le résultat de la version AMP de la page :

test-site-amp-pingdom

Les résultats sont remarquablement différents.

Chacun des composants a connu une amélioration considérable :

  • Taille de la page réduite de 70 %
  • Temps de chargement réduit de 35 % à moins de 900 millisecondes
  • Le nombre de demandes a été réduit de près de 60 %, passant de 17 à seulement 7 !

Tout cela a été réalisé par AMP, tout en conservant le contenu de la page. Le tableau suivant capture les détails du test pour votre référence :

Facteur Normal AMP Amélioration
Taille de la page (Ko) 563.8 167 70%
Temps de chargement (sec) 1.42 0,929 35%
Nombre de demandes 17 7 59%

En regardant ces chiffres, il est évident que l'obtention de l'AMP est une évidence. Non seulement cela vous aidera à améliorer vos scores de référencement, mais cela offrira également une belle expérience utilisateur épurée.

De plus, vous pouvez également inclure des mécanismes de suivi dans la version AMP de la page. Nous couvrirons cela dans la section suivante.

Extension des capacités d'AMP

Bien que l'optimisation de votre contenu pour les lecteurs soit une bonne pratique, il est également important de maintenir la cohérence de la marque. Cela signifie que même les versions AMP de votre contenu existant doivent suivre le schéma de couleurs, les polices et l'interface utilisateur générale de votre marque.

Le plugin AMP WordPress n'a pas les options pour effectuer de telles modifications. Son objectif était de fournir un moyen rapide et facile de rendre l'ensemble de votre contenu WordPress existant compatible avec AMP – un travail qui fonctionne plutôt bien.

Entrer le AMP pour WP – Pages mobiles accélérées brancher.

ampli-pour-wp-plugin-2-hero

Ce plugin gratuit étend les capacités d'AMP dans WordPress en offrant des fonctionnalités supplémentaires telles que :

  • Intégration Google Analytics
  • Prise en charge des pages AMP WooCommerce
  • Messages connexes sous le message
  • Liste des commentaires récents
  • Téléchargement de logo personnalisé
  • Barre de partage social
  • Prise en charge de l'intégration de contenu riche, y compris des vidéos et du contenu de plateformes de contenu telles que YouTube, Instagram, Twitter, Vine, etc.

Comme condition préalable, le plugin nécessite que vous installiez et activiez le plugin AMP pour fonctionner correctement. Comme d'habitude, vous pouvez installer ce plugin de la même manière que nous avons installé le plugin AMP au début de cet article.

amp-for-wp-plugin-2-install-activate

Une fois activé, vous êtes prêt à configurer les différentes options que le plugin a à offrir. Dirigez-vous vers Tableau de bord WordPress > AMP pour accéder aux paramètres.

Parmi les nombreux paramètres proposés par le plugin, nous avons essayé :

  • Activer les commentaires
  • Ajout de messages associés
  • Ajouter une navigation aux articles suivants/précédents

Voici une capture d'écran de l'apparence de la version AMP après l'enregistrement des modifications :

ampli-pour-wp-plugin-2-hero-test-page-500-px

Et voici les performances :

amp-for-wp-plugin-2-speed-test

Voici la capture d'écran de la page AMP vanille à titre de comparaison :

test-site-amp-pingdom

Le temps de chargement a encore diminué de 7,4 %. Il est intéressant de noter que bien que la taille de la page et le nombre de requêtes aient légèrement augmenté, il y a eu une amélioration de la note de performance globale (augmentation de 3 points).

Dans l'ensemble, ce plugin est excellent si vous voulez vraiment pousser plus loin vers AMP et faire en sorte que votre contenu, vos publicités et vos analyses fonctionnent bien avec la plate-forme.

Conclusion

Compte tenu de la croissance explosive de l'utilisation du téléphone mobile au cours des dernières années, ce n'est plus un option pour que les entreprises en ligne adoptent le mobile d'abord. C'est un nécessité absolue. Le projet Accelerated Mobile Pages est un effort ambitieux vers cet objectif et de plus en plus de médias l'adaptent rapidement.

Bien qu'il soit plus simple pour les nouveaux blogs d'intégrer AMP, les blogs avec des milliers de pages de contenu pourraient certainement trouver cela particulièrement difficile. La raison est simple – tout le monde ne suit pas les normes appropriées lors de la publication en ligne. Les organisations évoluent. Même les technologies Web qui étaient « chaudes » il y a cinq ans sont obsolètes aujourd'hui. Bien qu'AMP fasse de son mieux pour s'appuyer sur les technologies Web existantes, il peut y avoir plusieurs cas d'incompatibilité/d'erreurs. Et ces erreurs pourraient nuire à vos scores de référencement.

Idéalement, les entreprises devraient mesurer leurs sources de trafic entrant : quel pourcentage provient d'un appareil mobile ? Combien d'entre eux proviennent de la recherche mobile ? Quel est le taux de rebond des visiteurs mobiles ? Ce sont les questions que vous devriez vous poser avant d'envisager l'AMP.

Si vous êtes convaincu que le contenu de votre site Web est techniquement structuré selon les dernières normes, alors par tous les moyens – allez-y avec AMP ! Vous ne ferez que booster votre référencement.

Cependant, si vous savez qu'il existe de nombreuses erreurs de configuration internes, des liens rompus et des erreurs, il serait préférable de résoudre (et éventuellement de résoudre) ces problèmes avant de passer à AMP.

Que pensez-vous de l'AMP ? L'utilisez-vous pour consommer du contenu ? L'avez-vous implémenté dans votre site Web? Nous aimerions recevoir de vos nouvelles!