Performance is important for user experience. While some myths exist around performance, such as XML being much slower than JSON, tests show they are essentially identical. Easy techniques can improve performance, such as using content delivery networks and image compression. Emerging standards like HTTP 2.0, server-side push, and WebSockets allow pushing data to clients. Frameworks like MessagePack provide smaller binary serialization. Proper use of threading, reusing elements, preloading, and prioritizing content can also boost performance. The perception of speed matters - even 100ms delays impact user behavior.
3. Tradition view
Save bandwidth costs
Save server costs
Simply be able to run on a platform
My app/website is good enough
-
-
-
-
4. Put the user first
Performance improvements should be to improve the user experience
Think of it as a 100ms experience improvement not a performance
bump.
You can design and develop for speed in order to improve UX
-
-
-
8. A 500ms delay on google.com results
in a 20% reduction in traffic.
9. A 100ms delay on amazon.com results
in a 1% reduction in sales.
10. Limit for users feeling that they are directly manipulating
objects in the UI. For example, this is the limit from thetime the user selects a column in a table until that columnshould highlight or otherwise give feedback that it'sselected. Ideally, this would also be the response time forsorting the column - if so, users would feel that they are
sorting the table.
0.1 second
11. Limit for users feeling that they are freely navigating thecommand space without having to unduly wait for thecomputer. A delay of 0.2-1.0 seconds does mean thatusers notice the delay and thus feel the computer is"working" on the command, as opposed to having the
command be a direct effect of the users' actions
1 second
12. Limit for users keeping their attention on the task.
Anything slower than 10 seconds needs a percent-doneindicator as well as a clearly signposted way for the user
to interrupt the operation.
10 seconds
13. Smooth animations and scrolling are
often cited as major reasons iOS users
stay iOS users.
15. Topics Covered
Myths about performance
Easy to implement techniques
Emerging standards that improve performance
The perception of performance
-
-
-
-
17. A brief note
You don’t have to implement any of these, just beware of what is out
there.
There are technical descriptions but feel free just to focus on the
diagrams, they tell the most important story.
-
-
18. “Don’t Trust Anyone. Don’t believe blindly what you are told.
Perform experiments, test your own data and code with your own
users and devices. What ‘seems obvious’ is not always true.”
!!!!!!!!- David Lee
19. Run tests on your own stack and on your own data.
Then run them again just to make sure.
22. “Overall using native JavaScript the use of XML and JSON is
essentially identical performance for total user experience
(transfer plus parse plus query)”
!!!!!!!!- David Lee
24. “This study must have been done 5 years
ago on a typewriter running IE6”
25. 33 different documents
The most commonly used browsers and operating systems
Includes mobile devices
August 6-9 2013
-
-
-
-
XML is NOT much slower than JSON
on the web.
40. Server side push
Not just for real-time applications
1 request and 4 responses is faster than 4 requests and 4 responses
-
-
41. Server side push
Traditionally this was sockets over some terrible port that was
probably blocked anyway.
Or done with long polling. (YUCK)
-
-
Old$and$busted
42. Server side push
Multiple emerging standards
Websockets
Push notifications
Not a standard
HTTP 2.0
SPDY+Push
-
-
-
-
-
-
The$new$hotness
44. HTTP 2.0 (SPDY)
Google initiative
SPDY Hint
Rather than automatically pushing resources to the client, the server uses the X-Subresources header to suggest to the
client that it should ask for specific resources, in cases where the server knows in advance of the client that those resources
will be needed
SPDY Push
SPDY%experiments%with%an%option%for%servers%to%push%data%to%clients%via%the%X:Associated:Content%header.%This%header
informs%the%client%that%the%server%is%pushing%a%resource%to%the%client%before%the%client%has%asked%for%it.%%
-
-
-
-
-
45. HTTP 2.0 (SPDY)
HTTP SPDY SPDY+Hint
Average ms 3111 1695 1608
Speedup 45.51% 48.30%
56. Before we get started
JPEGs are for photography
GIFs are for animated cats
PNGs are for everything else
57. Before we get started
If you save your 2 color logo as a jpeg you should be
banned from the internet.
Think of the electricity we could save if everyone simply
saved their images in the correct format.
59. Your PNGs are bloated
You’re likely using PNGs that are 4x larger in disk size than
they need to be.
60. Your PNGs are bloated
It’s difficult for users to shop on your site when your images
take forever to load.
61. Your PNGs are bloated
Savings can be lossy or lossless
24bit vs 8bit PNG
Color palette reduction (256 to 2 colors)
Lossy color reduction causes banding
-
-
-
-
62. Your PNGs are bloated
139KB (24bit) 41KB (8bit 256 colors) 21KB (8bit 64 colors)
63. Your PNGs are bloated
What is banding and how to mitigate it.
66. Image Size Reduction
Huge impact on shipping application size, download wait time.
Huge impact on asset downloading times
Downloading and installing a 1GB app is an awful. And yes you’re still
responsible for that part of your user experience.
-
-
-
http://imageoptim.com/tweetbot.html
67. But wait, there’s more.
Image size reductions have a direct impact on the
performance of iOS applications.
(And probably all others)
68. Image Performance gains
“Xcode-optimized images were significantly slower to display. Decoding speed appears to be correlated
to image file size more than anything else (most likely savings on byteswapping are negligible compared
to additional disk I/O and extra data to decompress.)”
http://imageoptim.com/tweetbot.html
69. webP
What is webP and why does it render
everything I just said obsolete?
71. webP
Open source, developed mainly by Google.
25-34% smaller than JPEGs
26% smaller than PNGs
Supports alpha channel
Animation support (though ironically the chrome team won’t support it)
-
-
-
-
-
72. webP
Many mobile Operating systems and GPUs are heavily optimized for
PNGs
WebP should not replace PNG assets that ship with an application.
For low internet speeds, small sized images and desktops it may
be a great option, easy to fallback.
!
!
!
77. Behavioral APIs
Sits between DB or API or Feeds and the client.
Abstract heavy parsing and multiple requests to a server
Reduce data sent to the client
I don’t care what “page” of data this came from.
-
-
-
-
78. Behavioral APIs
Prepare data in a way that’s best for that particular device
messagepack, json, jsonP, XML, PNG, webP.
Prepare data in a way that’s best for the application
This views has these 4 elements, this endpoint provides all four models at the same time.
-
-
-
-
81. Unnecessary iteration
int bytesPerPixel = 4; //r,g,b,a
for(int x = 0; x < imageWidth; x++) {
for(int y = 0; y < imageHeight; y++) {
int pixelStartIndex = (x + (y * imageWidth)) * bytesPerPixel;
int r = pixels[pixelStartIndex ];
int g = pixels[pixelStartIndex +1];
int b = pixels[pixelStartIndex + 2];
//calculate the luminosity of the pixels
}
}
84. Unnecessary iteration
int bytesPerPixel = 4; //r,g,b,a
for(NSInteger i=0; i<length; i+= bytesPerPixel){
int r = pixels[i];
int g = pixels[i+1];
int b = pixels[i+2];
}
94. Threading for Performance
More threads aren’t better
Threads can be expensive to spawn
Thread spawn cost can outweigh performance gains
Data set size, hardware and threading API performance are the
largest contributing factors
Threads are difficult to debug
-
-
-
-
-
100. Reuse DOM Elements
“The solution is to recycle DOM nodes once they’re no longer visible. In
this way, a list that seems to have infinite content could contain only say
10 elements – just enough to fill the screen. Once you scroll down the list,
DOM nodes that scrolled off the top are detached, updated with new data
and placed at the bottom of the list. Simple. Ingenius. Beautiful.”
Sencha Fastbook
103. Prioritize prefetching intelligently
Detect where scrolling will end up and load that content
Load popular content
Load content that a user is otherwise likely to want to see
If you’re block the UI or the use of the application you’re doing it
wrong
Ship with a full cache, first load shouldn’t be slower than any
-
-
-
-
-
-
Preload and prerender
104. But, be careful...
“In most cases, pre-fetching won't be nearly as beneficial as you might
expect. On a mobile device, power and bandwidth are limited resources,
which calls into question the value of loading things that a user may not
actually ever see. You're most likely doing a disservice by trying to be
clever about this.”
!!!!!!!!- Mattt Thompson
107. How do I implement that?
Don’t start from zero
Microinteractions and animations can buy you time while you
load
Button Downstates
Asynchronous UI. Assume success, handle failure gracefully.
Prioritize performance for human beings
•
•
•
•
•
108. Don’t start from zero
Predictive analysis
Load popular content first
Oculus rift prerendering based on human neck acceleration curve
•
•
•
109. Microinteraction and Animations
Buy yourself time by surprising and delighting
Simple animations and interactions can not only give your project
a premium feel but can actually buy you time
Jetsetter
•
•
•
111. Prioritize
Responding to touch and ensuring smooth scrolling and animation have
more impact than image load times.
You can have the fastest network request on the planet but if you don’t
respond to the user input immediately you’ll be branded slow.
112. Asynchronous UI
Assume success and fail gracefully
Reflect the user request immediately or almost immediately
If you need to send more information later then do so
Instagram
•
•
•
•
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design