+ All Categories
Home > Technology > Mobile Web High Performance

Mobile Web High Performance

Date post: 08-Sep-2014
Category:
Upload: maximiliano-firtman
View: 22,414 times
Download: 0 times
Share this document with a friend
Description:
We’ll get deep in the well-known techniques for website’s performance (from Steve Souders and others) and how real mobile devices reacts to each one. Are mobile browsers compatible with CSS Sprites or with Lazy Load Script? What about inline images and canvas? What are the big differences between desktop and mobile web performance?
Popular Tags:
110
Mobile Web High Performance Picture from Simon Howden freedigitalphotos.net Santa Clara, 06-22-2010 Maximiliano Firtman @firt www.firt.mobi
Transcript
Page 1: Mobile Web High Performance

Mobile Web High Performance

Picture from Simon Howden freedigitalphotos.net

Santa Clara, 06-22-2010

Maximiliano Firtman @firt www.firt.mobi

Page 2: Mobile Web High Performance

Maximiliano Firtman

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

Page 3: Mobile Web High Performance

What

MWPO – Mobile Web Performance Optimization*

*Thanks Steve Souders for creating WPO!

Page 4: Mobile Web High Performance

But first…

What is mobile web?

Page 5: Mobile Web High Performance

Mobile Web

Is it other web?

NO

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

Page 6: Mobile Web High Performance

Mobile Web

Why should we care about Mobile Web?

Page 7: Mobile Web High Performance

Mobile Web

And now we have

RETINA DISPLAY

Page 8: Mobile Web High Performance

Mobile Web

But…

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

Page 9: Mobile Web High Performance

Mobile Web

And more important for us

Mobile browsers are different

Page 10: Mobile Web High Performance

Let’s talk about some Myths

Page 11: Mobile Web High Performance

Myths

One document should work for all devices

Page 12: Mobile Web High Performance

Myths

Just use standard HTML

Page 13: Mobile Web High Performance

Myths

People are not using their mobile browsers

Page 14: Mobile Web High Performance

Myths

Mobile web is iPhone, Android and… maybe BlackBerry

Page 15: Mobile Web High Performance

Mobile Web Development

Page 16: Mobile Web High Performance

Mobile Web Development

Techniques and best practices for delivering the best possible

experience for each mobile device

Page 17: Mobile Web High Performance

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

Page 18: Mobile Web High Performance

Why Mobile WPO

Page 19: Mobile Web High Performance

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%

Page 20: Mobile Web High Performance
Page 21: Mobile Web High Performance

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

Page 22: Mobile Web High Performance

Why

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

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

Page 23: Mobile Web High Performance

Why

WPO has higher impact in mobile

Page 24: Mobile Web High Performance

Why

Users hate you

Page 25: Mobile Web High Performance

Let’s talk about browsers!

Page 26: Mobile Web High Performance

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

Page 27: Mobile Web High Performance

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

Page 28: Mobile Web High Performance

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

Page 29: Mobile Web High Performance

Mobile  Widget  Overview  

•  Widgets and webapps platforms

See my presentation at www.mobilexweb.com

Page 30: Mobile Web High Performance

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

Page 31: Mobile Web High Performance

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)

Page 32: Mobile Web High Performance

Mobile  Browsers  

•  User installable •  Opera Mobile •  Opera Mini •  Firefox •  UC Browser •  Skyfire •  BOLT •  Chromium

Page 33: Mobile Web High Performance

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

Page 34: Mobile Web High Performance

Progressive Enhancement for Mobile web

Page 35: Mobile Web High Performance

HTML  5  

Lazy  Load  AJAX  

Basic  JavaScript  

CSS  WebKit  Extensions  

Advanced  CSS  

Simple  CSS  

HTML  

Cont

ent

Ada

ptat

ion

Dev

ice

Libr

ary

Page 36: Mobile Web High Performance

Device Libraries

•  WURFL •  Device Atlas •  ASP.NET Mobile Device Browser File

www.mobilexweb.com for links and tips

Page 37: Mobile Web High Performance

Tools

•  Testing •  Performance •  Debugging

Page 38: Mobile Web High Performance

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

Page 39: Mobile Web High Performance

Testing Tools

•  Testing with real devices, real networks is mandatory

Page 40: Mobile Web High Performance

Testing Tools

•  Testing with real devices, real networks is mandatory

•  Get a lot of new friends •  Buy some “key” devices •  Use virtual labs

Page 41: Mobile Web High Performance

Virtual Labs

Some are software-based and some magic-based

•  Free solutions •  Nokia Remote Device Access •  Samsung

•  Commercial solutions •  DeviceAnyWhere •  Perfecto Mobile

Page 42: Mobile Web High Performance

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).

Page 43: Mobile Web High Performance

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

Page 44: Mobile Web High Performance

Debugging Tools

•  JavaScript-based •  JIL Object Browser •  FireBug Lite

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

Page 45: Mobile Web High Performance

Now, Mobile Web High Performance Tips

Page 46: Mobile Web High Performance

Starting with 14 WPO Rules

Page 47: Mobile Web High Performance

Make fewer HTTP requests

Page 48: Mobile Web High Performance

Make fewer HTTP requests

Page 49: Mobile Web High Performance

Make fewer HTTP requests

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

Page 50: Mobile Web High Performance

Make fewer HTTP requests

Page 51: Mobile Web High Performance

Make fewer HTTP requests

 Yes, make fewer requests, please!

  But how?

Page 52: Mobile Web High Performance

Make fewer HTTP requests

Donate $50 per request

Page 53: Mobile Web High Performance

Make fewer HTTP requests

Are you sure you need all those requests?

It’s just a mobile, remember: 3”

Page 54: Mobile Web High Performance

Make fewer HTTP requests

In the home page, embed your CSS and JavaScript

Page 55: Mobile Web High Performance

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

Page 56: Mobile Web High Performance

Make fewer HTTP requests

Use inline images (data URI)

Page 57: Mobile Web High Performance

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

Page 58: Mobile Web High Performance

Make fewer HTTP requests

Use inline images (data URI)

Remember:   optimize the image first   GZIP the document

You can also:   use local storage

Page 59: Mobile Web High Performance

Make fewer HTTP requests

Page 60: Mobile Web High Performance

Make fewer HTTP requests

Use local pictograms whenever you can

Page 61: Mobile Web High Performance

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)

Page 62: Mobile Web High Performance

Make fewer HTTP requests

See pukupi.com/post/1964

Page 63: Mobile Web High Performance

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

Page 64: Mobile Web High Performance

Make fewer HTTP requests

Use CSS & extensions

For:   Titles   Buttons   Backgrounds   Visual Separators   Borders

Page 65: Mobile Web High Performance

Make fewer HTTP requests

text-shadow

Page 66: Mobile Web High Performance

Make fewer HTTP requests

-webkit-border-radius

Page 67: Mobile Web High Performance

Make fewer HTTP requests

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

Page 68: Mobile Web High Performance

Make fewer HTTP requests

CSS Sprites

Page 69: Mobile Web High Performance

Make fewer HTTP requests

-webkit-border-image

Page 70: Mobile Web High Performance

Make fewer HTTP requests

-webkit-gradient function

Page 71: Mobile Web High Performance

Make fewer HTTP requests

-webkit-transformation

Page 72: Mobile Web High Performance

Make fewer HTTP requests

-webkit-box-reflect & -webkit-mask

Page 73: Mobile Web High Performance

Make fewer HTTP requests

Canvas

Page 74: Mobile Web High Performance

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

Page 75: Mobile Web High Performance

Use a Content Delivery Network

  It is better to have it

  Use other domain - Cookies - Parallel downloads

Page 76: Mobile Web High Performance

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

Page 77: Mobile Web High Performance

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

Page 78: Mobile Web High Performance

Put Stylesheets at the Top

  Works similar to desktop

Page 79: Mobile Web High Performance

Move scripts to the bottom

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

Page 80: Mobile Web High Performance

Avoid CSS Expressions

  They don’t work on mobile browsers

Page 81: Mobile Web High Performance

Make JS and CSS external

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

Page 82: Mobile Web High Performance

Reduce DNS lookups

  Yes, please

Page 83: Mobile Web High Performance

Avoid redirects

  Yes, and in mobile redirects are very common

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

Page 84: Mobile Web High Performance

Avoid redirects

  Deliver the home page using the same URL

You can take some approaches for SEO using the same URL

Page 85: Mobile Web High Performance

Remove duplicate scripts

  Are you even thinking on more than one script?

Use only one script file, compressed and with GZIP

Page 86: Mobile Web High Performance

Configure ETags

  They don’t work on mobile browsers

Page 87: Mobile Web High Performance

Now, Other Tips

Page 88: Mobile Web High Performance

Reduce DOM

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

Page 89: Mobile Web High Performance

JavaScript Frameworks

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

Page 90: Mobile Web High Performance

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

Page 91: Mobile Web High Performance

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

Page 92: Mobile Web High Performance

Use mobile code

 Right MIME and DOCTypes for each device

 Use viewport meta tag  Use mobile version meta tags  Create valid, simple HTML

Page 93: Mobile Web High Performance

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

Page 94: Mobile Web High Performance

Lazy Load Components

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

Page 95: Mobile Web High Performance

Lazy Load Components

Page 96: Mobile Web High Performance

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

Page 97: Mobile Web High Performance

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

Page 98: Mobile Web High Performance

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

Page 99: Mobile Web High Performance

Use COMET solutions

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

Page 100: Mobile Web High Performance

Optimize JavaScript

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

Page 101: Mobile Web High Performance

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

Page 102: Mobile Web High Performance

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

Page 103: Mobile Web High Performance

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

Page 104: Mobile Web High Performance

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

Page 105: Mobile Web High Performance

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

Page 106: Mobile Web High Performance

CSS optimization

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

Page 107: Mobile Web High Performance

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

Page 108: Mobile Web High Performance

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

Page 109: Mobile Web High Performance

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

Page 110: Mobile Web High Performance

THANK YOU!

twitter.com/firt www.mobilexweb.com

Pictures from freedigitalphotos.net


Recommended