Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

SEO Dawa Day Progressive Web App 23 sept 2017

1 872 vues

Publié le

Progressive Web Apps (PWA)

A l'heure où le téléchargement d'applications est en baisse constante, comment émerger sur les stores d'applications ?
Découvrez également l'avenir des app stores avec l'avènement des Progressive Web Apps (PWA) :

Que sont ces apps qui ressemblent aux apps classiques et qui peuvent prendre la forme d'apps natives ?
Où et comment fonctionnent-elles ? hors-ligne/devices/service workers/pas de pub
Comment s'en servir pour fidéliser sur son site ? Cas concrets
Que projette Google et autres gros acteurs du web sur le sujet ? AMP + PWA

Publié dans : Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

SEO Dawa Day Progressive Web App 23 sept 2017

  1. 1. Découverte des Progressive Web Apps (PWA) : quel avenir pour les app stores ? Audrey SCHOONWATER
  2. 2. Qui suis-je ? 2 Qui ? Quoi ? Quand ? Démo Comment ? Audience Audrey SCHOONWATER • @witamine • SEO lover since 2003 TOULOUSE • Développeur / admin système • Responsable technique à Toulouse pendant 8 ans. PARIS • Consulting, formation SEO • Responsable Veille / Méthodo & Innovation • Membre fondateur SEOCAMP • L’association des référenceurs est née d’une discussion entre David Degrelle et Alexandre Villeneuve après l’émission de webradio « Witamine » sur l’échec des associations Search • De retour au CA du SEOCAMP depuis peu
  3. 3. Quoi ? 3 Qui ? Quoi ? Quand ? Démo Comment ? Audience Qui a entendu parler des Progressive Web Apps (PWA) ?
  4. 4. Quoi : Portée web mobile 5 Portée des sites mobiles • 3 fois celle des apps • se développe plus vite Utilisateurs • trouvent la saisie d’une URL fastidieuse • préfèrent ouvrir une app • puis ne reviennent pas plus tard… 4.0 11.4 Visiteurs uniques par mois (M) App web vs. Web mobile Top 1 000 Mobile webApps Source : Google I/O 2017
  5. 5. Quoi : Engagement mobile 6 Temps passé sur l’app • Plus élevé que sur le web (contenu identique) Utilisateurs vs. apps • reçoivent des notifications push • les ouvrent via l’icône sur l’écran d’accueil • s’engagent davantage… 188,6 9.3 Nombre de minutes moyen par visiteur App web vs. Web mobile Top 1 000 Mobile webApps Source : Google I/O 2017
  6. 6. Quoi : Taux d’abandon des app natives 7 Le pourcentage de personnes qui arrêtent d’utiliser des applications continue de croître. Courbe de rétention moyenne pour les applications Android
  7. 7. Quoi : des apps aux PWA 8 Comment fournir une expérience plus engageante aux utilisateurs qui arrivent sur notre site via mobile ? Faut-il inciter à installer l’application native • NON Faut-il proposer une expérience d’app native sur le web ? • OUI !
  8. 8. Quoi : des apps aux PWA 9 Comment engager davantage ? • Notification push (web push) • Emplacement sur l’écran d’accueil • Fiabilité des technologies spécifiques (service workers) « A Progressive Web App uses modern web capabilities to deliver an app-like user experience. » Google Developers Les applications web qui tirent partie de ces technologies s’appellent des Progressive Web Apps
  9. 9. Quoi : des apps aux PWA 10 Site web qui peut être transformé en application traditionnelle ou application mobile (native) : URL Mise en favoris  Notification via le navigateur  Icône sur l’écran d’accueil  Site offline  Apparence d’une app Version HTML Fichier CSS et JS URL Google Bot identique identique identique Googlebot-mobile Côté technique
  10. 10. Quoi : Firefox 11 • PWA Pokedex sur Firefox pour Android (Beta)
  11. 11. Quoi : Opéra 12 • PWA Pokedex sur Opéra pour Android
  12. 12. Quoi : Avantages des PWA 13 Qualificatifs pour les PWA : • Progressive • Découverte • Liens • Sensible • App-like • Connectivité indépendante • Re-engageable • Installable • Actualisée • Sûre Mais aussi : • Fonctionnent partout sur le web, installées ou non • Réduisent le coût de maintenance d’une app • Pas limitées aux règles d’un store (modèle éco) PWA
  13. 13. Quoi : Inconvénients des PWA 14 Inconvénients des PWA • nouvelle technologie donc moins d’exemples à suivre, • pas encore disponibles partout Bonne nouvelle : ce n’est pas un frein ! • Amélioration progressive : les PWA bénéficient à toute personne qui visite notre site indépendamment de l’appareil qu’on choisit d’utiliser.
  14. 14. Démo : Ajout à l’écran d’accueil 15 Demo de 2015 sur le blog de Alex Russell, un développeur web sous ChromeQui ? Quoi ? Quand ? Démo Service Workers AMP Comment ?
  15. 15. Démo : AliExpress (mai 2016) 16 Motto de AliExpress : “Smarter shopping, better living” Objectif : créer une expérience mobile de qualité alors que le m- commerce augmente 3 fois plus vite que le e-commerce Résultats, sur tous navigateurs : • Hausse du taux de conversion de 104% pour les nouveaux utilisateurs • 82% d’augmentation du taux de conversion iOS • 2X plus de pages visitées par session par utilisateur • Hausse de 74% du temps passé par session
  16. 16. Démo : L’Equipe 17 Le site de l’Equipe est devenu une progressive web apps : une 1ère pour un site media français ! • 2,6 millions de visiteurs uniques quotidien • 1,6 millions uniquement depuis un mobile (en progression). Aux États-Unis, plusieurs médias ont déjà adopté la PWA.  Forbes,  Financial Times,  Washington Post.
  17. 17. Démo : L’Equipe 18 Le design de l’app est repris ainsi que certaines des fonctionnalités comme : 1/ le mode hors ligne, 2/ la création d’une icône sur l’écran d’accueil et 3/ un temps de chargement très rapide. Site mobile PWA App
  18. 18. Démo : L’Equipe 19 Notification de la demande d’ajout en écran d’accueil Coûts • Budget de création de PWA plus important qu’une refonte de site mobile. • Investissement qui sera rapidement amorti. • Des mises à jour à venir sur la même base que l’app. Gains : • Taux d’ouverture, d’engagement, de clics et de conversion en hausse • Diminution du taux de rebond. Etude de cas L’Equipe
  19. 19. Démo : L’Equipe 20 Les médias avec PWA constatent des hausses du nombre de pages consultées et du temps passé sur le site. Ils disposent également d’une augmentation du nombre de visites grâce à la diminution du temps de chargement des pages.
  20. 20. Service Workers 21 Qui ? Quoi ? Quand ? Démo Service Workers AMP Comment ? Que sont les Service Workers ? • Scripts exécutés par les navigateurs en tâche de fond, séparément de la page web, sans interaction utilisateur. • Permettent aux PWA de se charger instantanément quel que soit l'état du réseau : fiabilité et performance.
  21. 21. Service Workers 22 Proxy côté client, écrit en JavaScript Cache Service Workers PWA + Serveur web Sites traditionnels Serveur web Aller plus loin : Jake Archibald, Service Workers designer @ Google I/O 2016 • Les Services Workers sont bien implémentés sur Chrome et Firefox mais non pris en charge par IE ou Safari. • Cela limite leur utilisation en production.
  22. 22. Service Workers 23 Demo sur le site de Marmelab par Alexis Janvier (mars 2017) Fondamentaux pour se lancer dans l’utilisation des Service Workers: • Compatibilité selon navigateur • Cycle de vie dans un processus indépendant • Fonctionnement asynchrone pour ne pas bloquer l’exécution de l’application • HTTPS obligatoire Aller plus loin • Bien réfléchir l'interface utilisateur • Possibilité de stratégies de cache complexes
  23. 23. AMP (Accelerated Mobile Pages) 24 Que fait AMP ? C’est une méthode de création de pages Web pour du contenu statique permettant un rendu rapide.  AMP HTML : restrictions pour une performance accrue et des extensions pour du contenu enrichi plus élaboré  AMP JS : bibliothèque JavaScript pour un rendu rapide des pages AMP HTML.  Système de cache : comme Google AMP Cache (en option) qui permet de fournir les pages AMP HTML. Source : Wikipédia Qui ? Quoi ? Quand ? Démo Service Workers AMP Comment ?
  24. 24. AMP et PWA 25 Cas du Washington Post • 1 000 articles AMP par jour • Temps de chargement moyen : 400 ms soit 88% d’amélioration suite à la mise en œuvre d’AMP • Grâce à AMP, le Washington Post a obtenu 23% de visiteurs supplémentaires qui reviennent sur mobile. Mixer AMP + PWA Leur PWA s’installe en arrière-plan pendant que les visiteurs consultent les pages AMP dans les SERP. • Augmentation de 12% de visites en provenance des SERP grâce à AMP. • Passage d’articles de 8 secondes à se charger en 2013 à 80 millisecondes dans la PWA en 2016.
  25. 25. Quand ? 26 Qui ? Quoi ? Quand ? Démo Service Workers AMP Comment ? Le format PWA est adapté aux médias pour FIDELISER • Engager : en diminuant le taux de rebond et en augmentant le taux de conversion Mais les PWA peinent à arriver en France : • Les médias préfèrent AMP (Accelerated Mobile Pages) • Visibilité croissante dans le carrousel Google Actualités • AMP déjà coûteux et chronophage • PWA + AMP = améliorer l’UX en réduisant le temps de chargement mobile.
  26. 26. Démo : Lighthouse 27 Qui ? Quoi ? Quand ? Démo Service Workers AMP Comment ? Lighthouse  Outil automatique  Open-source d'audit de performance  Permet d’améliorer la qualité d’une PWA  Restreint une partie des tests manuels précédemment requis  Utilisable dans les systèmes d’intégration continus pour observer les régressions. Et aussi Preact, une alternative légère (3K) à la bibliothèque React JavaScript UI
  27. 27. Démo : checklist basique 28 A tester via Lighthouse  Site en HTTPS  Responsive sur tablettes et mobiles  L’URL de départ charge Hors-Ligne  Metadata pour Ajouter à l’écran d’accueil  1er chargement rapide même en 3G  Compatibilité multinavigateurs du site  Transitions de page ne donnent pas l’impression d’être bloquées sur le réseau  Chaque page possède une URL
  28. 28. Démo : checklist basique 29 Exemple d’extension Chrome Lighthouse lancé sur twitter.com
  29. 29. Démo : Twitter Vs. Lighthouse 30 Résultats :
  30. 30. Démo : Twitter Vs. Lighthouse 31
  31. 31. Démo : Twitter Vs. Lighthouse 32
  32. 32. Démo : Twitter Vs. Lighthouse 33
  33. 33. Démo : Twitter Vs. Lighthouse 34
  34. 34. Démo : checklist basique 35 Checklist manuelle (pas sur Lighthouse)  Contenu du site indexé par Google  Metadata Schema.org renseignées si pertinentes  Metadata sociales si pertinentes  URL canoniques si nécessaires  Les pages utilisent l’API History  Le contenu ne saute pas lors du chargement de la page  Appuyer sur le bouton Précédent depuis une page de détail conserve la position du scroll de la page précédente  Les zones de saisies ne sont pas recouvertes par le clavier virtuel  Le contenu est facilement partageable une fois l’app installée sur l’écran d’accueil depuis la version autonome comme en plein écran  Site responsive depuis différentes tailles d’appareils (mobile, tablette, ordinateur) … 1/2
  35. 35. Démo : checklist basique 36 ...2/2 Checklist manuelle (pas sur Lighthouse)  Vérifier que l’interstitiel d’installation de la PWA n’est pas chargé intempestivement  Le message d’ajout à l’écran d’accueil est intercepté  1er chargement très rapide même en 3G (<5s)  Le cache rend une expérience similaire en offline comme en online  Le site informe de façon appropriée que l’utilisateur est offline  Préciser clairement à quoi vont servir les notifications au moment de l’autorisation  Pas de messages agressifs invitant l’utilisateur à activer les notifications push  Le site redimensionne l’écran quand la demande d’autorisation est affichée  Les notifications push doivent être configurables pour l’utilisateur à un moment précis, de façon pertinente  Permettre d’activer et désactiver les notifications  Si le site dispose d’un espace utilisateur, la gestion de sa connexion est assurée par Credential Management API  Les utilisateurs peuvent payer facilement depuis UI native : Payment Request API
  36. 36. Futur 37 Quelles motivations derrière les Progressive Web Apps ? Les navigateurs ne feront pas la promotion des PWA simplement parce que ce sont les technologies les plus récentes et utiles. Il faut qu’elles représentent les meilleures pratiques pour développer des sites web et des applications. Il faut qu’il s’écoule cinq minutes ou plus entre les deux visites pour que la bannière d’installation PWA apparaisse. Ce critère changera quand les navigateurs comprendront mieux quand les gens installent des PWA. Se lancer • Support Google • « Hacker News readers as Progressive Web Apps » : exemples et ressources de PWA avec Angular, React et Vue.js. Limitations • Les notifications Push ne sont pas la panacée pour garantir la fidélité à une application (gare aux notifications de SPAM…) • La technologie n’est pas encore complètement aboutie mais les PWA ne sont pas un frein.
  37. 37. Merci ! Audrey SCHOONWATER • @witamine • @resoneo • @seocamp

×