Going Fast on the Mobile Web

Going Fast on the
Mobile Web
by Jason Grigsby

Flickr: Uploaded February 11, 2007 by hawridger

Work: http://cloudfour.com • Blog: http://userﬁrstweb.com • Twitter: @grigs
Mobile Concurrency Test: http://cloudfour.com/mobile/

The Mobile Web is Coming.
Web Developers aren’t Ready.
Flickr photo by look4u: http://www.ﬂickr.com/photos/look4u/279668622/

3.3
Billion
Mobile phone for
half the planet.

Flickr photo by Pingnews: http://www.ﬂickr.com/photos/pingnews/370061022/

3.3 Billion in Perspective

Source: http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html
http://communities-dominate.blogs.com/brands/2008/01/when-there-is-a.html

2007 SMS Revenue: 100 billion

•Box Ofﬁce
•DVD Sales & Rentals
Combined •Music Industry
•Video Games
Flickr photo by Vlastula: http://www.ﬂickr.com/photos/vlastula/450642954/

Mobile is the Technology that Cried Wolf.
(for 15 years)

Flickr photo by CaptPiper: http://www.ﬂickr.com/photos/piper/197153406/

“The Mother of
all Markets.”

Dr. Eli Harai, San Disk
CEO, 2008

John Sculley, Apple
CEO, 1992

http://query.nytimes.com/gst/fullpage.html?res=9E0CE5D9143AF93AA25754C0A964958260

U.S. is behind in Mobile Technology
(A.K.A. Why people got hung up on Japanese use of mobile phones to read books during
Lynne D Johnson’s Keynote yesterday)

• Penetration Rates: Leaders: > 140% (Italy, S. Korea);
US: 80%

• Networks: 3G launched in 2001 in Japan & S. Korea

• Handsets: iPhone not seen considered as innovative
in other countries where they’ve had advanced
phones for some time. Poorer countries willing to
pay more for advanced handsets.

• Services: SMS per day per subscriber: S. Korea 10,
Singapore 12, Philippines 15, U.S. 2.

Gopher, Mosaic, WAP, iPhone

Flickr photo by: http://www.ﬂickr.com/photos/vixon/352427852/

January 2008 Mobile Browser Stats

iPhone + iPod WinCE Symbian Hiptop

8%
4%

23%

65%

Source: www.netapplications.com

“It’s about usage. Not units”

• Number of queries on Google search from iPhones surpassed those
from Symbian-based phones in the days after Christmas. Nokia’s
Symbian-based phones are 40% of the market worldwide.

• German iPhone users consume 30 times more data.

• 95% of iPhone customers regularly surf the Internet. Data services
revenue increased from $2.7 billion in 2005 to $6.9 billion in 2007.

• Google sees 50 times the number of searches using the iPhone than
any other mobile device. They were so surprised, they asked their
engineers to check the logs to make sure it was correct.

• This is why major companies, Google, Quicken, etc. are all launching
iPhone-optimized services despite the iPhone’s 1% market share.

Why We’re Not
Ready to Ride the
Mobile Wave

Flickr photo by .Hessam: http://www.ﬂickr.com/photos/essamo/1070527547/

1996
1996

235
258
pages
pages

1997

238
pages
1997

447
pages
1997

235
pages

We’ve Left Optimization Behind

Flickr photo by mfajardo: http://www.ﬂickr.com/photos/mfajardo/396104047/

We’ve Become Bandwidth Gluttons

Since 2003:

• Web Page Size Tripled
•# of Objects Doubled

Since 1995:

• Web Page Size: 22x
•# of Objects: 21x

Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/

2003: Business Critical Look at Speed
•Customer complaints
•Limits of our 3 T-1s near
•Months away from new data center

Flickr: Uploaded November 13, 2003 by Wools

GBs of Data Transfer

60

45

30

15

0
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

75% faster page loads 7 months in data center

Flickr: Uploaded August 2, 2006 by pbo31

Optimizing for Flow
0.1 seconds —
Viewed as
Instantaneous
1.0 seconds —
Moving Freely
10 seconds —
Retain Focus on
Task

Flickr: Uploaded August 7, 2007 by .Hessam

Web Speed = Perception
Q ua lity
sa bi lity
U

dibi lity
C re
erv ice
S
Flickr: Uploaded October 15, 2006 by mattlogelin

Yahoo!’s 80/20 Rule

Source: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

Yahoo!’s 13 Performance Rules (Now 34!)

1. Make Fewer HTTP Requests 8. Make JavaScript and CSS
External
2. Use a Content Delivery Network
9. Reduce DNS Lookups
3. Add an Expires Header
10.Minify JavaScript
4. Gzip Components
11.Avoid Redirects
5. Put Stylesheets at the Top
12.Remove Duplicate Scripts
6. Move Scripts to the Bottom
13.Conﬁgure ETags
7. Avoid CSS Expressions

Source: http://developer.yahoo.com/performance/rules.html

GZIP Compression
• If you do nothing else, DO THIS!
• GZIP can reduce ﬁles and download time
up to 75%.
• Works on HTML, CSS, Javascript, XML and
JSON ﬁles
• Most browsers handle GZIP correctly and
the libraries like mod_gzip handle
exceptions correctly.

Flickr: Uploaded February 11, 2007 by hawridger

GZIP Case Study from Our 2003 Efforts

Version HTML CSS JS Total

40,837 17,764 1,443 60,044
Original
bytes bytes bytes bytes

24,907 5,320 1,443 31,670
Optimized
bytes bytes bytes bytes

5,722 5,320 1,443 12,485
GZIP
bytes bytes bytes* bytes

Nearly 80% reduction in ﬁle size.

Fewer HTTP Requests

Most browsers only open 2 http
connections to one domain at a time.
Flickr: Uploaded April 28, 2007 by ((IANB))

Parallel HTTP Requests

One Domain Two Domains

Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4

How do these rules apply to the mobile web?

Numerous Mobile Browsers: Little Documentation

• Access • Opera Mini

• Access Netfront • Opera Mobile

• BlackBerry • Palm

• IE Mobile • Safari

• Motorola Internet Browser • Samsung

• Nokia • Teleca-Obigo

• Openwave Mobile Browser • WinWAP

No information on gzip support or # of concurrent connections.
Source: http://wurﬂ.sourceforge.net/

Cloud Four’s Mobile Browser Test

• Tests for number of concurrent
connections and multiple domains.

• Looks for GZIP support.

• Looks for caching support.

• Works in any browser (even desktop):

• No javascript

• XHTML-MP

• http://www.cloudfour.com/mobile/
or simple text MOBILETEST to 41411.

How Does the Test Work?
deliver test page deliver delayed deliver remaining
to device under test images images

{ delay until timeout } (Server)

t-zero t-finish (Device)
(15 seconds)
start test request images
from server(s) request render test
remaining page for user
images
• Generates a unique token for this test

• Records selected HTTP headers for later analysis

• Computes the finish time (microsecond granularity) for the test, based on the current
time and our desired delay factor

• Creates a database record for the test, containing: the token, start time, finish time, and
zeroed counters for four separate domains

• Generates and delivers the test page containing 64 small (4x4 px) image requests
evenly distributed across four separate domains

• Waits for the browser to fetch all images and render the page

Initial Results — Still Looking for More Testers

GZIP 17% •Over 1,300 tests
No GZIP

•448 Unique User
Agents
83%

•169 Unique
Mobile User
Caching Agents
No Caching 32%

•Fun items like
68% Kindle, PS3, Zune.

Major Mobile Browsers

Total
Browser GZIP Caching Domain1 Domain 2 Domain 3 Domain 4 Connections

Blackberry Browser 20% 71% 4 0 0 0 4

IE Mobile 6.x 83% 100% 3 0 0 0 3

IE Mobile 7.x 100% 89% 3 0 0 0 3

Opera Mini 3.x 100% 100% 10 10 10 10 40

Opera Mini 4.x 100% 0% 2 1 1 1 5

Opera Mobile 8.x 86% 89% 2 2 2 2 8

Safari (iPhone/iPod) 100% 100% 4 4 4 4 16

Symbian (WebKit) 100% 100% 7 0 0 0 7

Other Mobile Browsers
Total
Browser GZIP Caching Domain1 Domain 2 Domain 3 Domain 4 Connections

Danger Hiptop 0% ? 3 0 0 0 3

Jataayu 100% 0% 10 0 0 0 10

NetFront 3.x 87% 100% 1 to 4 0 0 0 1 to 4

Nokia Browser 100% 100% 1 to 7 0 to 5 0 to 1 0 to 1 4 to 12

Obigo 0% 0% 3 0 0 0 3

Open Wave Mobile
6.2
100% 0% 4 0 0 0 4

Palm Blazer 71% 50% 4 0 0 0 4

SEMC Browser 100% ? 2 2 2 2 8

UP.Browser 50% 100% 1 to 4 0 0 0 1 to 4

Zune 100% 100% 16 16 16 16 64

Preliminary Conclusions from Our Tests

• GZIP support is much better than we anticipated.

• Caching support is much less than we anticipated.

• Full 3G speeds will only come for Windows Mobile and Blackberries
after they address their browser deﬁciencies (concurrent connections,
rendering engines and processor speed).

• Lots of variability between browsers means necessary testing.

• Still much to learn about mobile browser performance

Other Mobile Browser Characteristics

• Two sites that help you
understand mobile device
properties:

• WURFL: http://
wurﬂ.sourceforge.net/

• Device Atlas: http://
www.deviceatlas.com/

• Our concurrency test to be
included in the DeviceAtlas
database.

• Also published under
creative commons.

Eight Recommendations for All Mobile Devices

1. Turn on GZIP Compression 5. Simple, Valid Markup

2. Fewer Files 6. Reduce DNS Lookups

3. Aggressively Encourage Caching 7. Avoid Redirects

4. Minimize File Sizes 8. Limit Cookies

Likely beneﬁt from all 34 Yahoo! guidelines.
http://developer.yahoo.com/performance/rules.html

Flickr photo by amaneiro:
http://www.ﬂickr.com/
photos/amaneiro/
2396649106/

#1
Compressed, but
fully functional. GZIP

2. Fewer Files
•HTTP Connections are expensive

•No more than 1 external CSS & 1 external JS

•Consider embedding CSS & JS unless you are
confident about your caching.

•Remove any unnecessary files (print css)

•If CSS is supported, use CSS sprites.

•Consider inline images using data url
Flickr photo by mkw87:
http://www.flickr.com/photo_zoom.gne?id=437942494&size=l

2. Fewer Files: Inline Images
<img src=quot;data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/
0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///
yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmT
IHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgY
Pj/gAwXEQA7quot;
width=quot;16quot; height=quot;14quot; alt=quot;embedded folder iconquot; />

background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/
0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///
yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmT
IHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgY
Pj/gAwXEQA7)
top left no-repeat; )

Test extensively. Not supported in all browsers.

Flickr photo by mkw87:
http://www.ﬂickr.com/photo_zoom.gne?id=437942494&size=l

3. Aggressively Encourage Caching
•Goal #1: No HTTP HEAD Requests.

•Add Expires header. Put it far into the future.

•Develop naming conventions for versioning of
files. Update filename when file is modified.

e.g., logo080523.png

•Keep files under 25k for mobile devices.

•Configure or remove ETags from files.

•Watch your logs to make sure caching works.

Flickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l

4. Minimize File Sizes
•Three reasons why ﬁle size matters:

•Download time
•Caching
•Memory

•Minimize all html, css, & javascript regardless of
GZIP.

•Squeeze all unnecessary data out of images.

Remember every bit counts!
Flickr photo by Amodiovalerio Verde: http://www.ﬂickr.com/photo_zoom.gne?id=425333516&size=o

5. Simple, Valid Markup

• CSS-based vs. table layouts
Tables are complex to render.
• Separate content, style, behavior
• Less markup overall
• ESPN proved that this change can be
significant alone.
• Consider processing time to determine
layout in addition to download time.

Flickr photo by bertheymans: http://www.flickr.com/photo_zoom.gne?id=337851288&size=l
September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com

6. Reduce DNS Lookups

• Each DNS lookup costs performance.
No control over the DNS speed.
• Nothing can be downloaded from the
domain until the lookup completes.
• Optimum is between 2 and no more
than 4 domains per web page because
of concurrent download benefits.

Flickr photo by André-Batista: http://www.flickr.com/photo_zoom.gne?id=408700622&size=o
September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com

7. Avoid Redirects
•Redirects cost the user time so avoid the easy
ones. Particularly painful for mobile.

•Permanent 301 redirects should be modiﬁed
to be cacheable (expires header)

•Put the trailing slash on your links and shave
time off of Apache doing the work.

Flickr photo by (nz) dave: http://www.ﬂickr.com/photo_zoom.gne?id=245728298&size=l

8. Limit Cookies
• Cookies uploaded with every request! Upload
rates are much slower than download speeds.

• Goal: Zero or One Cookie. Diet time!

• Make the cookie as small as possible. Track
details on the server side.

• Use www or other sub-domain and restrict
cookies to that domain.

• Move images, css, javascript to another domain
where cookies will not be used.

Eight Recommendations for Post iPhone Devices

1.Optimize javascript performance

2.Reduce DOM elements

3.Javascript at bottom of page

4.CSS in the head tag

5.Lazy Load Components

6.Use GET unless you need POST

7.Use JSON instead of XML

8.Use hardware accelerated effects

YSlow Firebug Plugin
http://developer.yahoo.com/yslow/

User Agent Switcher
http://chrispederick.com/work/user-agent-switcher/
http://dev.mobi/blog/user-agent-switcher-conﬁg-ﬁle

Flickr photo by MarkKelley: http://www.ﬂickr.com/photos/markkelley/1022720488/

Flickr photo by localsurfer: http://www.ﬂickr.com/photos/localsurfer/180834588/

Embrace the
constraints

Make
optimization
a game

Thank You for Your Time

Mobile Portland
Meets on 4th Monday

Next Meeting Tuesday(!)
May 27th, 6 pm

Join us at our next meeting
or Google Group.

http://mobileportland.com

Work: http://cloudfour.com • Blog: http://userﬁrstweb.com • Twitter: @grigs
Mobile Concurrency Test: http://cloudfour.com/mobile/

Going Fast on the Mobile Web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Going Fast on the Mobile Web

Similar to Going Fast on the Mobile Web (20)

More from Jason Grigsby

More from Jason Grigsby (20)

Recently uploaded

Recently uploaded (20)

Going Fast on the Mobile Web