PWAMP : AMP et PWA, les nouveaux paradigmes du search mobile

Ecrit par
le

Lors du SMX Paris, Philippe Colombet Head of EMEA Strategic relationship for News & Publishers chez Google et Virginie Clève Digital Strategist à Largow sont intervenus sur les formats des sites mobiles disponibles en 2017 « #PWAMP – AMP & PWA : nouveaux paradigmes du search mobile ».

Les formats Search Mobiles en 2017

En 2017, tous les sites sont disponibles sur tous les supports : desktop, mobile et tablette. Proposer un site mobile-friendly semble une évidence, par contre choisir entre développer une application ou un site mobile semble moins évident. Cette décision peut devenir plus complexe avec l’arrivée d’un nouveau format : le lancement des pages AMP. La question est donc la suivante : quel format dois-je proposer pour mon site mobile ?
site mobile AMP PWAMP PWA

Sites mobiles/ responsive design

Avantages : Le responsive est une solution fréquemment adoptée car on adapte le design et la structure de son site sur l’ensemble des écrans. On conserve la logique de proposer le même contenu entre un site desktop et un site mobile.
Inconvénients : Ce format reprend une grande partie du développement du site desktop. Par conséquent les performances techniques sont faibles (. Pourtant le délai de chargement d’une page est l’un des enjeux du site mobile car il s’agit de la première cause de départ d’un site : un temps de chargement trop long (> 3 secondes). L’utilisateur veut du rapide, de l’instantanée.

Pages AMP (Accelerated mobile pages – Google)

Avantages : l’AMP (Google) est un code open source (basé sur du HTML) ayant pour objectif de charger en moins d’une seconde une page. Le contenu est disponible quasi immédiatement grâce au pre-rendering ; c’est LA plus-value de l’AMP.
De plus, Google propose gratuitement de mettre les pages AMP en cache via son  « Google AMP cache ».
Inconvénients : Si vous proposez votre site sous une version site desktop, AMP et FBIA (Facebook), on multiplie la gestion et la maintenance des templates.

Application

Avantages : Format appréciée par les grandes marques,  l’application est accessible via un raccourci d’écran d’accueil. On peut également envoyer des notifications en push pour communiquer et/ou relancer l’utilisateur.
Inconvénients : Outre les coûts de développement et de maintenance, l’application nécessite d’être déboguée et  mise à jour régulièrement. Par ailleurs, ce support nécessite un coût d’acquisition très élevé pour une utilisation peu fréquente ; seulement 26% des applications installées sur un smartphone sont utilisées quotidiennement. Il est également compliqué d’être visible dans les stores parmi la multitude d’applications.

Progressive Web App (PWA)

Avantages : Mix entre deux formats, la Progressive Web App est un site mobile ayant les caractéristiques principales de l’application : accessible en raccourci d’écran, possibilité de notification en push…
Inconvénients : Même si l’on reprend les codes d’un site mobile, la Web App nécessite un développement spécifique.
Parmi tous ces choix, l’AMP semble être une solution efficace et peu coûteuse à mettre en place sauf que sur l’AMP (Accelerated Mobiles Pages) on recense de nombreuses rumeurs et idées préconçues. Qu’en est-il réellement de l’AMP ?

L’AMP, LA solution pour un site mobile performant ?

L’AMP est suivi et décrypté par tous les experts SEO et ce depuis son lancement. Il faut l’avouer les débuts de l’AMP ont remué la toile mais à qui se destine l’AMP ? Peut-on l’appliquer sur un site E-commerce ? Retour sur les idées préconçues !

L’AMP c’est pour les sites de contenu ? Vrai.

L’accelerated mobile page s’avère très efficace pour les sites éditoriaux. Par exemple : The Guardian* génére 60% de son trafic mobile via l’AMP et l’engagement est au rendez-vous. Les contenus disponible au format AMP génèrent plus de revisite ; + 12 points de revisite sous 7 jours pour Washington post.
On peut donc dire que l’AMP améliore le temps de chargement et la visibilité des informations. A ce jour, le format est surtout utilisé par les sites medias où l’on comptabilise plusieurs millions de visiteurs**. Ce phénomène va continuer son expansion dans la mesure où Google valorise les pages AMP vs les applications mobiles.
amp résultat

AMP SEO

L’AMP n’est pas destinée au E-commerce ? Faux

L’enjeu majeur d’un site mobile en E-commerce est d’accroître le taux de conversion issus de ce canal. En moyenne, 47% des internautes vont sur les sites en version mobile mais ils ne sont que 21% à finaliser leur achat***.
Pour faciliter la navigation sur mobile, vous pouvez créer des fiches produits au format AMP.  Et c’est l’une des évolutions clés, désormais on peut créer des interactions complexes avec des fiches produits AMP :

  1. Créer des boutons (AMP-Binf) et des tris facettés (AMP-Form). Vous pouvez donc proposer vos produits dans des tailles et/ou couleurs différentes.
  2. Utiliser le moteur de recherche interne
  3. Sélectionner des produits
  4. Avoir un menu burger rétractable
  5. Proposer des pages à onglets
  6. Afficher les notes produits et les commentaires

En résumé, on retrouve toutes les fonctionnalités clés d’une fiche de produit dans une page HTML qui se charge en moins d’une seconde. Quelques E-commerçant s ont franchi le pas… On retrouvera E-bay qui a passé tout son catalogue produit en AMP ou encore SnapDeal.
Les premières retombées**** sont positives dans la mesure où on constate une hausse de 52% des commandes journalières sur mobile et +59% de trafic quotidien.
De plus, le tracking est possible sur de l’A/B testing, suivi de clics ou encore nombre de partage sur les réseaux sociaux. En bref, en 1 an l’AMP a pris en compte les retours d’expériences des pionners pour améliorer le format.
Un seul point bloquant existe encore… L’AMP ne fonctionne pas encore avec les modules de paiements et les zones nécessitant une identification (le panier et plus largement le tunnel de conversion).  Par conséquent, comment peut-on finaliser sa commande avec l’AMP ? Ajouter l’iframe d’un panier ou renvoyer l’internaute sur le tunnel de conversion sur un format mobile ? Il existe une nouvelle solution : PWAMP.

#PWAMP : l’AMP pour l’E-commerce

Ces deux formats sont faits pour travailler ensemble dans la mesure où ils se complètent parfaitement. Par la rapidité de chargement de l’AMP et l’affichage 100% mobile friendly du tunnel de conversion du PWA, on aboutit à un site mobile rapide sur lequel on peut finaliser sa commande en quelques clics (soit le PWAMP). Ce concept peut paraître surprenant !
Comment l’obtient-on ? Tout simplement en récupérant l’ID client qui est transmis par l’AMP et que l’on réutilise sur une version PWA du tunnel de conversion. Le PWA permet de collecter des informations non accessibles par une application mobile. En proposant une version de son site en PWAMP, on dispose des bénéfices des deux formats : temps de chargement de l’amp et comportement du PWA (notification par push, accessible en mode offline, icône sur l’écran d’accueil…).
Le PWAMP permet de proposer une version rapide avec des coûts de développement et marketing optimisés.
Des marques ont déjà pris le pari du fonctionnement du PWA*****, notamment Lancôme qui obtient des résultats prometteurs :

  • Baisse de 84% du temps de chargement
  • Augmentation de 17% du taux de conversion
  • Diminution du taux de rebond de 15%
  • 18% de taux d’ouverture des notifications
  • Accroissement de 12% du taux de conversion sur la récupération de panier via les notifications push.

L’AMP ne cesse de faire parler de lui et cela va continuer sur les mois à venir. Les freins majeurs ont été corrigés et l’on peut désormais proposer aux visiteurs des pages de contenus qui se chargent instantanément. Même si l’AMP a été le format plébiscité par les sites de medias, il est désormais envisageable de proposer ses produits en AMP.
A l’heure du mobile first, le PWAMP peut être une solution efficace pour proposer un site mobile-friendly performant.
 
Sources :
* AMP Conf Google – 08/03/2017
**ACPM / Mind –Avril 2017
***State of the Online Retail Performance report by Akamai
**** AMP Conférence Google 07/03/2017
***** developers.google.com/web/showcase/2017/lancome