This document discusses strategies for improving the performance of single-page applications (SPAs). It notes that SPAs can provide a more native-like user experience compared to traditional multi-page applications. The document outlines several ways to enhance SPA performance, including optimizing APIs, reducing payload size, enabling HTTP/2 and offline functionality. It also discusses techniques for measuring and monitoring performance using tools like the Chrome DevTools and performance metrics. The key message is that performance must be measured to be improved.

2. Robin Glen
Principal Developer
YOOX NET-A-PORTER GROUP
@arielwithlegs

3. Building for, perceiving and
measuring performance
for mobile web

4. MPAs
“Multiple-page applications work in a ‘traditional’ way.
Every change e.g. display the data or submit data back to
server requests rendering a new page from the server in
the browser.” - Paweł Skólsk
https://goo.gl/7Zjyh8

5. SPAs
https://goo.gl/7Zjyh8
“A single-page application is an app that works inside a
browser and does not require page reloading during
use.”- Paweł Skólsk

6. Why websites
moved towards SPAs

7. Why websites moved towards SPAs
Native like experience

8. Why companies moving towards SPAsWhy websites moved towards SPAs
Less data
consumption

9. Why websites moved towards SPAs
Less battery usage

10. Why companies moving towards SPAsWhy websites moved towards SPAs
More performant*
MPA pagination with simulated
3G network
MPA*
Potentially

11. Why companies moving towards SPAsWhy websites moved towards SPAs
More performant*
SPA pagination with simulated
3G network
SPA*
Potentially

12. However, these gains are
dependant on a performant API

13. https://goo.gl/CahHPp
SPAs vs MPAs
With extremely large datasets

14. How you can help ensure
performant SPAs

15. How you can help ensure performant SPAs
API basics

16. How you can help ensure performant SPAs
API basics
- Compression

17. How you can help ensure performant SPAs
API basics
- Compression
- CDN (get closer to customers)

18. - Compression
- CDN (get closer to customers)
- Cut down on bloat
API basics
How you can help ensure performant SPAs

19. API advanced
How you can help ensure performant SPAs

20. - Selectable properties (partial response)
API advanced
How you can help ensure performant SPAs

21. - Selectable properties (partial response)
- Client hints
API advanced
How you can help ensure performant SPAs

22. - Selectable properties (partial response)
- Client hints
- Streams
API advanced
How you can help ensure performant SPAs

23. https://goo.gl/UizzKD
- Selectable properties (partial response)
- Client hints
- Streams
API advanced
How you can help ensure performant SPAs

24. Application
How you can help ensure performant SPAs

25. - Ship less code
Application
How you can help ensure performant SPAs

26. - Ship less code
- HTTP/2
Application
How you can help ensure performant SPAs

27. - Ship less code
- HTTP/2
- Offline first
Application
How you can help ensure performant SPAs

28. - Ship less code
- HTTP/2
- Offline first
- Trick your customers
Application
How you can help ensure performant SPAs

29. Perceived performance

30. Famous example
iOS
Load image of app’s last state

31. Applying perceived performance
to the web

32. Perceived performance
White screen
Synchronous loading of content
over slow 3G connection

33. Perceived performance
Spinner
Asynchronous loading of content
over slow 3G connection

34. Perceived performance
Skeleton CSS
Asynchronous loading of content
over slow 3G connection

35. Spinner vs Skeleton

36. Measuring performance

37. We build mobile first, but
measuring performance
should be mobile only

38. Measuring performance
RAIL
Performance budgets

39. Measuring performance
RAIL Instant feedback
Input latency < 100ms
Performance budgets

40. Measuring performance
RAIL Instant feedback
Input latency < 100ms
Run at 60fps
Each frame’s work < 16ms
Performance budgets

41. Measuring performance
RAIL Instant feedback
Input latency < 100ms
Run at 60fps
Each frame’s work < 16ms
Schedule work
Main thread work chunked < 50ms
Performance budgets

42. Measuring performance
RAIL Instant feedback
Input latency < 100ms
Run at 60fps
Each frame’s work < 16ms
Schedule work
Main thread work chunked < 50ms
Render critical path
< 1000ms
Performance budgets

43. https://goo.gl/C2x54g
Measuring performance
RAIL Instant feedback
Input latency < 100ms
Run at 60fps
Each frame’s work < 16ms
Schedule work
Main thread work chunked < 50ms
Render critical path
< 1000ms
Performance budgets

44. We have tools to help

45. Measuring performance
Chrome dev
tools
Performance tab,
throttle network and CPU

46. https://goo.gl/3KeEKQ
Measuring performance
RAPIP
Mobile API performance tool

47. “If you can’t measure it,
you can’t improve it”

48. “If you can’t measure it,
you can’t improve it”
Robin Glen

49. “If you can’t measure it,
you can’t improve it”
Robin Glen
Peter Drucker

50. Monitoring performance

51. DOM complete is
a blunt instrument

52. Monitoring performance
RAIL
Chrome performance
APIs

53. Monitoring performance
RAIL Interaction response timings
Performance mark / measure (Chome 43+)
Chrome performance
APIs

54. Monitoring performance
RAIL Interaction response timings
Performance mark / measure (Chome 43+)
Long tasks / dropped frames
PerformanceLongTaskTiming (Chrome 58+)
Chrome performance
APIs

55. Monitoring performance
RAIL Interaction response timings
Performance mark / measure (Chome 43+)
Long tasks / dropped frames
PerformanceLongTaskTiming (Chrome 58+)
First paint / First contentful paint
PerformanceObserver (Chrome 60+)
Chrome performance
APIs

56. Monitoring performance
RAIL Interaction response timings
Performance mark / measure (Chome 43+)
Long tasks / dropped frames
PerformanceLongTaskTiming (Chrome 58+)
First paint / First contentful paint
PerformanceObserver (Chrome 60+)
Chrome performance
APIs
Hero elements
Currently being worked on

57. Monitoring performance
RAIL Interaction response timings
Performance mark / measure (Chome 43+)
Long tasks / dropped frames
PerformanceLongTaskTiming (Chrome 58+)
First paint / First contentful paint
PerformanceObserver (Chrome 60+)
Chrome performance
APIs
Hero elements
Currently being worked on
Time to interactive
Polyfill https://goo.gl/YNbcU7

58. Monitoring performance
RAIL Interaction response timings
Performance mark / measure (Chome 43+)
Long tasks / dropped frames
PerformanceLongTaskTiming (Chrome 58+)
First paint / First contentful paint
PerformanceObserver (Chrome 60+)
Chrome performance
APIs
Hero elements
Currently being worked on
Time to interactive
Polyfill https://goo.gl/YNbcU7https://goo.gl/iKifq9

59. Performance metrics are
not a number, they
are a histogram

60. Time (ms)
Load metrics
https://goo.gl/iKifq9

61. Finally

62. One surefire way to ruin your
website performance

63. Unregulated marketing tags!

64. Performance killers
Tags
Name and shame with
third party attributions

65. Thanks
Robin Glen
Principal Developer
YOOX NET-A-PORTER GROUP
@arielwithlegs