Mobile Web High Performance

Picture from Simon Howden freedigitalphotos.net

Santa Clara, 06-22-2010

Maximiliano Firtman @firt www.firt.mobi

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

Let’s talk about some Myths

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

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

Why Mobile WPO

Facts

  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

0 500 1000 1500 2000 2500 3000 3500 4000 4500

Internet

Mobile Devices

26%

63%

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

Why

Users hate you

Let’s talk about browsers!

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  

Smartphones  

High-­‐end  devices  

Mid-­‐end  devices  

low-­‐end  devices  

Smartphones  

High-­‐end  devices  

Mid-­‐end  devices  

low-­‐end  devices  

MOBILE WEB USAGE

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 •  Skyfire •  BOLT •  Chromium

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

Progressive Enhancement for Mobile web

HTML  5  

Lazy  Load  AJAX  

Basic  JavaScript  

CSS  WebKit  Extensions  

Advanced  CSS  

Simple  CSS  

HTML  

Cont

ent

Ada

ptat

ion

Dev

ice

Libr

ary

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 Profiler

•  Proxy-based solutions Charles Debugger

•  Useful for emulators and real devices •  Throttling feature to emulate GPRS, EDGE, 3G

www.mobilexweb.com for links and tips

Debugging Tools

•  JavaScript-based •  JIL Object Browser •  FireBug Lite

•  Platform Solutions •  Safari Console •  BlackBerry - Visual Studio ��� and Eclipse

Now, Mobile Web High Performance Tips

Starting with 14 WPO Rules

Make fewer HTTP requests

Make fewer HTTP requests

Make fewer HTTP requests

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

Make fewer HTTP requests

Make fewer HTTP requests

 Yes, make fewer requests, please!

  But how?

Make fewer HTTP requests

Donate $50 per request

Make fewer HTTP requests

Are you sure you need all those requests?

It’s just a mobile, remember: 3”

Make fewer HTTP requests

In the home page, embed your CSS and JavaScript

Make fewer HTTP requests

In the home page, embed your CSS and JavaScript

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

Make fewer HTTP requests

Use inline images (data URI)

Make fewer HTTP requests

<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=" />

Make fewer HTTP requests

Use inline images (data URI)

Remember:   optimize the image first   GZIP the document

You can also:   use local storage

Make fewer HTTP requests

Make fewer HTTP requests

Use local pictograms whenever you can

Make fewer HTTP requests

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)

Make fewer HTTP requests

See pukupi.com/post/1964

Make fewer HTTP requests

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

  BlackBerry before 4.6   NetFront browser   Myriad / Openwave   Motorola Internet Browser

Make fewer HTTP requests

Use CSS & extensions

For:   Titles   Buttons   Backgrounds   Visual Separators   Borders

Make fewer HTTP requests

text-shadow

Make fewer HTTP requests

-webkit-border-radius

Make fewer HTTP requests

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

Make fewer HTTP requests

CSS Sprites

Make fewer HTTP requests

-webkit-border-image

Make fewer HTTP requests

-webkit-gradient function

Make fewer HTTP requests

-webkit-transformation

Make fewer HTTP requests

-webkit-box-reflect & -webkit-mask

Make fewer HTTP requests

Canvas

Make fewer HTTP requests

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

Now, Other Tips

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?

JavaScript Frameworks

•  Average loading and parsing time in 3G networks. Only the main script file. 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

JavaScript Frameworks

  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

Lazy Load Components

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/firt www.mobilexweb.com

Pictures from freedigitalphotos.net