Speed really matters on the mobile web, but how fast your website feels, the perception of speed is just as important. If we balance real speed and perceived speed as you design your website, and you’ll have a winning combination! In this talk at TechFest Bucharest 2018, I talked about Progressive Web Apps and the future of Mobile Web development.

1. Ready for The Future of
Mobile Web Development

2. Making the Web Faster and
more Useful for Everyone!
Mike Rynart
@mikerynart

3. Why
Mobile Matters
What
Future Mobile
How
Mobile Experience

4. Over 4 Billion
Internet users
Statista: Global digital population as of July 2018

5. Mobile Mindset.
https://www.blog.google/technology/next-billion-users/

6. Source: Statcounter.com

7. Fast!

8. Akamai Technologies, “Consumer Web Performance Expectations Survey”, 2014
1 out of 2 people
expect a page to load in
less than 2 seconds

9. Source: DoubleClick - The need for mobile speed, September 2016
53%of visits are
abandoned if a mobile
site takes more than
3 seconds to load

10. Speed Matters!

11. Source: Google How important is speed to users? (Speed Matters, Vol. 3)
UX HIERARCHY

12. https://wpostats.com/

13. 60%
Source: Hitwise
of searches now
from mobile
devices

14. https://searchengineland.com

15. https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

16. https://backlinko.com/voice-search-seo-study

17. https://mixedreality.mozilla.org/firefox-reality

18. Mobile Web Performance
Engaging users
User experience
Conversions
People

19. Are we ready
for the Future?

20. We suck!

21. Source: Google Research - Webpagetest.org, January 2018

22. http://www.evolutionoftheweb.com/

23. Source: DoubleClick - The need for mobile speed, September 2016
s e n iz
ma r!

24. The web is
DOOM
2.3 MB
https://www.wired.com/2016/04/average-webpage-now-size-original-doom/

25. User Experience

31. Move Fast!

32. Where do we start?

34. Journey...

35. Web Performance tools
https://developers.google.com/web/fundamentals/performance/speed-tools/
PageSpeed Insights GT Metrix Pingdom
LighthouseChrome Developer ToolsWebPageTest

38. https://webpagetest.org/easy - Moto G4 - Chrome - 4G

39. Feels fast?

40. Time flies!

41. Waiting...

42. Source: Ericsson ConsumerLab, Neurons Inc.
Perception

43. FCP: https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint

44. TTI: https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive

45. Ready!

46. Complex

47. https://www.w3.org/blog/2012/09/performance-timing-information/
Navigation Timing api

48. https://www.w3.org/blog/2012/09/performance-timing-information/
BACKEND
FRONTEND
Navigation Timing api

49. https://www.w3.org/blog/2012/09/performance-timing-information/
BACKEND
FRONTEND

50. Sen w hi s
OPTIMIZATION 3 RULES

51. Sen m r in
Sen w hi s
OPTIMIZATION 3 RULES

52. Sen m r in
Sen w hi s
Sen h s e f i n y
OPTIMIZATION 3 RULES

53. Let’s go!

54. https://miamitouristguide.com

55. https://developers.google.com/web/tools/lighthouse/

56. 6.5 seconds.

57. https://developer.chrome.com/devtools

59. 3.9 seconds

60. Mobile first

62. https://bundlephobia.com

63. Cloud Hosting

65. https://varvy.com/pagespeed/enable-compression.html

66. https://developers.google.com/web/fundamentals/performance/http2/

67. https://varvy.com/pagespeed/content-delivery-networks.html

68. Images
Addy Osmani: https://images.guide/

69. Cache and Compress

70. Merged + Minified
https://developers.google.com/speed/docs/insights/MinifyResources

71. https://developers.google.com/web/updates/2018/08/web-performance-made-easy
Remove unused code

72. https://www.ampproject.org

73. https://www.ampproject.org/amp-conf/

74. Native apps

75. Source: comScore Mobile Metrix

76. https://developers.google.com/web/progressive-web-apps/
Progressive Web Apps

77. Progressive Web Apps Are…
Fast EngagingReliableIntegrated
https://developers.google.com/web/progressive-web-apps/

78. Traditional web
Web server

79. Service worker
Cache
Web server
Service Workers: client-side JavaScript proxy

80. https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive

81. https://developers.google.com/web/progressive-web-apps/
Progressive Web Apps

82. https://developers.google.com/web/tools/lighthouse/

83. 3.8 seconds 3G

84. Awesome!

85. Speed Matters!

86. Questions?
Let’s connect @mikerynart and mikerynart.com
Start your journey
@mikerynart
https://mikerynart.com/fasterweb/