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.
Miracle Inameti-Archibong
@mira_inam
Erudite
We made our website a
progressive web app and
why you should too!
Progressive Web Apps
01
Progressive Web Apps provide fast, reliable
& engaging, web app experiences,
regardless of the network state
@mira_inam
App-likefeel
Add to home screen
Push notifications
Offline content
Without the
excess of
local device
storage
10
@mira_inam
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 ...
PWA loads code for new routes on
demand, and the cost of additional
code is amortized over the
lifetime of the application...
Why should you care?
02
19 Seconds
Average Load Time
>3 Seconds
53% Abandonment Rate
PAGE LOAD
3G
Source: Google /DoubleClick 2015@mira_inam
Mobile app
drawbacks
01 02 0301 02 03
Complexity
of mobile
deep
linking
Expensive to
build and
maintain
High
barriers to
adoption
@mira_inam
Consumers spend 60% of their total mobile
time in only 3 apps, most of which are
owned by Facebook and Google.
Ted Schadle...
Instantly Loads: Loads all
cached content instantly
Offline Loading: Site is accessible
in areas with low or no connectivi...
Source Mobify: 2017 Q1 Mobile Commerce Insights Report
Push notifications
H/2
reduce latency
minimise protocol overhead
request prioritisation
HTML5
SECURE/MOBILE DEVICE
local storage
motion/
nati...
LighterJSLibrary
AngularJS
Polymer
Vue
Lower parse and compile
times. See HNPWA for
list of live examples
frameworks/libra...
Payment request API
Submit to
APP Store
@mira_inam
All about the user experience
“web apps are optimised to help users
accomplish tasks quickly”
Source Karly Cyr: Everything...
Making it Happen
03
Baseline
Requirements.
01
02
03
HTTPS: is the site served
over HTTPS?
HTTP2: Multiplexing
Service Worker: does the site
register a Service Worker?
04
05
06
Speed: <10,000 TTFI/CI
Add to Home Screen: user
prompt ‘‘Add to Home Screen’’?
Responsive design
Lighthouse Tools
04
Lighthouse
Chrome Dev Tools
& Extension
Clear cache to
ensure clean data
Run in incognito
mode to get clean data
Addy Osmani – FluentConf Deck@mira_inam
Metrics that Matter.
Lighthouse: More on PSI Measures
Performance
focused
Lighthouse
audit report
@mira_inam
App
manifest for
name &
icons
@mira_inam
Check
service
worker
Force
disconnect
@mira_inam
100 PWA Score
Speed + Performance
Optimisation =
Improved Time to Task
Completion
@mira_inam
01
02
03
04
Each page has its own URL
Use of canonical tags
Use of schema.org and social
meta data
Content is shareable
Ju...
01
02
03
04
Seamless page
transmission: History API
Content doesn’t jump when
page loads
Smooth scroll
App install prompts...
EruditeWordPressPWA
Implementing specific fixes - https://github.com/o10n-x/@mira_inam
PWAsOverTime
HTTP Archive@mira_inam
Progressive
web AMP’s
Making an even better
first impression
AMP: Start Fast
PWA: Stay Fast
Quote by Alex Russell@mira_inam
The web
always wins.
Developers don’t want to build 3 separate
apps for the major platforms. Companies
don’t want to pay for development of 3
a...
50%
Improved
load time
4sec
Load on 3G
network
150%
increase in
add to home
screen
67%
Increase in
offline usage
Source: PWA Stat
50K
core app when
gzipped
3sec
Load on 2G
network
Source: PWA Stat
Cut load times
from 11.91
secs to
4.96
90%
Smaller than
its Android
App
Source: PWA Stat
View my full
slides here
@mira_inam
http://bit.ly/eruditeslides
ERUDITE
Ready to
talk to us?
miracle.inameti@erudite.agency
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 3...
Próxima SlideShare
Cargando en…5
×

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

1.529 visualizaciones

Publicado el

From BrightonSEO September 2018

Publicado en: Marketing
  • Sé el primero en comentar

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 schema.org 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 - https://github.com/o10n-x/@mira_inam
  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 http://bit.ly/eruditeslides
  47. 47. ERUDITE Ready to talk to us? miracle.inameti@erudite.agency 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 https://erudite.agency @mira_inam

×