Mobile Web High Performance

Santa Clara, 06-22-2010

Mobile Web
High Performance

Maximiliano Firtman
@firt www.firt.mobi

Picture from Simon Howden freedigitalphotos.net

Maximiliano Firtman

  www.firt.mobi
  twitter.com/firt
  Blog: www.mobilexweb.com

What

MWPO – Mobile Web Performance Optimization*

*Thanks Steve Souders for creating WPO!

But first…

What is mobile web?

Mobile Web

Is it other web?

NO

But, the device and the context where
we see the web are different

Mobile Web

Why should we
care about
Mobile Web?

Mobile Web

And now we have

RETINA
DISPLAY

Mobile Web

But…

  it is still a 3” screen
  The user is on the move
  Does the user like to
zoom and pan?

Mobile Web

And more important for us

Mobile browsers are different

Myths

One document should
work for all devices

Myths

Just use standard HTML

Myths

People are not using their
mobile browsers

Myths

Mobile web is iPhone,
Android and… maybe
BlackBerry

Mobile Web Development

Techniques and best practices
for delivering the best possible
experience for each mobile device

Mobile Web Development

Techniques and best practices
for delivering the best possible
experience for each mobile device

Even with widgets, webapps or
offline web applications

Facts

Mobile Devices 63%

Internet 26%

0 500 10001500200025003000350040004500

  1.8 billion Internet Connections1
  4.6 billion Mobile Devices2
  The difference will be bigger in the future

1 International Telecommunications Union 2 The Fact Book - CIA

Why

1.  Mobile networks are slower

2.  Mobile processors are slower

3.  Mobile browsers are different

4.  Mobile users are different

5.  Compatibility is different

Why

On smartphones, a web is rendered 40-80%
slower than in desktop.

On mid-end devices, 4x-10x slower

Why

WPO has higher impact in mobile

Mobile
Browsers

• Too many

•  Limited support and higher support than desktop

•  Different navigation methods. Proxied vs. Direct
Browsers

•  No documentation for most of them

•  Non-updatable

Mobile
Browsers
Categories
by
its
browser

•  Smartphone

•  Large screen, touch, partial HTML 5 & CSS3, widgets

•  High-end

• Touch or keypad, HTML 4, AJAX, widgets

•  Mid-end

•  Keypad, 240x320, HTML 4, XHTML MP, WML, CSS,
Basic AJAX support

•  Low-end

•  Keypad, 128x160, XHTML MP, Basic HTML 4 & CSS

Mobile
Browsers

MOBILE WEB USAGE

Smartphones
Smartphones

High-‐end
devices
High-‐end
devices

Mid-‐end
devices
Mid-‐end
devices

low-‐end

low-‐end
devices

devices

MARKET SHARE

Mobile
Widget
Overview

• Widgets and webapps platforms

See my presentation at www.mobilexweb.com

Mobile
Browsers

• WebKit-based pre-installed

•  Safari on iOS

•  Android browser

•  Symbian browser

•  webOS browser

•  Series 40 browser from 6th edition

•  Bada browser

•  (future) BlackBerry browser

Mobile
Browsers

•  Non-WebKit preinstalled

•  NetFront browser

•  Myriad browser (formerly Openwave)

•  Internet Explorer

•  Web Browser for Series 40 (up to 6th edition)

•  MIB Motorola Internet Browser

•  BlackBerry browser

•  NTT Docomo i-mode browser

•  Obigo-Teleca browser

•  microB (Maemo / MeeGo)

Mobile
Browsers

•  User installable

•  Opera Mobile

•  Opera Mini

•  Firefox

•  UC Browser

•  Skyﬁre

•  BOLT

•  Chromium

How to reach!
the right!
experience!
to each device!

Progressive Enhancement
for Mobile web

HTML
5

Content Adaptation
Device Library Lazy
Load
AJAX

Basic
JavaScript

CSS
WebKit

Extensions

Advanced
CSS

Simple

CSS

HTML

Device Libraries

• WURFL

•  Device Atlas

•  ASP.NET Mobile Device Browser File

www.mobilexweb.com for links and tips

Tools

• Testing

•  Performance

•  Debugging

Testing Tools

•  Emulators & Simulators

•  Only some of them are useful for mobile web

•  iPhone, Android, BlackBerry, Symbian, webOS, Series 40,
Opera Mobile, Opera Mini, Windows Mobile

•  No mobile browser emulation for

•  Bada, MeeGo (Maemo), propietary OS’s devices (for LG,
Motorola, Samsung), NetFront, Windows Phone 7

www.mobilexweb.com for links and tips

Testing Tools

• Testing with real devices, real networks is
mandatory

Testing Tools

• Testing with real devices, real networks is
mandatory

•  Get a lot of new friends 

•  Buy some “key” devices

•  Use virtual labs

Virtual Labs

Some are software-based and some magic-based

•  Free solutions

•  Nokia Remote Device Access

•  Samsung

•  Commercial solutions

•  DeviceAnyWhere

•  Perfecto Mobile

Performance Tools

•  Classic desktop solutions

•  FireBug,YSlow!, PageSpeed

•  Using with User Agent Switcher for Firefox

•  Mobile Solutions

Doesn’t exist, but we can rely on server-side
and proxy-based solutions (for Wi-Fi devices).

Performance Tools

•  Server-Side scripts for performance

•  Cloud Four’s Mobile Browser Test

•  Client-Side scripts for performance

• Yahoo UI Proﬁler

•  Proxy-based solutions

Charles Debugger

•  Useful for emulators and real devices

• Throttling feature to emulate GPRS, EDGE, 3G

Debugging Tools

•  JavaScript-based

•  JIL Object Browser

•  FireBug Lite

•  Platform Solutions

•  Safari Console

•  BlackBerry - Visual Studio
and Eclipse

Now,
Mobile Web High
Performance Tips

Make fewer HTTP requests

  HTTP Headers in mobile web are larger!
  Average 30% above desktop browsers


 Yes, make fewer requests, please!

  But how?


Donate $50 per request


Are you sure you need all those
requests?

It’s just a mobile, remember: 3”


In the home page, embed your CSS
and JavaScript


In the home page, embed your CSS
and JavaScript

After onload:
  download external CSS and JS
  save them to local cache


Use inline images (data URI)


img width=100 height=17 alt=O'Reilly src=data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAEYAAAARBAMAAACSi8f4AAAAA3NCSVQICAjb4U/gAAAAGFBMVEX/
//////8AAACpqanMzMxmZmaHhoQ/Pz9kt3AEAAAACHRSTlMA/////////9XKVDIAAAAJcEhZcwAA
CxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRF
WHRDcmVhdGlvbiBUaW1lADEyLzExLzA5uegApgAAAQNJREFUKJGVkUFTwyAQhfMXXiH1LA3hDMTe
SVDPidW7WnMvkxn/vo+MsamX6s7wgOy3O29JgetR/I2Rdy8B8HIcAyhj8PLIr0dsuYlDF8i8KWWC
/BRKaVCUTaJmkhcDuNOHLVCaJg6VfJY6JivqGJHEjn00q3tpsGcfd0KuuGdx2+fsmSl3m2r2k2gG
g30i434xSMlmht0YbR+EflAU71dMW89zzWcy2W61eF6YssK5j3vlII81Lj0vzOKHaXCuSz8334yb
gC2bkdlUK6ZeMVvTdMM0M0IL3fmQskbD08LA8YHDzGDw9Nyn7Hziuv1hsH/PltCQi9770MmsXFaG
f/z3q/EFatlL/IFsBmgAAAAASUVORK5CYII= /


Use inline images (data URI)

Remember:
  optimize the image first
  GZIP the document

You can also:
  use local storage


Use local pictograms
whenever you can


Use local pictograms

Solutions
  450 emoji icons for iPhone #x9999
  XHTML MP Pictograms
object data=pict:///core/arrow/right /
  Japanese pictograms
  Create your own pictograms with local
storage (HTML 5, widgets)


See pukupi.com/post/1964


XHTML MP Pictograms only work
in old and low-end devices

  BlackBerry before 4.6
  NetFront browser
  Myriad / Openwave
  Motorola Internet Browser


Use CSS extensions

For:
  Titles
  Buttons
  Backgrounds
  Visual Separators
  Borders


text-shadow


-webkit-border-radius

-webkit-text-stroke -webkit-text-fill-color


CSS Sprites


-webkit-border-image


-webkit-gradient function


-webkit-transformation


-webkit-box-reflect -webkit-mask


Canvas


Mutipart documents
  Use a device library

  Use Accept header, look for multipart/mixed or
application/vnd.wap.multipart

  BlackBerry, Nokia, Series 40, Symbian,
Openwave other low- and mid-end devices

  Create dynamically the multipart document

Use a Content Delivery Network

  It is better to have it

  Use other domain
- Cookies
- Parallel downloads

Add an Expires Header

  Yes, use it. Every device
understand it.

  Be careful with
-  Resources 20Kb
-  Mobile Caches are small

  You can have more control in
HTML 5

GZIP Components

  Yes, use it. +95% devices
supports it.

  Be careful with
-  Proxies and Transcoders
-  Old low-end devices
-  Old BlackBerry devices
-  Old NetFront devices

Put Stylesheets at the Top

  Works similar to desktop

Move scripts to the bottom

  With some exceptions, script
blocks parallel downloads
  So, move scripts to the bottom

Avoid CSS Expressions

  They don’t work on mobile
browsers

Make JS and CSS external

  In theory, it will be better
  But, to reduce requests, we
should embed them in the Home
Page

Reduce DNS lookups

  Yes, please

Avoid redirects

  Yes, and in mobile redirects are
very common

mysite.com
m.mysite.com
m.mysite.com/iphone

Avoid redirects

  Deliver the home page using the
same URL

You can take some approaches for SEO
using the same URL

Remove duplicate scripts

  Are you even thinking on more
than one script?

Use only one script file, compressed and
with GZIP

Configure ETags

  They don’t work on mobile
browsers

Reduce DOM

  Keep it simple!
  Did you understand? Keep it
simple!
  Ok, KISS

JavaScript Frameworks

  We all love jQuery, but is it
suitable for mobile?


•  Average loading and parsing time in 3G networks. Only the main script ﬁle. If
it loads lazily other scripts, they are not counting here.

•  Don’t use these numbers. The important conclusion is that JS frameworks
are harmful for performance if we just load as a simple script tag

•  Final numbers vary regarding on device, CPU and network


  Use native code when possible
(DOM browsing, AJAX)
  Use mobile-optimized frameworks
-  baseJS
-  XUI
  Use hardware-accelerated
animation instead of a library for
effects

Use mobile code

 Right MIME and DOCTypes for each
device
 Use viewport meta tag
 Use mobile version meta tags
 Create valid, simple HTML

Use mobile code

  BlackBerry
-  meta name=HandheldFriendly content=True /
  Windows Mobile
-  meta name=MobileOptimized content=width /
  Semantic
-  link rel=alternate media=handheld href= /
  Safari, Android, webOS, BB
-  meta name=viewport content=width=device-
width,initial-scale=1.0,user-scalable=no/

Lazy Load Components

  After onload or with prediction
  For images, later-usage
resources and code

Deferred JavaScript execution

  Very clever solution
  Created by Gmail Mobile team
and Charles Jolley
  Deliver the JS inside a comment
block
  When needed remove comments
and eval
  It work on smartphones

Local Code Repository

  Download a JS code by AJAX,
dynamic script or other technique
  Store it in localStorage or
database for future usage.
  Eval or inject the code in a script
tag.
  Useful for auto-updatable widgets

Use AJAX for content

  On compatible devices, use AJAX
  Less traffic = more performance
  Use a server-side engine
  Implement SEO over AJAX
  Using progressive enhancement

Use COMET solutions

  COMET solutions for AJAX don’t
work on mobile browsers
  Many problems with 3G and
operator gateways

Optimize JavaScript

  JavaScript = expensive
  Reduce it, simplify it
  Reduce global variables
  Avoid large code execution
  Follow any tip you can find about
JS optimization

Timer usage

  Don’t use timers with a frequency
higher than 1s
  Gmail Mobile team analysis
  What framework are you using?
  In home widgets, remember how
much time your code will be live

Image optimization

  Follow typical image optimization
techniques
  Use PNG safely
  Use optimized animated GIF against
Flash for banners, when possible.
-  Animated GIF doesn’t work on webOS or Android
  Use SVG for charts and shape-based
images
-  SVG only works on Safari, webOS, Symbian and
NetFront

Use Application Cache

  HTML 5 new feature
  Manifest file
  Can show the first HTML, CSS, JS and
images without using network
  Use AJAX to retrieve update information
  Update the cache

Use Offline Storage

  HTML 5 new feature
  localStorage and Database
  Store useful objects
-  Images in data URI format
-  JSON with useful collections
-  Scripts with codes by module
  Define a versioning method

IFrames

  Don’t use iframes
  They are not compatible with
most browsers.
  For those who are compatible, it
have strange behaviors
  Slow down all the page load

CSS optimization

  Again, Keep it Simple
  Reduce large CSS structures
  Use direct selectors
  Follow desktop CSS optimization rules

Geolocation Cache

 Remember last user’s position
 Start your query while the updated position
is loaded
 Ask the user for its location if the
geolocation query is taking much time

Widget and webapp optimization

 Don’t create a super DOM with lots of divs
with display: none

 DOM Object Pool for recycling

  Endless scrolling pattern

wiki.forum.nokia.com/index.php/
JavaScript_Performance_Best_Practices

Do Mobile
Keep it Simple
Best Experience
for each device
Test measure
Don’t let the user
hates you

Picture from Simon Howden freedigitalphotos.net

THANK YOU!

twitter.com/ﬁrt

www.mobilexweb.com

Pictures from freedigitalphotos.net

Mobile Web High Performance

Recommended

More Related Content

Viewers also liked (14)

Similar to Mobile Web High Performance (20)

More from Maximiliano Firtman (20)

Recently uploaded (20)

Mobile Web High Performance