Successfully reported this slideshow.
Your SlideShare is downloading. ×

Miracle Inameti-Archibong - We made our website a progressive web app and why you should too

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Miracle Inameti-Archibong - We made our website a progressive web app and why you should too

  1. 1. Miracle Inameti-Archibong @mira_inam Erudite We made our website a progressive web app and why you should too!
  2. 2. Progressive Web Apps 01
  3. 3. Progressive Web Apps provide fast, reliable & engaging, web app experiences, regardless of the network state @mira_inam
  4. 4. App-likefeel Add to home screen Push notifications Offline content Without the excess of local device storage 10 @mira_inam
  5. 5. 0 10 20 30 40 50 60 Android iOS PWA 9.6MB 56MB 150KB home feed load! Source Addy Osmani – A Pinterest Progressive Web App Performance Case Study
  6. 6. PWA loads code for new routes on demand, and the cost of additional code is amortized over the lifetime of the application Source Addy Osmani – A Pinterest Progressive Web App Performance Case Study@mira_inam
  7. 7. Why should you care? 02
  8. 8. 19 Seconds Average Load Time >3 Seconds 53% Abandonment Rate PAGE LOAD 3G Source: Google /DoubleClick 2015@mira_inam
  9. 9. Mobile app drawbacks
  10. 10. 01 02 0301 02 03 Complexity of mobile deep linking Expensive to build and maintain High barriers to adoption @mira_inam
  11. 11. Consumers spend 60% of their total mobile time in only 3 apps, most of which are owned by Facebook and Google. Ted Schadler: Drunk History of Your Mobile Strategy@mira_inam
  12. 12. Instantly Loads: Loads all cached content instantly Offline Loading: Site is accessible in areas with low or no connectivity Add to home screen: Access like a native APP Benefits
  13. 13. Source Mobify: 2017 Q1 Mobile Commerce Insights Report Push notifications
  14. 14. H/2 reduce latency minimise protocol overhead request prioritisation HTML5 SECURE/MOBILE DEVICE local storage motion/ native-likereact @mira_inam
  15. 15. LighterJSLibrary AngularJS Polymer Vue Lower parse and compile times. See HNPWA for list of live examples frameworks/libraries. Addy Osmani : Google I/O 17@mira_inam
  16. 16. Payment request API
  17. 17. Submit to APP Store @mira_inam
  18. 18. All about the user experience “web apps are optimised to help users accomplish tasks quickly” Source Karly Cyr: Everything you need to know about PWA’s for ecommerce@mira_inam
  19. 19. Making it Happen 03
  20. 20. Baseline Requirements.
  21. 21. 01 02 03 HTTPS: is the site served over HTTPS? HTTP2: Multiplexing Service Worker: does the site register a Service Worker?
  22. 22. 04 05 06 Speed: <10,000 TTFI/CI Add to Home Screen: user prompt ‘‘Add to Home Screen’’? Responsive design
  23. 23. Lighthouse Tools 04
  24. 24. Lighthouse Chrome Dev Tools & Extension
  25. 25. Clear cache to ensure clean data
  26. 26. Run in incognito mode to get clean data
  27. 27. Addy Osmani – FluentConf Deck@mira_inam
  28. 28. Metrics that Matter.
  29. 29. Lighthouse: More on PSI Measures Performance focused
  30. 30. Lighthouse audit report @mira_inam
  31. 31. App manifest for name & icons @mira_inam
  32. 32. Check service worker Force disconnect @mira_inam
  33. 33. 100 PWA Score
  34. 34. Speed + Performance Optimisation = Improved Time to Task Completion @mira_inam
  35. 35. 01 02 03 04 Each page has its own URL Use of canonical tags Use of and social meta data Content is shareable Just Good Housekeeping @mira_inam
  36. 36. 01 02 03 04 Seamless page transmission: History API Content doesn’t jump when page loads Smooth scroll App install prompts are not excessive UX Requirements @mira_inam
  37. 37. EruditeWordPressPWA Implementing specific fixes -
  38. 38. PWAsOverTime HTTP Archive@mira_inam
  39. 39. Progressive web AMP’s Making an even better first impression AMP: Start Fast PWA: Stay Fast Quote by Alex Russell@mira_inam
  40. 40. The web always wins.
  41. 41. Developers don’t want to build 3 separate apps for the major platforms. Companies don’t want to pay for development of 3 apps. The answer to all this is the web. We can build rich web apps—Progressive Web Apps—and package them for all the app stores.” J U D A H G A B R I E L H I M A N G O
  42. 42. 50% Improved load time 4sec Load on 3G network
  43. 43. 150% increase in add to home screen 67% Increase in offline usage Source: PWA Stat
  44. 44. 50K core app when gzipped 3sec Load on 2G network Source: PWA Stat
  45. 45. Cut load times from 11.91 secs to 4.96 90% Smaller than its Android App Source: PWA Stat
  46. 46. View my full slides here @mira_inam
  47. 47. ERUDITE Ready to talk to us? M I R A C L E I N A M E T I - A R C H I B O N G +44 (0) 1256 384890 @mira_inam