From BrightonSEO September 2018

1. Miracle Inameti-Archibong
@mira_inam
Erudite
We made our website a
progressive web app and
why you should too!

2. Progressive Web Apps
01

3. Progressive Web Apps provide fast, reliable
& engaging, web app experiences,
regardless of the network state
@mira_inam

4. App-likefeel
Add to home screen
Push notifications
Offline content
Without the
excess of
local device
storage
10
@mira_inam

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. 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. Why should you care?
02

8. 19 Seconds
Average Load Time
>3 Seconds
53% Abandonment Rate
PAGE LOAD
3G
Source: Google /DoubleClick 2015@mira_inam

9. Mobile app
drawbacks

10. 01 02 0301 02 03
Complexity
of mobile
deep
linking
Expensive to
build and
maintain
High
barriers to
adoption
@mira_inam

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. 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. Source Mobify: 2017 Q1 Mobile Commerce Insights Report
Push notifications

14. H/2
reduce latency
minimise protocol overhead
request prioritisation
HTML5
SECURE/MOBILE DEVICE
local storage
motion/
native-likereact
@mira_inam

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. Payment request API

17. Submit to
APP Store
@mira_inam

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. Making it Happen
03

20. Baseline
Requirements.

21. 01
02
03
HTTPS: is the site served
over HTTPS?
HTTP2: Multiplexing
Service Worker: does the site
register a Service Worker?

22. 04
05
06
Speed: <10,000 TTFI/CI
Add to Home Screen: user
prompt ‘‘Add to Home Screen’’?
Responsive design

23. Lighthouse Tools
04

24. Lighthouse
Chrome Dev Tools
& Extension

25. Clear cache to
ensure clean data

26. Run in incognito
mode to get clean data

27. Addy Osmani – FluentConf Deck@mira_inam

28. Metrics that Matter.

29. Lighthouse: More on PSI Measures
Performance
focused

30. Lighthouse
audit report
@mira_inam

31. App
manifest for
name &
icons
@mira_inam

32. Check
service
worker
Force
disconnect
@mira_inam

33. 100 PWA Score

34. Speed + Performance
Optimisation =
Improved Time to Task
Completion
@mira_inam

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. 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. EruditeWordPressPWA
Implementing specific fixes - https://github.com/o10n-x/@mira_inam

38. PWAsOverTime
HTTP Archive@mira_inam

39. Progressive
web AMP’s
Making an even better
first impression
AMP: Start Fast
PWA: Stay Fast
Quote by Alex Russell@mira_inam

40. The web
always wins.

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. 50%
Improved
load time
4sec
Load on 3G
network

43. 150%
increase in
add to home
screen
67%
Increase in
offline usage
Source: PWA Stat

44. 50K
core app when
gzipped
3sec
Load on 2G
network
Source: PWA Stat

45. Cut load times
from 11.91
secs to
4.96
90%
Smaller than
its Android
App
Source: PWA Stat

46. View my full
slides here
@mira_inam
http://bit.ly/eruditeslides

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