AMP pour WordPress


Par Nicolas Mise à jour le 17 octobre 2016 Publié le 3 avril 2016 Rubrique WordPress

Un format mobile avantageux pour WordPress : AMP

WordPress a annoncé en février l’arrivée de AMP sur sa plateforme. AMP signifiant « Accelerated Mobile Pages ». C’est un nouveau format facilitant les chargements de pages pour les smartphones. Le projet, délivré en open source, est réalisé par Google. Lorsque les visiteurs arrivent sur un site utilisant la technologie AMP à travers une recherche mobile, les articles se chargent quasiment instantanément.

Comment ça marche ?

Chaque article est généré de manière dynamique en suivant les caractéristiques AMP, ajoutant le permalien « /amp/ » à la fin des l’URL des versions mobiles AMP. Les articles sont également présents dans le cache du cloud Google afin de réduire les temps de chargement. La différence est phénoménale. L’équipe de Pinterest, par exemple, avait à l’époque estimé que les pages se chargeaient jusqu’à quatre fois plus rapidement et utilisaient huit fois moins de requêtes que les pages traditionnelles.

WordPress AMP

Qu’est-ce qui fait d’AMP un format aussi performant ?

Google y a implémenté plusieurs optimisations très strictes qui permettent cette rapidité :

  • N’autorise que les scripts asynchroniques
  • Mesure toutes les ressources de manière statique
  • Ne laisse pas les mécanismes d’extension bloquer le rendu
  • Exclut tous les JavaScript tiers du chemin critique
  • Tout code CSS doit être en ligne et de longueur limitée
  • Minimise les recalculations de style
  • Priorise le chargement de ressources
  • Charge les pages en un instant

Automattic (qui édite WordPress) a très vite sorti un plugin AMP proposant aux utilisateurs WordPress qui s’auto-hébergent de prendre avantage des améliorations délivrées par AMP. Le plugin a déjà été testé et compte aujourd’hui environ 8000 utilisateurs (à la date où je publie cet article). Pour la majorité de ces utilisateurs, l’installation et l’activation du plugin a été très simple. Les styles par défaut sont plutôt basiques, mais il est possible de personnaliser ses pages AMP via certains plugins complémentaires et en se référant à GitHub AMP WP.

Pourquoi WordPress ?

D’après une étude de NiemanLab, les éditeurs de contenu ne passant pas par WordPress ont beaucoup de mal à intégrer AMP à leurs sites internet, puisqu’il demande des talents de développeur web afin d’être implémenté.
Les éditeurs de sites web peuvent faire le choix d’ignorer le format AMP, mais le problème est que Google pourrait préférer mettre en avant les sites étant configurés pour recevoir AMP, simplement parce que ces pages se chargent plus vite et offrent aux lecteurs une meilleure expérience, mais également car ces pages demandent moins de ressources pour être affichées.

AMP est un plan gagnant pour le web

AMP peut être vu comme un coup de coude donné à Facebook qui avait, il y a peu, implémenté les « instant articles« . Facebook souhaitait apporter un chargement plus rapide sur mobile, mais uniquement sur sa propre plateforme et sur son application. AMP, de son côté, permet un chargement rapide n’importe où sur le web, tout en étant contrôlé et personnalisé par l’éditeur de contenu lui-même.
Déjà en octobre 2015 WordPress était l’une des premières compagnies à entretenir une entente avec Google sur la nécessité d’accélérer la navigation web sur mobile. Paul Maiorana, le vice président des services de plateforme d’Automattic avait annoncé l’impact de WordPress sur le projet :

« Nous pensons que l’open source est une des idées les plus puissantes de notre génération. Nous supportons activement un Internet « open » et gratuit. Nous sommes très heureux de supporter une initiative open source comme AMP, qui liera le travail des compagnies d’édition et de technologie afin de créer une expérience mobile plus satisfaisante pour tout le monde. »

Le web mobile actuel est un terrain vague rempli de pages zombies, beaucoup de sites sont encore intolérablement pénibles à visiter et la plupart des utilisateurs finissent bien souvent par quitter une page qui met trop longtemps pour se charger. Le projet AMP aide les éditeurs de sites internet à délivrer une version plus accessible de leurs acticles. AMP rend la navigation mobile plus rapide pour tout le monde, et non pas seulement ceux qui utilisent certaines applications optimisées. En tant que tel, c’est un grand pas en avant pour le web. AMP est par exemple très utile lorsque vous êtes au milieu de nulle part et que vous avez une très mauvaise réception. Tout site internet utilisant la solution WordPress peut supporter la technologie AMP, et ce n’est pas une goutte d’eau dans l’océan puisque actuellement 25% des sites internet utilisent la plateforme WordPress.

Voici une exemple de site que j’ai mis en place dernièrement et qui intègre la technologie AMP :

Pour les sites WordPress proposés à mes clients, j’intègre également à AMP :

  • Le logo du site dans l’en-tête (non présent par défaut)
  • La personnalisation des couleurs pour reprendre le style du site (par défaut, cela est très basique)
  • Le suivi Google Analytics sur les pages AMP (par défaut, le tracker n’est pas présent)
  • Les images à la une des articles (non présentes par défaut)
  • La proposition des articles en relation (non présent par défaut)

Vérifier que les pages AMP de notre WordPress soient validées par Google

Cela n’est pas de mettre tout ceci en place… il faut ensuite vérifier que cela fonctionne bien et que Google valide biens les pages AMP que l’on lui propose. Pour cela, nous allons utiliser les outils de Google. Deux possibilités : Search Console et Chrome.

Google Search Console

Sous Google Search Console, il faut se rendre dans : Apparence dans les résultats de recherches -> Accelereted Mobile Page

Sur l’exemple ci-dessous, on se rend compte qu’une première page a été validée, puis qu’elle est passée en erreur, qu’une seconde page est apparue en erreur… Cela était du à un plugin social qu’il m’a fallut remplacer car problématique avec AMP. Une fois le problème d’indexation corrigé, les deux pages correspondant aux deux premiers articles du site WordPress ont été validées et indexées par Google.

AMP-validation-erreurs-google-search-consoleConsole de Google Chrome

Une autre façon de détecter la validation d’une page et d’afficher les éventuelles erreurs, c’est d’utiliser le navigateur Google Chrome. Pour cela, il faut se rendre sur une page AMP et rajouter ce paramètre d’URL à l’adresse de la page : #development=1

Exemple : http://www.acxelnet.fr/comment-nettoyer-ses-vitres/amp/#development=1

Une fois la page ouverte via le navigateur Google Chrome, il suffit de cliquer sur F12 pour ouvrir les outils de développement, puis se rendre dans l’onglet « Console ».  La console de Chrome doit détecter la page AMP en affichant « Powered by AMP » et si la page ne comporte pas d’erreur, il y aura également « AMP validation successful » juste en dessous. Exemple :

AMP-validation-successful-google-chrome

 

Dans le cas d’erreurs sur la validation des pages AMP, celles-ci seront affichées automatiquement dans la console de Google Chrome. Exemple :

Erreur AMP site WordPress

Google AMP Test

Édition du 16/10/2016 : Google vient de rendre disponible un outil de teste pour AMP : https://search.google.com/search-console/amp

Articles à lire également dans la même catégorie :

WordCamp Paris 2013 J'ai déjà eu l'occasion de participer à des Barcamp PrestaShop, mais jamais encore eu l'occasion de participer à un WordCamp WordPress. Vendredi 18 janvier, je fais donc l'aller retour Montpellier/Paris en train sur la journée pour assister à mon premier WordCamp ! Programme du WordCamp Paris 2013 08:00 - Arrivée & Petit déjeuner 08:45 - Introduction 09:00 - WordPress et le référencem...
Intégrer de la donnée structurée à son site WordPress Au fil des ans et des modifications de leurs algorithmes, les moteurs de recherches et Google en particulier, intègrent de plus en plus « d’intelligence artificielle » pour se rapprocher du comportement humain. La prise en compte des données structurées permet d'apporter des réponses rapides aux requêtes des internautes (réservation, commande, etc.). Nous allons donc voir pourquoi il est pertinent...
Sites WordPress hébergés dans des containers Très beau projet que vient de réaliser OVH pour leur nouveau datacentre à Strasbourg hébergé dans des containers. Projet écologique et respectueux de l'environnement qui a eu l'avantage d'être mis rapidement en place. J'utilise les services d'OVH pour héberger mes petits sites vitrine sous WordPress. OVH utilise un nouveau concept : aménager des containers pour y accueillir un datacentre et p...

Cet article vous a plu ? Un petit partage... Merci !

N’hésitez pas à donner votre avis


  • Le 26 septembre 2016 à 18 h 18 min, Julien974 a dit:


    AMP fonctionne aussi sur prestashop ??

  • Le 26 septembre 2016 à 18 h 22 min, Nicolas a dit:


    Non pour le moment pas d’extensions disponible pour le cms PrestaShop, plus compliqué car il existe différentes solutions de blog…

À vous de commenter!


Présentation

Tombé dans la marmite de la création web au tout début des années 2000, ce n'est qu'en 2010 que je me suis lancé à mon compte pour proposer mes services. Passionné avant tout, je travaille exclusivement avec les solutions WordPress, WooCommerce et PrestaShop dont je suis ambassadeur à Montpellier. Ma priorité est le référencement naturel, chaque prestation est pensée et optimisée pour le SEO. Je propose aussi des prestations d'audits SEO et des prestations de liens (netlinking) pour booster votre visibilité Google.

Article à la une

AMP pour WordPress
  • AMP et WordPress

Restez informé !

Actualité et veille sur WordPress, WooCommerce, PrestaShop, SEO et CreaNico. Inscrivez-vous !

Contact

contact(at)creanico.fr

04.11.93.20.32

09.59.67.85.05

Basé entre Montpellier et Nîmes (France)

e2c74dfae09bea9532bb9a32df6999cfVVVVVVVVVVVVVVVVV
error: Content is protected !!