Performance as UX

Justin Howlett @justinhowlett @Digiflare

Who am I?

Tradition view

Save bandwidth costs

Save server costs

Simply be able to run on a platform

My app/website is good enough

-

-

-

-

Put the user first

Performance improvements should be to improve the user experience

Think of it as a 100ms experience improvement not a performancebump.

You can design and develop for speed in order to improve UX

-

-

-

Will a user really notice a 200msdelay?

“Users really respond to speed”!!!!!!!!- Marissa Mayer CEO Yahoo!

Quantifying the User ExperienceWhy$Performance$matters$to$User$Experience

A 500ms delay on google.com resultsin a 20% reduction in traffic.

http://www.scribd.com/doc/4970486/Make-Data-Useful-by-Greg-Linden-Amazoncom

A 100ms delay on amazon.com resultsin a 1% reduction in sales.

http://www.scribd.com/doc/4970486/Make-Data-Useful-by-Greg-Linden-Amazoncom

http://www.nngroup.com/articles/response-times-3-important-limits/

Limit for users feeling that they are directly manipulatingobjects 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 aresorting the table.

0.1 second

http://www.nngroup.com/articles/response-times-3-important-limits/

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 thecommand be a direct effect of the users' actions

1 second

http://www.nngroup.com/articles/response-times-3-important-limits/

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 userto interrupt the operation.

10 seconds

Smooth animations and scrolling areoften cited as major reasons iOS usersstay iOS users.

Topics Covered

Topics Covered

Myths about performance

Easy to implement techniques

Emerging standards that improve performance

The perception of performance

----

Topics Avoided

Big-O notation

Too much Objective-C / iOS

--

A brief note

You don’t have to implement any of these, just beware of what is outthere.

There are technical descriptions but feel free just to focus on thediagrams, they tell the most important story.

-

-

“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

Run tests on your own stack and on your own data. Then run them again just to make sure.

Myths about performance

XML is much slower than JSON on theweb.

“Overall using native JavaScript the use of XML and JSON isessentially identical performance for total user experience

(transfer plus parse plus query)”!!!!!!!!- David Lee

but, but, JSON...

“This study must have been done 5 yearsago on a typewriter running IE6”

33 different documents

The most commonly used browsers and operating systems

Includes mobile devices

August 6-9 2013

----

XML is NOT much slower than JSONon the web.

UITableViewCells are renderedquicker in Core Graphics.

What the heck is a “UITableViewCell” ?

What the heck is a “Core Graphics” ?

Draw flat using the CPU

Lines, fills, shapes etc..

--

Draw it flat with the CPU, GPU does less work andbam! extra fps. Now let’s celebrate!

http://floriankugler.com/blog/2013/5/24/layer<trees<vs<flat<drawing<graphics<performance<across<ios<device<

Where is your “fast cell technique” now?

This appears on stackoverflow more than you canpossibly imagine.

Easy to use tools to improve webperformance.

Google Page Speed Insights

Yahoo! YSlow

23 testable rules that affectperformance

Minimize'HTTP'RequestsUse'a'Content'Delivery'NetworkAvoid'empty'src'or'hrefAdd'an'Expires'or'a'CacheDControl'HeaderGzip'ComponentsPut'StyleSheets'at'the'TopPut'Scripts'at'the'BottomAvoid'CSS'ExpressionsMake'JavaScript'and'CSS'ExternalReduce'DNS'LookupsMinify'JavaScript'and'CSS

Avoid'RedirectsRemove'Duplicate'ScriptsConfigure'ETagsMake'AJAX'CacheableUse'GET'for'AJAX'RequestsReduce'the'Number'of'DOM'ElementsNo'404sReduce'Cookie'SizeUse'CookieDFree'Domains'for'ComponentsAvoid'FiltersDo'Not'Scale'Images'in'HTMLMake'favicon.ico'Small'and'Cacheable

Your users may not be consciouslyaware but performance drives positiveuser experiences.

Emerging standards and librariesThat%you%can%use%right%now%if%you’re%brave

Server side push

Communication driven by both theserver as well as the client.

Server side push

Not just for real-time applications

1 request and 4 responses is faster than 4 requests and 4 responses

--

Server side push

Traditionally this was sockets over some terrible port that wasprobably blocked anyway.

Or done with long polling. (YUCK)

-

-

Old$and$busted

Server side push

Multiple emerging standards

Websockets

Push notifications

Not a standard

HTTP 2.0

SPDY+Push

---

-

--

The$new$hotness

Server side push

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%headerinforms%the%client%that%the%server%is%pushing%a%resource%to%the%client%before%the%client%has%asked%for%it.%%

--

-

-

-

HTTP 2.0 (SPDY)

HTTP SPDY SPDY+Hint

Average ms 3111 1695 1608

Speedup 45.51% 48.30%

HTTP 2.0 (SPDY)

HTTP 2.0 (SPDY)

Available for Apache as mod-spdyAvailable for Nginx as a patch

Websockets

Easy Implementation, especially in NodeJS.

Support on all current browsers except the Android browser.

--

Websockets

Messagepack

“It's like JSON.but fast and small.”

Messagepack

Binary serialization format

Always smaller than XML and JSON

--

Messagepack

JSON 8.0KB

Messagepack 5.3KB

Messagepack

*Languages,*Encode*and*Decode*sets*may*be*based*on*entirely*different*sample*data*and*hardware.

Language MessagepackEncode

MessagepackDecode

JSON Encode JSON Decode

Python 2.75s 0.72s 3.33s 6.83s

Ruby 0.06s 0.10s 0.42s 0.23s

NodeJS 5.0s 3.5ms 1.0ms 1.0s

Java 759ms 1386ms 1201ms 1216ms

Messagepack

Not right for everyone

Client-side gains might easily outweigh server-side loses

Test with your own data using your own stack

---

Image compressionYour%PNGs%are%bad%and%you%should%feel%bad.

Before we get started

JPEGs are for photography

GIFs are for animated cats

PNGs are for everything else

Before we get started

If you save your 2 color logo as a jpeg you should bebanned from the internet.

Think of the electricity we could save if everyone simplysaved their images in the correct format.

Before we get started

</rant>

Your PNGs are bloated

You’re likely using PNGs that are 4x larger in disk size thanthey need to be.

Your PNGs are bloated

It’s difficult for users to shop on your site when your imagestake forever to load.

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

----

Your PNGs are bloated

139KB (24bit) 41KB (8bit 256 colors) 21KB (8bit 64 colors)

Your PNGs are bloatedWhat is banding and how to mitigate it.

Lossless image compression

PNGOUT

Zopfli

Pngcrush

AdvPNG

OptiPNG

JpegOptim

------

Image compression

ImageOptim OSX (contains all previously mentioned libraries)

JpegMini (OSX + Windows)

ImageAlpha OSX

---

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 stillresponsible for that part of your user experience.

---

http://imageoptim.com/tweetbot.html

But wait, there’s more.

Image size reductions have a direct impact on theperformance of iOS applications.

(And probably all others)

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

webP

What is webP and why does it rendereverything I just said obsolete?

webP

One format to rule them all.

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)

Based on VP8 predictive codec.

------

webP

Many mobile Operating systems and GPUs are heavily optimized forPNGs

WebP should not replace PNG assets that ship with an application.

For low internet speeds, small sized images and desktops it maybe a great option, easy to fallback.

!

!!

webP Performance

JPEGwebPJPEG

JPEG

webP

webP

0481216200

0

4

4

8

8

12

12

16

16

20

20

Image Size (KB) Image Size (KB)

webP Performance

JPEGwebPJPEG

JPEG

webP

webP

00.020.040.060.080

0

0.02

0.02

0.04

0.04

0.06

0.06

0.08

0.08

iOS Render Time iOS Render Time

webP support

Chrome 9+

Opera 12+

Android browser 4.0+

Opera Mobile 11.1+

Chrome for Android 29+

-----

Techniques to improve performanceWithout'having'a'PHD'in'Computer'Science

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.

---

-

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.

Reduce chattyness

--

---

Unnecessary iteration

A case study.

Unnecessary iteration

The worst way

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

}}

Unnecessary iteration

Do you really need the pixel location in theimage?

Unnecessary iteration

The better way

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];}

Unnecessary iteration

If my image has 100 pixels.

1 loop2 loops1 loop

1 loop

2 loops

2 loops

02000400060008000100000

0

2000

2000

4000

4000

6000

6000

8000

8000

10000

10000

Don’t try and do everything yourself

Apple has implemented sorting algorithms farbetter and far faster than I could ever dream

to.

Threading for performanceSome%people,%when%confronted%with%a%problem,%think,%"I%know,%I'll%usethreads,"%and%then%two%they%hav%erpoblesms.

Threads, queues, workers

Embarrassingly parallelLittle&or&no&effort&is&required&to&separate&the&problem&into&a&number&of&parallel&tasks.

Threading CaseLet’s&break&up&our&image&into&smaller&chunks&and&iterate&those&chunks&using&separate&threads

Threading for Performance

1 Thread2 Threads3 Threads4 Threads100 Threads1 Thread

1 Thread

2 Threads

2 Threads

3 Threads

3 Threads

4 Threads

4 Threads

100 Threads

100 Threads

012340

0

1

1

2

2

3

3

4

4

iPhone 5 iOS7 (lower is better) iPhone 5 iOS7 (lower is better)

Threading for Performance

+5%$performance$when$recompiled$as$a$646bit$binary$

Threading for Performance

1 Thread2 Threads3 Threads4 Threads100 Threads1 Thread

1 Thread

2 Threads

2 Threads

3 Threads

3 Threads

4 Threads

4 Threads

100 Threads

100 Threads

012340

0

1

1

2

2

3

3

4

4

OSX 10.8 rMBP (lower is better) OSX 10.8 rMBP (lower is better)

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 thelargest contributing factors

Threads are difficult to debug

----

-

CDNsDivide&and&conquer

If you’re using Amazon S3 or a staticserver and your user base isn’t hyperlocal... you’re doing it wrong.

http://www.quora.com/What0are0typical0latencies0for0static0content0in0S30vs0Cloudfront

S3CloudFrontS3

S3

CloudFront

CloudFront

040801201602000

0

40

40

80

80

120

120

160

160

200

200

Latency from EU (ms)Latency from EU (ms)

CDNs

Reuse and recycle

UITableViewCells

UICollectionViewCells

Reuse DOM Elements

---

Reuse and recycle

Reuse DOM Elements

“The solution is to recycle DOM nodes once they’re no longer visible. Inthis way, a list that seems to have infinite content could contain only say10 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 dataand placed at the bottom of the list. Simple. Ingenius. Beautiful.”

Sencha Fastbook

Reuse DOM Elements

Sencha Fastbook

Preload and prerender

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 itwrong

Ship with a full cache, first load shouldn’t be slower than anyother load

--

-

-

-

-

Preload and prerender

But, be careful...

“In most cases, pre-fetching won't be nearly as beneficial as you mightexpect. On a mobile device, power and bandwidth are limited resources,which calls into question the value of loading things that a user may notactually ever see. You're most likely doing a disservice by trying to be

clever about this.”

!!!!!!!!- Mattt Thompson

The Perception Of PerformanceWhen%it’s%okay%to%lie

How do I implement that?

Don’t start from zero

Microinteractions and animations can buy you time while youload

Button Downstates

Asynchronous UI. Assume success, handle failure gracefully.

Prioritize performance for human beings

••

•••

Don’t start from zero

Predictive analysis

Load popular content first

Oculus rift prerendering based on human neck acceleration curve

•••

Microinteraction and Animations

Buy yourself time by surprising and delighting

Simple animations and interactions can not only give your projecta premium feel but can actually buy you time

Jetsetter

••

•

Jetsetter

Prioritize

Responding to touch and ensuring smooth scrolling and animation havemore impact than image load times.

You can have the fastest network request on the planet but if you don’trespond to the user input immediately you’ll be branded slow.

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

Asynchronous UI

https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design

Questions

We’re hiring!