velocity mobile web high performance forshare 100623090625 phpapp01

7/31/2019 Velocity Mobile Web High Performance Forshare 100623090625 Phpapp01

1/110

Mobile Web

High Performance

Picture from Simon Howden freedigitalphotos.net

Santa Clara, 06-22-2010

Maximiliano Firtman@firt www.firt.mobi


2/110

Maximiliano Firtman

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


3/110

What

MWPO Mobile Web Performance Optimization*

*Thanks Steve Souders for creating WPO!


4/110

But first

What is mobile web?


5/110

Mobile Web

Is it other web?

NOBut, the device and the context wherewe see the web are different


6/110

Mobile Web

Why should wecare about

Mobile Web?


7/110

Mobile Web

And now we have

RETINA

DISPLAY


8/110

Mobile Web

But

it is still a 3 screenThe user is on the move

Does the user like tozoom and pan?


9/110

Mobile Web

And more important for us

Mobile browsers are different


10/110

Lets talk about some

Myths


11/110

Myths

One document shouldwork for all devices


12/110

Myths

Just use standard HTML


13/110

Myths

People are not using theirmobile browsers


14/110

Myths

Mobile web is iPhone,Android and maybe

BlackBerry


15/110

Mobile Web Development


16/110


Techniques and best practicesfor delivering the best possible

experience for each mobile device


17/110


Techniques and best practicesfor delivering the best possible

experience for each mobile device

Even with widgets, webapps or

offline web applications


18/110

Why Mobile WPO


19/110

Facts

1.8 billion Internet Connections1 4.6 billion Mobile Devices2 The difference will be bigger in the future1 International Telecommunications Union 2 The Fact Book - CIA

0 500 10001500200025003000350040004500

Internet

Mobile Devices

26%

63%


20/110


21/110

Why

1. Mobile networks are slower2. Mobile processors are slower3. Mobile browsers are different4. Mobile users are different5. Compatibility is different


22/110

Why

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

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


23/110

Why

WPO has higher impact in mobile


24/110

Why

Users hate you


25/110

Lets talk about browsers


26/110

MobileBrowsers

Too manyLimited support and higher support than desktopDifferent navigation methods. Proxied vs. DirectBrowsersNo documentation for most of themNon-updatable


27/110

MobileBrowsersCategoriesbyitsbrowser

SmartphoneLarge screen, touch, partial HTML 5 & CSS3, widgets

High-end Touch or keypad, HTML 4, AJAX, widgets

Mid-endKeypad, 240x320, HTML 4, XHTML MP, WML, CSS,Basic AJAX support

Low-endKeypad, 128x160, XHTML MP, Basic HTML 4 & CSS


28/110

MobileBrowsers

Smartphones

High-enddevices

Mid-enddevices

low-enddevices

Smartphones

High-enddevices

Mid-enddevices

low-enddevices

MOBILE WEB USAGE

MARKET SHARE


29/110

MobileWidgetOverview

Widgets and webapps platforms

See my presentation at www.mobilexweb.com


30/110

MobileBrowsers

WebKit-based pre-installedSafari on iOSAndroid browserSymbian browser

webOS browser

Series 40 browser from 6th editionBada browser(future) BlackBerry browser


31/110

MobileBrowsers

Non-WebKit preinstalled NetFront browserMyriad browser (formerly Openwave) Internet Explorer Web Browser for Series 40 (up to 6th edition) MIB Motorola Internet BrowserBlackBerry browserNTT Docomo i-mode browserObigo-Teleca browser

microB (Maemo / MeeGo)


32/110

MobileBrowsers

User installableOpera MobileOpera MiniFirefoxUC BrowserSkyfireBOLTChromium


33/110

How to reachthe right

experienceto each device


34/110

Progressive Enhancement

for Mobile web


35/110

HTML5

LazyLoadAJAX

BasicJavaScript

CSSWebKitExtensions

AdvancedCSS

SimpleCSS

HTML

ContentA

daptation

DeviceLibrary


36/110

Device Libraries

WURFLDevice AtlasASP.NET Mobile Device Browser File

www.mobilexweb.com for links and tips


37/110

Tools

TestingPerformanceDebugging


38/110

Testing Tools

Emulators & SimulatorsOnly 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 forBada, MeeGo (Maemo), propietary OSs devices (for LG,Motorola, Samsung), NetFront, Windows Phone 7www.mobilexweb.com for links and tips


39/110

Testing Tools

Testing with real devices, real networks ismandatory


40/110

Testing Tools

Testing with real devices, real networks ismandatory

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


41/110

Virtual Labs

Some are software-based and some magic-basedFree solutions

Nokia Remote Device AccessSamsung

Commercial solutionsDeviceAnyWherePerfecto Mobile


42/110

Performance Tools

Classic desktop solutionsFireBug, YSlow!, PageSpeedUsing with User Agent Switcher for Firefox

Mobile SolutionsDoesnt exist, but we can rely on server-side

and proxy-based solutions (for Wi-Fi devices).


43/110

Performance Tools

Server-Side scripts for performanceCloud Fours Mobile Browser Test

Client-Side scripts for performanceYahoo UI Profiler

Proxy-based solutions Charles Debugger

Useful for emulators and real devicesThrottling feature to emulate GPRS, EDGE, 3G


44/110

Debugging Tools

JavaScript-basedJIL Object BrowserFireBug Lite

Platform SolutionsSafari ConsoleBlackBerry - Visual Studio

and Eclipse


45/110

Now,Mobile Web High

Performance Tips


46/110

Starting with

14 WPO Rules


47/110

Make fewer HTTP requests


48/110



49/110


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


50/110



51/110


Yes, make fewer requests, please! But how?


52/110


Donate $50 per request


53/110


Are you sure you need all thoserequests?

Its just a mobile, remember: 3


54/110


In the home page, embed your CSSand JavaScript


55/110


In the home page, embed your CSSand JavaScript

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

M k f HTTP


56/110


Use inline images (data URI)

M k f HTTP t


57/110


M k f HTTP t


58/110


Use inline images (data URI)

Remember:

optimize the image first GZIP the document

You can also: use local storage

M k f HTTP t


59/110


M k f HTTP t


60/110


Use local pictogramswhenever you can

M k f HTTP t


61/110


Use local pictograms

Solutions

450 emoji icons for iPhone XHTML MP Pictograms

Japanese pictograms Create your own pictograms with local

storage (HTML 5, widgets)

M k f HTTP t


62/110


See pukupi.com/post/1964

M k f HTTP t


63/110


XHTML MP Pictograms only workin old and low-end devices

BlackBerry before 4.6 NetFront browser Myriad / Openwave Motorola Internet Browser

M k f HTTP t


64/110


Use CSS & extensions

For:

Titles Buttons Backgrounds Visual Separators Borders



65/110


text-shadow



66/110


-webkit-border-radius



67/110


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



68/110


CSS Sprites



69/110


-webkit-border-image



70/110


-webkit-gradient function



71/110


-webkit-transformation



72/110


-webkit-box-reflect & -webkit-mask



73/110


Canvas



74/110


Mutipart documents

Use a device library Use Accept header, look formultipart/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


75/110

Use a Content Delivery Network

It is better to have it Use other domain

-Cookies-Parallel downloads

Add an Expires Header


76/110

Add an Expires Header

Yes, use it. Every deviceunderstand it. Be careful with-Resources > 20Kb

-Mobile Caches are small You can have more control inHTML 5

GZIP Components


77/110

GZIP Components

Yes, use it. +95% devicessupports it.

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

Put Stylesheets at the Top


78/110

Put Stylesheets at the Top

Works similar to desktop

Move scripts to the bottom


79/110

Move scripts to the bottom

With some exceptions, scriptblocks parallel downloads

So, move scripts to the bottom

Avoid CSS Expressions


80/110

Avoid CSS Expressions

They dont work on mobilebrowsers

Make JS and CSS external


81/110

Make JS and CSS external

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

Page

Reduce DNS lookups


82/110

Reduce DNS lookups

Yes, please

Avoid redirects


83/110

Avoid redirects

Yes, and in mobile redirects arevery common

mysite.com >m.mysite.com >

m.mysite.com/iphone

Avoid redirects


84/110

Avoid redirects

Deliver the home page using thesame URL

You can take some approaches for SEOusing the same URL

Remove duplicate scripts


85/110

Remove duplicate scripts

Are you even thinking on morethan one script?

Use only one script file, compressed andwith GZIP

Configure ETags


86/110

Configure ETags

They dont work on mobilebrowsers


87/110

Now,

Other Tips

Reduce DOM


88/110

Reduce DOM

Keep it simple! Did you understand? Keep itsimple!

Ok, KISS

JavaScript Frameworks


89/110


We all love jQuery, but is itsuitable for mobile?



90/110

p

Average loading and parsing time in 3G networks. Only the main script file. Ifit loads lazily other scripts, they are not counting here.Dont use these numbers. The important conclusion is that JS frameworksare harmful for performance if we just load as a simple script tagFinal numbers vary regarding on device, CPU and network



91/110

p

Use native code when possible(DOM browsing, AJAX)

Use mobile-optimized frameworks- baseJS- XUI Use hardware-acceleratedanimation instead of a library foreffects

Use mobile code


92/110

Right MIME and DOCTypes for eachdevice

Use viewport meta tagUse mobile version meta tagsCreate valid, simple HTML

Use mobile code


93/110

BlackBerry-

Windows Mobile-

Semantic- Safari, Android, webOS, BB

-

Lazy Load Components


94/110

y p

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

Lazy Load Components


95/110

y p

Deferred JavaScript execution


96/110

p

Very clever solution Created by Gmail Mobile teamand Charles Jolley

Deliver the JS inside a commentblock When needed remove commentsand eval It work on smartphones

Local Code Repository


97/110

p y

Download a JS code by AJAX,dynamic script or other technique

Store it in localStorage ordatabase for future usage. Eval or inject the code in a scripttag.

Useful for auto-updatable widgets

Use AJAX for content


98/110

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

Use COMET solutions


99/110

COMET solutions for AJAX dontwork on mobile browsers

Many problems with 3G andoperator gateways

Optimize JavaScript


100/110

JavaScript = expensive Reduce it, simplify it Reduce global variablesAvoid large code execution Follow any tip you can find aboutJS optimization

Timer usage


101/110

Dont use timers with a frequencyhigher than 1s

Gmail Mobile team analysis What framework are you using? In home widgets, remember howmuch time your code will be live

Image optimization


102/110

Follow typical image optimizationtechniques

Use PNG safely Use optimized animated GIF against

Flash for banners, when possible.- Animated GIF doesnt work on webOS or Android

Use SVG for charts and shape-basedimages- SVG only works on Safari, webOS, Symbian and

NetFront

Use Application Cache


103/110

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


104/110

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


105/110

Dont use iframes They are not compatible withmost browsers.

For those who are compatible, ithave strange behaviors

Slow down all the page load

CSS optimization


106/110

Again, Keep it Simple Reduce large CSS structures Use direct selectors

Follow desktop CSS optimization rules

Geolocation Cache


107/110

Remember last users positionStart your query while the updated position

is loaded

Ask the user for its location if thegeolocation query is taking much time

Widget and webapp optimization


108/110

Dont create a super DOM with lots of divswith display: none

DOM Object Pool for recycling Endless scrolling patternwiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices


109/110

Picture from Simon Howden freedigitalphotos.net


110/110

THANK YOU!

twitter.com/firtwww.mobilexweb.com

velocity mobile web high performance forshare 100623090625 phpapp01

Documents