Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Progressive Web Apps (PWAs): Why you want one & how to optimize them #ApplauseBCN

490 visualizaciones

Publicado el

Learn what are PWAs, all their benefits, pros and cons vs. native apps, how you can easily build and optimize one for growth.

Publicado en: Marketing
  • Sé el primero en comentar

Progressive Web Apps (PWAs): Why you want one & how to optimize them #ApplauseBCN

  1. 1. #pwaseo by @aleyda from #orainti at #applausebcn#pwaseo by @aleyda from #orainti at #applausebcn Why you want one & how to optimize them Progressive Web Apps
  2. 2. #pwaseo by @aleyda from #orainti at #applausebcn Mobile Apps are broken #pwaseo by @aleyda from #orainti at #applausebcn
  3. 3. #pwaseo by @aleyda from #orainti at #applausebcn They eat your mobile battery
  4. 4. #pwaseo by @aleyda from #orainti at #applausebcn Take a lot of phone space
  5. 5. #pwaseo by @aleyda from #orainti at #applausebcn Require constant updates
  6. 6. #pwaseo by @aleyda from #orainti at #applausebcn App Store search is broken
  7. 7. #pwaseo by @aleyda from #orainti at #applausebcn Provide a Fragmented and vertical specific app experience
  8. 8. #pwaseo by @aleyda from #orainti at #applausebcn Can be expensive to develop https://www.consagous.com/blog/how-much-does-it-cost-to-build-an-app/
  9. 9. #pwaseo by @aleyda from #orainti at #applausebcn Sorry! #pwaseo by @aleyda from #orainti at #applausebcn
  10. 10. #pwaseo by @aleyda from #orainti at #applausebcn And yet we end up installing a lot of apps Think With Google
  11. 11. #pwaseo by @aleyda from #orainti at #applausebcn Why do we keep using apps then?
  12. 12. #pwaseo by @aleyda from #orainti at #applausebcn It’s easier to access apps through the home screen
  13. 13. #pwaseo by @aleyda from #orainti at #applausebcn Apps can use additional phone features
  14. 14. #pwaseo by @aleyda from #orainti at #applausebcn Mobile Websites speed & usability is shitty https://developers.google.com/speed/pagespeed/insights/
  15. 15. #pwaseo by @aleyda from #orainti at #applausebcn You need internet connection to access Web content
  16. 16. #pwaseo by @aleyda from #orainti at #applausebcn Yeah. 
 The Mobile Web is broken too! #pwaseo by @aleyda from #orainti at #applausebcn
  17. 17. #pwaseo by @aleyda from #orainti at #applausebcn Sigh. #pwaseo by @aleyda from #orainti at #applausebcn
  18. 18. #pwaseo by @aleyda from #orainti at #applausebcn Because of this we’re also sometimes forced to download apps
  19. 19. #pwaseo by @aleyda from #orainti at #applausebcn Again and again. Sigh.
  20. 20. #pwaseo by @aleyda from #orainti at #applausebcn At the end, we only use 1/3 of the apps we install
  21. 21. #pwaseo by @aleyda from #orainti at #applausebcnhttps://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report Although we spent most of our mobile time in them
  22. 22. #pwaseo by @aleyda from #orainti at #applausebcn There’s an obvious gap between 
 the mobile Web vs. apps https://www.slideshare.net/greenido/from-amp-to-pwa
  23. 23. #pwaseo by @aleyda from #orainti at #applausebcn The App vs. Mobile Web status is broken #pwaseo by @aleyda from #orainti at #applausebcn
  24. 24. #pwaseo by @aleyda from #orainti at #applausebcn But their destruction it’s not really a reasonable solution… #pwaseo by @aleyda from #orainti at #applausebcn
  25. 25. #pwaseo by @aleyda from #orainti at #applausebcn It’s time to welcome PWAs! A web app that provides a native app experience to Web users https://developers.google.com/web/progressive-web-apps/
  26. 26. #pwaseo by @aleyda from #orainti at #applausebcnhttps://www.appypie.com/progressive-web-apps-the-future-of-mobile-web-app-development PWAs provide the benefits of an app without abandoning the Web
  27. 27. #pwaseo by @aleyda from #orainti at #applausebcn While providing an improved 
 Web user experience https://developers.google.com/web/progressive-web-apps/
  28. 28. #pwaseo by @aleyda from #orainti at #applausebcn PWAs close the gap between 
 Websites and apps https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps
  29. 29. #pwaseo by @aleyda from #orainti at #applausebcn This is possible thanks to 
 the use of 4 technologies https://dzone.com/articles/pwa-technology
  30. 30. #pwaseo by @aleyda from #orainti at #applausebcn All modern browsers now support PWAs https://twitter.com/firt/status/1105840379117662209
  31. 31. #pwaseo by @aleyda from #orainti at #applausebcnhttps://developers.google.com/web/progressive-web-apps/desktop Not only on mobile but also on desktop
  32. 32. #pwaseo by @aleyda from #orainti at #applausebcn Which is why many top mobile focused services are releasing PWAs https://appsco.pe/
  33. 33. #pwaseo by @aleyda from #orainti at #applausebcn Uber
  34. 34. #pwaseo by @aleyda from #orainti at #applausebcn Twitter
  35. 35. #pwaseo by @aleyda from #orainti at #applausebcn 9GAG
  36. 36. #pwaseo by @aleyda from #orainti at #applausebcn Add them to your home screen now
  37. 37. #pwaseo by @aleyda from #orainti at #applausebcn “The Web is going to be 
 the new app store”
  38. 38. #pwaseo by @aleyda from #orainti at #applausebcn You can also feature PWAs in App Stores too, although with a bit of extra work https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b
  39. 39. #pwaseo by @aleyda from #orainti at #applausebcnhttps://developers.google.com/web/updates/2019/02/using-twa Trusted Web Activities highly facilitate this for the Play Store now
  40. 40. #pwaseo by @aleyda from #orainti at #applausebcnhttps://twitter.com/firt/status/1127971459434000385 Enjoying the same native apps benefits
  41. 41. #pwaseo by @aleyda from #orainti at #applausebcn “PWAs are a natural evolution of how we distribute and consume software” https://www.awwwards.com/PWA-ebook/
  42. 42. #pwaseo by @aleyda from #orainti at #applausebcn … and at some point they’ll be also the future of native apps! https://www.smashingmagazine.com/2018/12/pwa-native-mobile-apps/
  43. 43. #pwaseo by @aleyda from #orainti at #applausebcn There’s this feeling going on… #pwaseo by @aleyda from #orainti at #applausebcn PWAs Native Apps Brands
  44. 44. #pwaseo by @aleyda from #orainti at #applausebcn However, there are still limitations https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
  45. 45. #pwaseo by @aleyda from #orainti at #applausebcn The evolution will also be progressive
  46. 46. #pwaseo by @aleyda from #orainti at #applausebcn How can you create a PWA then? #pwaseo by @aleyda from #orainti at #applausebcn
  47. 47. #pwaseo by @aleyda from #orainti at #applausebcn You’ll see is not that hard… #pwaseo by @aleyda from #orainti at #applausebcn
  48. 48. #pwaseo by @aleyda from #orainti at #applausebcn In the case of existing Websites, 
 there are 3 main steps to follow Set up a Service Worker, a JS that runs in the background, defining what data to store or update and notifications 3 Create a web manifest, a JSON file that informs about the PWA to be installable 2 Use a responsive website (that can be AMP based too) that will be your application 1 https://www.awwwards.com/PWA-ebook/
  49. 49. #pwaseo by @aleyda from #orainti at #applausebcn Check out this step by step guide to migrate your site to a PWA https://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/
  50. 50. #pwaseo by @aleyda from #orainti at #applausebcn As well as to develop a PWA from scratch https://codelabs.developers.google.com/codelabs/workbox-indexeddb/
  51. 51. #pwaseo by @aleyda from #orainti at #applausebcn Or build a Progressive Web AMP site https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/
  52. 52. #pwaseo by @aleyda from #orainti at #applausebcnhttps://codelabs.developers.google.com/codelabs/amp-pwa-workbox/ There’s a full training provided 
 by Google Developers https://codelabs.developers.google.com/dev-pwa-training/
  53. 53. #pwaseo by @aleyda from #orainti at #applausebcn And video tutorials in the Google’s Chrome Developers YouTube Channel https://www.youtube.com/playlist?list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X87Hh
  54. 54. #pwaseo by @aleyda from #orainti at #applausebcn You can also use the “ready to customize and use” PWA Builder files https://www.pwabuilder.com/publish
  55. 55. #pwaseo by @aleyda from #orainti at #applausebcn Check “How PWAMP Works” which I created following the Codelabs guide for AMP based PWAs https://www.howpwampworks.com/
  56. 56. #pwaseo by @aleyda from #orainti at #applausebcn You can also enable PWA features to your Wordpress sites with Plugins https://superpwa.com/
  57. 57. #pwaseo by @aleyda from #orainti at #applausebcn Which is the one I’ve used with “Why my Web Traffic Dropped” https://www.whymywebtrafficdropped.com/
  58. 58. #pwaseo by @aleyda from #orainti at #applausebcn Magento now also supports AMP with its PWA Studio https://magento.com/products/magento-commerce/pwa
  59. 59. #pwaseo by @aleyda from #orainti at #applausebcn How can you validate your PWAs? #pwaseo by @aleyda from #orainti at #applausebcn
  60. 60. #pwaseo by @aleyda from #orainti at #applausebcn PWAs features should follow best practices specified in the PWA checklist https://developers.google.com/web/progressive-web-apps/checklist
  61. 61. #pwaseo by @aleyda from #orainti at #applausebcn Served over HTTPS Responsive on Mobile & Tablets There are baseline PWA features 
 that you’ll need to enable URLs should load while offline Metadata provided to add to the home screen Time to interactive should be <10 sec in 3G Should work across different browsers Pages transitions shouldn’t be blocked Each page should have a URL https://developers.google.com/web/progressive-web-apps/checklist
  62. 62. #pwaseo by @aleyda from #orainti at #applausebcn You can verify them with the Lighthouse PWA validation in Chrome https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool
  63. 63. #pwaseo by @aleyda from #orainti at #applausebcn Like this
  64. 64. #pwaseo by @aleyda from #orainti at #applausebcn You can also use Chrome DevTools Application panel to verify service workers https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/
  65. 65. #pwaseo by @aleyda from #orainti at #applausebcn As well as the App Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
  66. 66. #pwaseo by @aleyda from #orainti at #applausebcn Or use the PWA Builder to validate too
 https://www.pwabuilder.com/
  67. 67. #pwaseo by @aleyda from #orainti at #applausebcn Which also allows to revise and edit your app manifest and
 service worker https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool
  68. 68. #pwaseo by @aleyda from #orainti at #applausebcn But, do PWAs help SEO? #pwaseo by @aleyda from #orainti at #applausebcn
  69. 69. #pwaseo by @aleyda from #orainti at #applausebcn I knew that question was coming… #pwaseo by @aleyda from #orainti at #applausebcn
  70. 70. #pwaseo by @aleyda from #orainti at #applausebcn Websites that adopt PWA see benefits due to the App like functionality https://www.pwastats.com/
  71. 71. #pwaseo by @aleyda from #orainti at #applausebcn However, PWA usage won’t help SEO as it’s not a ranking factor though… https://www.seroundtable.com/google-pwas-seo-24956.html
  72. 72. #pwaseo by @aleyda from #orainti at #applausebcn On the other hand, PWA shouldn’t hurt SEO since a PWA doesn’t need to be a SPA https://love2dev.com/blog/pwa-spa/
  73. 73. #pwaseo by @aleyda from #orainti at #applausebcn Your Website Your Web App
 (SPA or MPA) PWA You can develop a PWA from scratch, or migrate your SPA, MPA or Website
  74. 74. #pwaseo by @aleyda from #orainti at #applausebcn It’s then critical to make sure that all these types of PWAs are also search friendly SEO https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
  75. 75. #pwaseo by @aleyda from #orainti at #applausebcn While configuring your Google Analytics tracking to effectively measure its usage https://builtvisible.com/google-analytics-for-pwas-tracking-offline-behaviour-and-more/
  76. 76. #pwaseo by @aleyda from #orainti at #applausebcn How can you optimize PWAs for search? #pwaseo by @aleyda from #orainti at #applausebcn
  77. 77. #pwaseo by @aleyda from #orainti at #applausebcn The PWA checklist includes some 
 SEO related best practices too Each page has a URL Site’s content is indexed by Google Canonical URLs are provided when necessary Avoid usage of fragment identifiers schema.org metadata is included https://developers.google.com/web/progressive-web-apps/checklist
  78. 78. #pwaseo by @aleyda from #orainti at #applausebcn Sorry, no SPAs! 
 Each page has a URL Site’s content is indexe day Google Canonical URLs are provided when necessary Avoid usage of fragment identifiers schema.org metadata is included https://developers.google.com/web/progressive-web-apps/checklist
  79. 79. #pwaseo by @aleyda from #orainti at #applausebcn Lighthouse doesn’t validate them automatically at the moment though https://developers.google.com/web/progressive-web-apps/checklist
  80. 80. #pwaseo by @aleyda from #orainti at #applausebcn It’s then necessary to also validate these SEO best practices along the ones provided by Google https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
  81. 81. #pwaseo by @aleyda from #orainti at #applausebcn Which are mostly the same and common to any Website SEO validation Make Your Content Crawlable Design for multiple devices Provide Clean URLs Use progressive enhancement Specify Canonical URLs Page load speed should be fast Use schema.org structured data Cross- browser support https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
  82. 82. #pwaseo by @aleyda from #orainti at #applausebcn It’s specially important to validate if the PWA is a Web app relying on JS John Mueller from Google “One common approach to creating PWAs is to use client-side- rendering (essentially a bare-bones HTML page with JavaScript that creates all of the content & functionality); these kinds of sites can be rendered and indexed by Google, but it's usually much trickier than a static HTML site.” https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
  83. 83. #pwaseo by @aleyda from #orainti at #applausebcn You want the pizza delivered ready to be eaten, not cooked at home!
  84. 84. #pwaseo by @aleyda from #orainti at #applausebcn Unless the chef is Jon Snow! #pwaseo by @aleyda from #orainti at #applausebcn
  85. 85. #pwaseo by @aleyda from #orainti at #applausebcn Like the Magento PWA Demo Store, which passes the PWA validation… https://inchoopwa.com/
  86. 86. #pwaseo by @aleyda from #orainti at #applausebcn …but it looks like this when JS is disabled since it’s Client Side Rendering
  87. 87. #pwaseo by @aleyda from #orainti at #applausebcn Which can cause content indexing and rendering issues https://search.google.com/test/mobile-friendly
  88. 88. #pwaseo by @aleyda from #orainti at #applausebcnhttp://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/ This happens because JS reliant 
 content is indexed in a second wave
  89. 89. #pwaseo by @aleyda from #orainti at #applausebcn “Rendering is expensive and cannot 
 be done immediately” https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/
  90. 90. #pwaseo by @aleyda from #orainti at #applausebcn Let’s better avoid Client Side Rendering
 https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/
  91. 91. #pwaseo by @aleyda from #orainti at #applausebcnhttps://twitter.com/i/web/status/1102906582961213441 Server side rendering is also supported by Magento too, but is not the default
  92. 92. #pwaseo by @aleyda from #orainti at #applausebcn A full SEO audit by crawling both 
 with & without JS is necessary
  93. 93. #pwaseo by @aleyda from #orainti at #applausebcn To identify, assess and close 
 the existing gaps
  94. 94. #pwaseo by @aleyda from #orainti at #applausebcnhttps://github.com/google/indexable-pwa-samples Check out Google's examples of Indexable PWAs using server, client side and hybrid rendered sites
  95. 95. #pwaseo by @aleyda from #orainti at #applausebcnhttps://www.youtube.com/watch?v=LXF8bM4g-J4 Google’s JavaScript SEO Series w/ Martin Splitt
  96. 96. #pwaseo by @aleyda from #orainti at #applausebcnhttps://developers.google.com/search/docs/guides/fix-search-javascript As well as the JavaScript search issues & fixes documentation by Google
  97. 97. #pwaseo by @aleyda from #orainti at #applausebcnhttps://twitter.com/firt And follow Maximiliano Firtman to keep updated on PWA evolution
  98. 98. #pwaseo by @aleyda from #orainti at #applausebcn There’s no excuse to not enjoy of app features on an SEO friendly Website https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70
  99. 99. #pwaseo by @aleyda from #orainti at #applausebcn Let’s make the Web progressive! #pwaseo by @aleyda from #orainti at #applausebcn
  100. 100. #pwaseo by @aleyda from #orainti at #applausebcn I’m Aleyda Solis * SEO Consultant & Founder at Orainti
 * Crawling Mondays Host * SEO Speaker at +100 Events in +20 countries * Author “SEO. Las Claves Esenciales.” * Blogger in Search Engine Land & Search Engine Journal * Featured in Forbes, Entrepreneur, Huffington Post * European Search Personality of the Year in 2018 https://www.aleydasolis.com/
  101. 101. #pwaseo by @aleyda from #orainti at #applausebcn If you liked it, you can watch me weekly by subscribing to Crawling Mondays https://youtube.com/c/crawlingmondaysbyaleyda

×