1

Summary •  High Performance Infrastructure •  High Compatibility UI Pattern •  YSlow & Mobile Web Best Practices •  What’s Special on iPad?

2

Traffic

Web Server Web Server Web Server Web Server

Server Farm (VM)

Distributed Cache Server Farm

Application Server Farm

Load Balancer

3

ASP.NET MVC 2

MVC in JS at Client Browser

View - jTemplate

Model – Restful Service

Controller – Script#

4

YSlow & Mobile Web Best Practices •  http://developer.yahoo.com/performance/rules.html •  http://www.w3.org/TR/mwabp/

Mini* Requests

More Cache

Less Cookie

Optimized HTML &

CSS

5

Mini* Requests

Minimize

• CSS Sprites • Merge CSS & JS • Pre-load/Post-load

Minify

• Minify CSS & JS • Gzip • JSON vs XML • Optimize image dimension and quality

40-60% of visitors come in with an empty cache.

6

Cache 80-90% of response time is for downloading resources.

Version and never expire static resources

Set cache-control header for cacheable dynamic resources

Use CDN

7

Cookie Every request (even static resource) carries the active cookie data at the same domain.

Minimize cookie size

Expire cookie ASAP

Set cookie at minimal domain level

Eliminate unnecessary cookies

8

Optimize HTML & CSS

W3C Validation

Scripts at Bottom

External CSS & JS

Avoid Empty

Image src

9

What’s Special on iPad?

New Events

Tap

Touch

Pinch

New Dimensions

Viewport

Scale

Rotation

Cache Limitation

255K - cacheable request

size

1.5M - in Memory

5~25M - Offline

Slower CPU

Slower HTML Engine

Slower CSS

Engine

Slower JS Engine

Instable Network

Connection Lost

Speed Variable

10

Map Touch Events to Mouse Events

11

Touch Start

Mouse Down

Touch Move

Mouse Move

Touch End

Mouse Up

Tap Is Not Mouse Click

Mouse Click

Mouse Down

Mouse Up

Tap Touch Start

Touch End

Optimized Tap

Touch Start

12

UIWebView Is Not Safari

Rotation not Work

Could not Disable Offline Cache

Stricter HTML Parser

13

1.5M In-memory Cache Is Useless

255K (15K in iPhone)

Never Persisted

14

Offline Cache Optimization

15

UI for downloading & updateready

AJAX for Pre-load and Post-load

Big CSS Sprite

Dynamically Load JS & CSS

Inline Base64 Image Binary in HTML, CSS & JS

Optimize JS Performance

16

Avoid Long JS Execution

Use Asynchronous AJAX

Use window.setTimeout

Video and Audio Streaming

Automatically switch among different bitrates

17

Native App Work with UIWebView

Access Local Resources, e.g. Microphone

Detect & Notify Connection Lost

Move Heavy Computing to Native C/C++

Behave Like Native App

Release Web App is Cheaper

18

Page Communicate with Native App

19

Periodically Eval JS

from App Rather than

Custom Address in

Page

Summary •  High Performance Infrastructure

o  Cloud •  High Compatibility UI Pattern

o  MVC •  YSlow & Mobile Web Best Practices

o  Mini* Requests o  More Cache o  Less Cookie o  Optimized HTML & CSS

•  What’s Special on iPad? o  New Events o  New Dimensions o  Cache Limitation o  Slower CPU o  Instable Network

20

21

Everything Is Trade-off Even for Most Ideal Cases -- Steven Souders �

Further Reading •  High Performance Web Sites: Essential Knowledge for

Front-End Engineers •  Even Faster Web Sites: Performance Best Practices for

Web Developers

22

23

Thanks &

Happy New Year 2011

24