Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#PWAMP
AMP & PWA : nouveaux paradigmes
du search mobile
@largow // #smxparis // AMP + PWA = #PWAMP
Le mobile aujourd’hui c’est :
Site mobile
ou
responsive
App iOS
et/ou
Android
P...
@largow // #smxparis // AMP + PWA = #PWAMP
Le responsive est parfois un cauchemar pour la webperf
@largow // #smxparis // AMP + PWA = #PWAMP
AMP et FBIA, ce sont des templates en plus à maintenir
CMS
HTML
AMP
FBIA
@largow // #smxparis // AMP + PWA = #PWAMP
Les applis bugguent en masse et les stores sont remplis
@largow // #smxparis // AMP + PWA = #PWAMP
La montée de l’adblocking pousse à aller vers des zones « free adblockers »
@largow // #smxparis // AMP + PWA = #PWAMP
#Facepalm
@largow // #smxparis // AMP + PWA = #PWAMP
Titre
Texte
Et si #PWAMP était une
solution ?
@largow // #smxparis // AMP + PWA = #PWAMP
Titre
Texte
#PWAMP = AMP + PWA
@largow // #smxparis // AMP + PWA = #PWAMP
Titre
Texte
AMP, c’est pour les sites de
contenu
VRAI
@largow // #smxparis // AMP + PWA = #PWAMP
AMP pour les contenus, c’est efficace
The Guardian :
60% du trafic total site m...
@largow // #smxparis // AMP + PWA = #PWAMP
AMP pour les contenus, ça génère plus de revisite
Washington Post :
+ 12 points...
@largow // #smxparis // AMP + PWA = #PWAMP
Replay des confs largow en vidéo
@largow // #smxparis // AMP + PWA = #PWAMP
Une audience déjà en millions de visites sur les sites média leader
Source : AC...
@largow // #smxparis // AMP + PWA = #PWAMP
Visibilité Search mobile : AMP roi
Sites non AMP : Le Monde, Le Figaro, BFM TV
@largow // #smxparis // AMP + PWA = #PWAMP
Google enterre l’App Indexing
« Users searching from mobile devices will
be dir...
@largow // #smxparis // AMP + PWA = #PWAMP
Titre
Texte
Mon site mobile est ultra rapide,
je n’ai pas besoin d’AMP
FAUX
@largow // #smxparis // AMP + PWA = #PWAMP
Le pré rendering, cœur de l’intérêt d’AMP
Source : Google
@largow // #smxparis // AMP + PWA = #PWAMP
@largow // #smxparis // AMP + PWA = #PWAMP
@largow // #smxparis // AMP + PWA = #PWAMP
Titre
Texte
AMP, ce n’est pas pour
le e-commerce
FAUX
@largow // #smxparis // AMP + PWA = #PWAMP
Le problème du e-commerce mobile
Source : State of the Online Retail Performanc...
@largow // #smxparis // AMP + PWA = #PWAMP
On peut créer avec AMP des fiches produit rapides avec de l’interaction sans re...
@largow // #smxparis // AMP + PWA = #PWAMP
AMP c’est aussi pour le e-commerce
 Interactions complexes pour fiches produit...
@largow // #smxparis // AMP + PWA = #PWAMP
AMP c’est aussi pour le e-commerce
 Moteur de recherche interne
 Selections p...
@largow // #smxparis // AMP + PWA = #PWAMP
Ebay vient de passer tout son catalogue sous AMP
Source : Google I/O 2017
@largow // #smxparis // AMP + PWA = #PWAMP
Les 1ers retours e-commerce sont encourageants
Snapdeal (US):
+ 52% de commande...
@largow // #smxparis // AMP + PWA = #PWAMP
En terme d’analytics et de suivi de conversion, les choses progressent
 Outil ...
@largow // #smxparis // AMP + PWA = #PWAMP
Pour tout savoir sur AMP
@largow // #smxparis // AMP + PWA = #PWAMP
Titre
Texte
Mais… au moment du panier ça coince.
AMP ne fonctionne que pour les...
@largow // #smxparis // AMP + PWA = #PWAMP
AMP ne supporte pas le paiement et les zones logguées mais …
AMP gère quand mêm...
@largow // #smxparis // AMP + PWA = #PWAMP
Et PWA est là pour ça
#PWAMP
AMP et PWA sont faits pour travailler ensemble
AMP...
@largow // #smxparis // AMP + PWA = #PWAMP
Titre
Texte
Les apps sont la principale
source de croissance sur mobile
FAUX
@largow // #smxparis // AMP + PWA = #PWAMP
Les applis mobiles ce n’est pas forcément une expérience garantie
@largow // #smxparis // AMP + PWA = #PWAMP
La guerre pour l’usage des apps fait rage
@largow // #smxparis // AMP + PWA = #PWAMP
Les couts d’acquisition sont toujours plus élevés
Source : Chartboost – Mai 201...
@largow // #smxparis // AMP + PWA = #PWAMP
Les bénéfices d’une app par rapport à un site mobile
Push notification Mode off...
@largow // #smxparis // AMP + PWA = #PWAMP
Vous avez tout cela dans PWA…
… avec des couts de développement et de marketing...
@largow // #smxparis // AMP + PWA = #PWAMP
S’abonner à la newsletter largow
@largow // #smxparis // AMP + PWA = #PWAMP
La PWA de Air Berlin
Boarding pass offline Check-in Infos sur le vol
@largow // #smxparis // AMP + PWA = #PWAMP
Retour d’expérience sur PWA : le cas Lancôme
Source : https://developers.google...
@largow // #smxparis // AMP + PWA = #PWAMP
Vous aimez cette présentation ?
Suivre @largow sur Twitter
Twitter ces slides
@largow // #smxparis // AMP + PWA = #PWAMP
Ressources
 En savoir plus sur PWA : https://www.youtube.com/watch?v=xF6mjl-wO...
@largow // #smxparis // AMP + PWA = #PWAMP
Virginie Clève
Digital Strategist
virginie@largow.com
www.largow.com
#GrowthMar...
Upcoming SlideShare
Loading in …5
×

Google AMP & Progressive web apps : nouveaux paradigmes du search mobile

2,333 views

Published on

Qu’est ce que #PWAMP ? C’est la contraction de "AMP" (Google Amplified Mobile pages) et "PWA" (Progressive web Apps". Avec la montée du mobile, une grande partie des sites sont passés au Responsive Web Design ces dernières années.
Mais est-ce la bonne solution pour l’avenir ? Pas sûr…

Découvrez comment le couple AMP et PWA pourraient tuer les apps et changer complètement la manière dont on envisage le search et la distribution de contenus sur mobile.

Published in: Internet

Google AMP & Progressive web apps : nouveaux paradigmes du search mobile

  1. 1. #PWAMP AMP & PWA : nouveaux paradigmes du search mobile
  2. 2. @largow // #smxparis // AMP + PWA = #PWAMP Le mobile aujourd’hui c’est : Site mobile ou responsive App iOS et/ou Android Pages AMP
  3. 3. @largow // #smxparis // AMP + PWA = #PWAMP Le responsive est parfois un cauchemar pour la webperf
  4. 4. @largow // #smxparis // AMP + PWA = #PWAMP AMP et FBIA, ce sont des templates en plus à maintenir CMS HTML AMP FBIA
  5. 5. @largow // #smxparis // AMP + PWA = #PWAMP Les applis bugguent en masse et les stores sont remplis
  6. 6. @largow // #smxparis // AMP + PWA = #PWAMP La montée de l’adblocking pousse à aller vers des zones « free adblockers »
  7. 7. @largow // #smxparis // AMP + PWA = #PWAMP #Facepalm
  8. 8. @largow // #smxparis // AMP + PWA = #PWAMP Titre Texte Et si #PWAMP était une solution ?
  9. 9. @largow // #smxparis // AMP + PWA = #PWAMP Titre Texte #PWAMP = AMP + PWA
  10. 10. @largow // #smxparis // AMP + PWA = #PWAMP Titre Texte AMP, c’est pour les sites de contenu VRAI
  11. 11. @largow // #smxparis // AMP + PWA = #PWAMP AMP pour les contenus, c’est efficace The Guardian : 60% du trafic total site mobile en provenance d’AMP #CQFD Source : AMP Conf Google - 08/03/2017
  12. 12. @largow // #smxparis // AMP + PWA = #PWAMP AMP pour les contenus, ça génère plus de revisite Washington Post : + 12 points de taux de revisite sous 7 jours
  13. 13. @largow // #smxparis // AMP + PWA = #PWAMP Replay des confs largow en vidéo
  14. 14. @largow // #smxparis // AMP + PWA = #PWAMP Une audience déjà en millions de visites sur les sites média leader Source : ACPM / Mind –Avril 2017
  15. 15. @largow // #smxparis // AMP + PWA = #PWAMP Visibilité Search mobile : AMP roi Sites non AMP : Le Monde, Le Figaro, BFM TV
  16. 16. @largow // #smxparis // AMP + PWA = #PWAMP Google enterre l’App Indexing « Users searching from mobile devices will be directed to the relevant AMP pages even if an equivalent app page exists. » Google
  17. 17. @largow // #smxparis // AMP + PWA = #PWAMP Titre Texte Mon site mobile est ultra rapide, je n’ai pas besoin d’AMP FAUX
  18. 18. @largow // #smxparis // AMP + PWA = #PWAMP Le pré rendering, cœur de l’intérêt d’AMP Source : Google
  19. 19. @largow // #smxparis // AMP + PWA = #PWAMP
  20. 20. @largow // #smxparis // AMP + PWA = #PWAMP
  21. 21. @largow // #smxparis // AMP + PWA = #PWAMP Titre Texte AMP, ce n’est pas pour le e-commerce FAUX
  22. 22. @largow // #smxparis // AMP + PWA = #PWAMP Le problème du e-commerce mobile Source : State of the Online Retail Performance report by Akamai
  23. 23. @largow // #smxparis // AMP + PWA = #PWAMP On peut créer avec AMP des fiches produit rapides avec de l’interaction sans rechargement Source : Google I/O 2017
  24. 24. @largow // #smxparis // AMP + PWA = #PWAMP AMP c’est aussi pour le e-commerce  Interactions complexes pour fiches produit avec le composant AMP-Bind  Gestion des formulaires avec AMP-Form, permettant la mise en place de tris facettés Gestion des formulaires
  25. 25. @largow // #smxparis // AMP + PWA = #PWAMP AMP c’est aussi pour le e-commerce  Moteur de recherche interne  Selections produit  Menu « burger » retractable  Rating à étoiles  Commentaires  Pages à onglets
  26. 26. @largow // #smxparis // AMP + PWA = #PWAMP Ebay vient de passer tout son catalogue sous AMP Source : Google I/O 2017
  27. 27. @largow // #smxparis // AMP + PWA = #PWAMP Les 1ers retours e-commerce sont encourageants Snapdeal (US): + 52% de commandes journalières sur mobile grâce à AMP + 59% de trafic quotidien sur mobile grâce à AMP Source : AMP Conf Google 07/03/2017
  28. 28. @largow // #smxparis // AMP + PWA = #PWAMP En terme d’analytics et de suivi de conversion, les choses progressent  Outil d’A/B testing AMP-experiment  Tracking de clics via amp-analytics  Tracking des partages sociaux
  29. 29. @largow // #smxparis // AMP + PWA = #PWAMP Pour tout savoir sur AMP
  30. 30. @largow // #smxparis // AMP + PWA = #PWAMP Titre Texte Mais… au moment du panier ça coince. AMP ne fonctionne que pour les pages de contenu
  31. 31. @largow // #smxparis // AMP + PWA = #PWAMP AMP ne supporte pas le paiement et les zones logguées mais … AMP gère quand même le client ID
  32. 32. @largow // #smxparis // AMP + PWA = #PWAMP Et PWA est là pour ça #PWAMP AMP et PWA sont faits pour travailler ensemble AMP passe la main à PWA pour tout ce qu’il ne sait pas gérer
  33. 33. @largow // #smxparis // AMP + PWA = #PWAMP Titre Texte Les apps sont la principale source de croissance sur mobile FAUX
  34. 34. @largow // #smxparis // AMP + PWA = #PWAMP Les applis mobiles ce n’est pas forcément une expérience garantie
  35. 35. @largow // #smxparis // AMP + PWA = #PWAMP La guerre pour l’usage des apps fait rage
  36. 36. @largow // #smxparis // AMP + PWA = #PWAMP Les couts d’acquisition sont toujours plus élevés Source : Chartboost – Mai 2017 - iOS
  37. 37. @largow // #smxparis // AMP + PWA = #PWAMP Les bénéfices d’une app par rapport à un site mobile Push notification Mode offline Icône springboard Appareil photo, GPS,…
  38. 38. @largow // #smxparis // AMP + PWA = #PWAMP Vous avez tout cela dans PWA… … avec des couts de développement et de marketing plus bas, du SEO, la fiabilité du web et pas d’espace occupé dans le téléphone du mobinaute
  39. 39. @largow // #smxparis // AMP + PWA = #PWAMP S’abonner à la newsletter largow
  40. 40. @largow // #smxparis // AMP + PWA = #PWAMP La PWA de Air Berlin Boarding pass offline Check-in Infos sur le vol
  41. 41. @largow // #smxparis // AMP + PWA = #PWAMP Retour d’expérience sur PWA : le cas Lancôme Source : https://developers.google.com/web/showcase/2017/lancome  Diminution de 84% du temps de chargement  Augmentation de 17% du taux de conversion  Baisse de 15% du taux de rebond  Augmentation de 51% des sessions mobiles  18% de taux d’ouverture des notifications  8% des consommateurs qui interagissent avec une notification push font un achat  Augmentation de 12% des taux de conversion sur les paniers récupérés via Push notifications
  42. 42. @largow // #smxparis // AMP + PWA = #PWAMP Vous aimez cette présentation ? Suivre @largow sur Twitter Twitter ces slides
  43. 43. @largow // #smxparis // AMP + PWA = #PWAMP Ressources  En savoir plus sur PWA : https://www.youtube.com/watch?v=xF6mjl-wOqU  Guide d’implémentation PWAMP : https://www.ampproject.org/docs/guides/pwa-amp  Composants et démos : https://ampbyexample.com/
  44. 44. @largow // #smxparis // AMP + PWA = #PWAMP Virginie Clève Digital Strategist virginie@largow.com www.largow.com #GrowthMarketing #SocialMedia #Product #SEO #Mobile #ASO #Medias

×