Embed Size (px)
Citation preview
Robin GlenPrincipal Developer
YOOX NET-A-PORTER GROUP@arielwithlegs
Building for, perceiving and measuring performance
for mobile web
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
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
Why websites moved towards SPAs
Why websites moved towards SPAs
Native like experience
Why companies moving towards SPAsWhy websites moved towards SPAs
Less dataconsumption
Why websites moved towards SPAs
Less battery usage
Why companies moving towards SPAsWhy websites moved towards SPAs
More performant*MPA pagination with simulated 3G network
MPA*Potentially
Why companies moving towards SPAsWhy websites moved towards SPAs
More performant*SPA pagination with simulated 3G network
SPA*Potentially
However, these gains are dependant on a performant API
https://goo.gl/CahHPp
SPAs vs MPAsWith extremely large datasets
How you can help ensure performant SPAs
How you can help ensure performant SPAs
API basics
How you can help ensure performant SPAs
API basics- Compression
How you can help ensure performant SPAs
API basics- Compression- CDN (get closer to customers)
- Compression- CDN (get closer to customers)- Cut down on bloat
API basicsHow you can help ensure performant SPAs
API advancedHow you can help ensure performant SPAs
- Selectable properties (partial response)
API advancedHow you can help ensure performant SPAs
- Selectable properties (partial response)- Client hints
API advancedHow you can help ensure performant SPAs
- Selectable properties (partial response)- Client hints- Streams
API advancedHow you can help ensure performant SPAs
https://goo.gl/UizzKD
- Selectable properties (partial response)- Client hints- Streams
API advancedHow you can help ensure performant SPAs
ApplicationHow you can help ensure performant SPAs
- Ship less code
ApplicationHow you can help ensure performant SPAs
- Ship less code- HTTP/2
ApplicationHow you can help ensure performant SPAs
- Ship less code- HTTP/2- Offline first
ApplicationHow you can help ensure performant SPAs
- Ship less code- HTTP/2- Offline first- Trick your customers
ApplicationHow you can help ensure performant SPAs
Perceived performance
Famous example
iOSLoad image of app’s last state
Applying perceived performance to the web
Perceived performance
White screenSynchronous loading of contentover slow 3G connection
Perceived performance
SpinnerAsynchronous loading of contentover slow 3G connection
Perceived performance
Skeleton CSSAsynchronous loading of contentover slow 3G connection
Spinner vs Skeleton
Measuring performance
We build mobile first, but measuring performance should be mobile only
Measuring performance
RAILPerformance budgets
Measuring performance
RAIL Instant feedbackInput latency < 100ms
Performance budgets
Measuring performance
RAIL Instant feedbackInput latency < 100ms
Run at 60fpsEach frame’s work < 16ms
Performance budgets
Measuring performance
RAIL Instant feedbackInput latency < 100ms
Run at 60fpsEach frame’s work < 16ms
Schedule work Main thread work chunked < 50ms
Performance budgets
Measuring performance
RAIL Instant feedbackInput latency < 100ms
Run at 60fpsEach frame’s work < 16ms
Schedule work Main thread work chunked < 50ms
Render critical path < 1000ms
Performance budgets
https://goo.gl/C2x54g
Measuring performance
RAIL Instant feedbackInput latency < 100ms
Run at 60fpsEach frame’s work < 16ms
Schedule work Main thread work chunked < 50ms
Render critical path < 1000ms
Performance budgets
We have tools to help
Measuring performance
Chrome devtools Performance tab, throttle network and CPU
https://goo.gl/3KeEKQ
Measuring performance
RAPIP Mobile API performance tool
“If you can’t measure it, you can’t improve it”
“If you can’t measure it, you can’t improve it”
Robin Glen
“If you can’t measure it, you can’t improve it”
Robin GlenPeter Drucker
Monitoring performance
DOM complete is a blunt instrument
Monitoring performance
RAILChrome performanceAPIs
Monitoring performance
RAIL Interaction response timingsPerformance mark / measure (Chome 43+)
Chrome performanceAPIs
Monitoring performance
RAIL Interaction response timingsPerformance mark / measure (Chome 43+)
Long tasks / dropped framesPerformanceLongTaskTiming (Chrome 58+)
Chrome performanceAPIs
Monitoring performance
RAIL Interaction response timingsPerformance mark / measure (Chome 43+)
Long tasks / dropped framesPerformanceLongTaskTiming (Chrome 58+)
First paint / First contentful paintPerformanceObserver (Chrome 60+)
Chrome performanceAPIs
Monitoring performance
RAIL Interaction response timingsPerformance mark / measure (Chome 43+)
Long tasks / dropped framesPerformanceLongTaskTiming (Chrome 58+)
First paint / First contentful paintPerformanceObserver (Chrome 60+)
Chrome performanceAPIs
Hero elementsCurrently being worked on
Monitoring performance
RAIL Interaction response timingsPerformance mark / measure (Chome 43+)
Long tasks / dropped framesPerformanceLongTaskTiming (Chrome 58+)
First paint / First contentful paintPerformanceObserver (Chrome 60+)
Chrome performanceAPIs
Hero elementsCurrently being worked on Time to interactivePolyfill https://goo.gl/YNbcU7
Monitoring performance
RAIL Interaction response timingsPerformance mark / measure (Chome 43+)
Long tasks / dropped framesPerformanceLongTaskTiming (Chrome 58+)
First paint / First contentful paintPerformanceObserver (Chrome 60+)
Chrome performanceAPIs
Hero elementsCurrently being worked on Time to interactivePolyfill https://goo.gl/YNbcU7 https://goo.gl/iKifq9
Performance metrics are not a number, they
are a histogram
Time (ms)
Load metrics
https://goo.gl/iKifq9
Finally
One surefire way to ruin your website performance
Unregulated marketing tags!
Performance killers
TagsName and shame withthird party attributions
ThanksRobin Glen
Principal DeveloperYOOX NET-A-PORTER GROUP
@arielwithlegs
