SlideShare a Scribd company logo
1 of 110
Download to read offline
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
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


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

                                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	

   •  Skyfire	

   •  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 Profiler	


 •  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
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

More Related Content

What's hot

QGIS-공간패턴을읽으면세상이보인다.
QGIS-공간패턴을읽으면세상이보인다.QGIS-공간패턴을읽으면세상이보인다.
QGIS-공간패턴을읽으면세상이보인다.
minjik0820
 

What's hot (9)

QGIS-공간패턴을읽으면세상이보인다.
QGIS-공간패턴을읽으면세상이보인다.QGIS-공간패턴을읽으면세상이보인다.
QGIS-공간패턴을읽으면세상이보인다.
 
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
 
Web1.0.web2.0 web3.0 et web invisible
Web1.0.web2.0 web3.0 et web invisibleWeb1.0.web2.0 web3.0 et web invisible
Web1.0.web2.0 web3.0 et web invisible
 
Proposition commerciale-Référencement-au-résultat boostpositionnement.fr
Proposition commerciale-Référencement-au-résultat boostpositionnement.frProposition commerciale-Référencement-au-résultat boostpositionnement.fr
Proposition commerciale-Référencement-au-résultat boostpositionnement.fr
 
Audit de site web
Audit de site webAudit de site web
Audit de site web
 
오픈소스 GIS의 이해 - OSgeo Projects 중심
오픈소스 GIS의 이해 - OSgeo Projects 중심오픈소스 GIS의 이해 - OSgeo Projects 중심
오픈소스 GIS의 이해 - OSgeo Projects 중심
 
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판
 
[공간정보연구원] 1일차 - 오픈소스GIS 개요
[공간정보연구원] 1일차 - 오픈소스GIS 개요[공간정보연구원] 1일차 - 오픈소스GIS 개요
[공간정보연구원] 1일차 - 오픈소스GIS 개요
 
Object detection technique using bounding box algorithm for
Object detection technique using bounding box algorithm forObject detection technique using bounding box algorithm for
Object detection technique using bounding box algorithm for
 

Viewers also liked

SMX Social Media eBay
SMX Social Media eBaySMX Social Media eBay
SMX Social Media eBay
jtkoene
 
2013 EVN Smart Grid Plan, Nguyen Hai Ha (EN)
2013 EVN Smart Grid Plan, Nguyen Hai Ha (EN)2013 EVN Smart Grid Plan, Nguyen Hai Ha (EN)
2013 EVN Smart Grid Plan, Nguyen Hai Ha (EN)
Tuong Do
 
Giz2013 Policies and regulatory framework promoting the application of biomas...
Giz2013 Policies and regulatory framework promoting the application of biomas...Giz2013 Policies and regulatory framework promoting the application of biomas...
Giz2013 Policies and regulatory framework promoting the application of biomas...
Tuong Do
 
Leads United aka LEWIS pr brings an eBay.be case at #SMF10
Leads United aka LEWIS pr brings an eBay.be case at #SMF10Leads United aka LEWIS pr brings an eBay.be case at #SMF10
Leads United aka LEWIS pr brings an eBay.be case at #SMF10
Pieter De Wit
 
GIZ2013-The Potential of Biogas and Biomass from Agriculture and Agro-Industr...
GIZ2013-The Potential of Biogas and Biomass from Agriculture and Agro-Industr...GIZ2013-The Potential of Biogas and Biomass from Agriculture and Agro-Industr...
GIZ2013-The Potential of Biogas and Biomass from Agriculture and Agro-Industr...
Tuong Do
 
Giz2013 en-identification-of-biomass-market-opportunities-in-vietnam 2
Giz2013 en-identification-of-biomass-market-opportunities-in-vietnam 2Giz2013 en-identification-of-biomass-market-opportunities-in-vietnam 2
Giz2013 en-identification-of-biomass-market-opportunities-in-vietnam 2
Tuong Do
 

Viewers also liked (19)

Converting rice residues into energy - opportunities and challenges
Converting rice residues into energy - opportunities and challengesConverting rice residues into energy - opportunities and challenges
Converting rice residues into energy - opportunities and challenges
 
SMX Social Media eBay
SMX Social Media eBaySMX Social Media eBay
SMX Social Media eBay
 
ebay social measurement by Sudha Jamthe at Social data panel at Adobe
ebay social measurement by Sudha Jamthe at Social data panel at Adobe   ebay social measurement by Sudha Jamthe at Social data panel at Adobe
ebay social measurement by Sudha Jamthe at Social data panel at Adobe
 
GIZ support mechanism for RE development in Vietnam
GIZ support mechanism for RE development in VietnamGIZ support mechanism for RE development in Vietnam
GIZ support mechanism for RE development in Vietnam
 
Renewable energy models for rice residues - SNV Vietnam
Renewable energy models for rice residues - SNV VietnamRenewable energy models for rice residues - SNV Vietnam
Renewable energy models for rice residues - SNV Vietnam
 
2013 EVN Smart Grid Plan, Nguyen Hai Ha (EN)
2013 EVN Smart Grid Plan, Nguyen Hai Ha (EN)2013 EVN Smart Grid Plan, Nguyen Hai Ha (EN)
2013 EVN Smart Grid Plan, Nguyen Hai Ha (EN)
 
Social business for corp social summit sf 2012
Social business for corp social summit sf 2012Social business for corp social summit sf 2012
Social business for corp social summit sf 2012
 
Giz2013 Policies and regulatory framework promoting the application of biomas...
Giz2013 Policies and regulatory framework promoting the application of biomas...Giz2013 Policies and regulatory framework promoting the application of biomas...
Giz2013 Policies and regulatory framework promoting the application of biomas...
 
Expand Your Business With Social Media - ColderICE at eBay On Location
Expand Your Business With Social Media - ColderICE at eBay On LocationExpand Your Business With Social Media - ColderICE at eBay On Location
Expand Your Business With Social Media - ColderICE at eBay On Location
 
Leads United aka LEWIS pr brings an eBay.be case at #SMF10
Leads United aka LEWIS pr brings an eBay.be case at #SMF10Leads United aka LEWIS pr brings an eBay.be case at #SMF10
Leads United aka LEWIS pr brings an eBay.be case at #SMF10
 
Social Commerce and Local: The New Retail Environment: Jody Ford, VP Marketin...
Social Commerce and Local: The New Retail Environment: Jody Ford, VP Marketin...Social Commerce and Local: The New Retail Environment: Jody Ford, VP Marketin...
Social Commerce and Local: The New Retail Environment: Jody Ford, VP Marketin...
 
eBay Business Efficiency Optimization: Tools, Tips & Tricks
eBay Business Efficiency Optimization: Tools, Tips & TrickseBay Business Efficiency Optimization: Tools, Tips & Tricks
eBay Business Efficiency Optimization: Tools, Tips & Tricks
 
GIZ2013-The Potential of Biogas and Biomass from Agriculture and Agro-Industr...
GIZ2013-The Potential of Biogas and Biomass from Agriculture and Agro-Industr...GIZ2013-The Potential of Biogas and Biomass from Agriculture and Agro-Industr...
GIZ2013-The Potential of Biogas and Biomass from Agriculture and Agro-Industr...
 
2006-11-16 RFID and OSS for Agriculture
2006-11-16 RFID and OSS for Agriculture2006-11-16 RFID and OSS for Agriculture
2006-11-16 RFID and OSS for Agriculture
 
Giz2013 en-identification-of-biomass-market-opportunities-in-vietnam 2
Giz2013 en-identification-of-biomass-market-opportunities-in-vietnam 2Giz2013 en-identification-of-biomass-market-opportunities-in-vietnam 2
Giz2013 en-identification-of-biomass-market-opportunities-in-vietnam 2
 
Serverless & Event-driven Architecture
Serverless & Event-driven ArchitectureServerless & Event-driven Architecture
Serverless & Event-driven Architecture
 
Hadoop World 2011 Keynote: Ebay - Hugh Williams
Hadoop World 2011 Keynote: Ebay - Hugh WilliamsHadoop World 2011 Keynote: Ebay - Hugh Williams
Hadoop World 2011 Keynote: Ebay - Hugh Williams
 
Hype driven development
Hype driven developmentHype driven development
Hype driven development
 
Beyond Post-Editing: The Work of the eBay MTLS
Beyond Post-Editing: The Work of the eBay MTLSBeyond Post-Editing: The Work of the eBay MTLS
Beyond Post-Editing: The Work of the eBay MTLS
 

Similar to Mobile Web High Performance

Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
Ben Mantooth
 
The Mobile Platform World
The Mobile Platform WorldThe Mobile Platform World
The Mobile Platform World
Matt Evans
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
Chris Morrell
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
Jonathan Stark
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
davyjones
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
Peter-Paul Koch
 

Similar to Mobile Web High Performance (20)

Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
 
chapter2
chapter2chapter2
chapter2
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010
 
The Mobile Platform World
The Mobile Platform WorldThe Mobile Platform World
The Mobile Platform World
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
Tuenti Mobile Development
Tuenti Mobile DevelopmentTuenti Mobile Development
Tuenti Mobile Development
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
 
Simple mobile Websites
Simple mobile WebsitesSimple mobile Websites
Simple mobile Websites
 
DjangoSki
DjangoSkiDjangoSki
DjangoSki
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
Mobile web development
Mobile web development Mobile web development
Mobile web development
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
 

More from Maximiliano Firtman

Modeveast Keynote: "Mobile. Change is the only constant"
Modeveast Keynote: "Mobile. Change is the only constant"Modeveast Keynote: "Mobile. Change is the only constant"
Modeveast Keynote: "Mobile. Change is the only constant"
Maximiliano Firtman
 

More from Maximiliano Firtman (20)

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020
 
The modern PWA Cheat Sheet
The modern PWA Cheat SheetThe modern PWA Cheat Sheet
The modern PWA Cheat Sheet
 
Hacking Web Performance 2019
Hacking Web Performance 2019Hacking Web Performance 2019
Hacking Web Performance 2019
 
Progressive Web Apps Keynote
Progressive Web Apps KeynoteProgressive Web Apps Keynote
Progressive Web Apps Keynote
 
Hacking Web Performance
Hacking Web PerformanceHacking Web Performance
Hacking Web Performance
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web Apps
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the Web
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Modeveast Keynote: "Mobile. Change is the only constant"
Modeveast Keynote: "Mobile. Change is the only constant"Modeveast Keynote: "Mobile. Change is the only constant"
Modeveast Keynote: "Mobile. Change is the only constant"
 
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webFINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
 

Recently uploaded

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Recently uploaded (20)

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern Enterprise
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 

Mobile Web High Performance

  • 1. Santa Clara, 06-22-2010 Mobile Web High Performance Maximiliano Firtman @firt www.firt.mobi Picture from Simon Howden freedigitalphotos.net
  • 2. Maximiliano Firtman   www.firt.mobi   twitter.com/firt   Blog: www.mobilexweb.com
  • 3. What MWPO – Mobile Web Performance Optimization* *Thanks Steve Souders for creating WPO!
  • 4. But first… What is mobile web?
  • 5. Mobile Web Is it other web? NO But, the device and the context where we see the web are different
  • 6. Mobile Web Why should we care about Mobile Web?
  • 7. Mobile Web And now we have RETINA DISPLAY
  • 8. Mobile Web But…   it is still a 3” screen   The user is on the move   Does the user like to zoom and pan?
  • 9. Mobile Web And more important for us Mobile browsers are different
  • 10. Let’s talk about some Myths
  • 13. Myths People are not using their mobile browsers
  • 14. Myths Mobile web is iPhone, Android and… maybe BlackBerry
  • 16. Mobile Web Development Techniques and best practices for delivering the best possible experience for each mobile device
  • 17. 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
  • 19. 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
  • 20.
  • 21. 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
  • 22. Why On smartphones, a web is rendered 40-80% slower than in desktop. On mid-end devices, 4x-10x slower
  • 23. Why WPO has higher impact in mobile
  • 25. Let’s talk about browsers!
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. Mobile  Widget  Overview   • Widgets and webapps platforms See my presentation at www.mobilexweb.com
  • 30. 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
  • 31. 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)
  • 32. Mobile  Browsers   •  User installable •  Opera Mobile •  Opera Mini •  Firefox •  UC Browser •  Skyfire •  BOLT •  Chromium
  • 33. How to reach! the right! experience! to each device!
  • 34. Progressive Enhancement for Mobile web
  • 35. HTML  5   Content Adaptation Device Library Lazy  Load  AJAX   Basic  JavaScript   CSS  WebKit   Extensions   Advanced  CSS   Simple   CSS   HTML  
  • 36. Device Libraries • WURFL •  Device Atlas •  ASP.NET Mobile Device Browser File www.mobilexweb.com for links and tips
  • 38. 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
  • 39. Testing Tools • Testing with real devices, real networks is mandatory
  • 40. Testing Tools • Testing with real devices, real networks is mandatory •  Get a lot of new friends  •  Buy some “key” devices •  Use virtual labs
  • 41. Virtual Labs Some are software-based and some magic-based •  Free solutions •  Nokia Remote Device Access •  Samsung •  Commercial solutions •  DeviceAnyWhere •  Perfecto Mobile
  • 42. 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).
  • 43. 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
  • 44. Debugging Tools •  JavaScript-based •  JIL Object Browser •  FireBug Lite •  Platform Solutions •  Safari Console •  BlackBerry - Visual Studio and Eclipse
  • 47. Make fewer HTTP requests
  • 48. Make fewer HTTP requests
  • 49. Make fewer HTTP requests   HTTP Headers in mobile web are larger!   Average 30% above desktop browsers
  • 50. Make fewer HTTP requests
  • 51. Make fewer HTTP requests  Yes, make fewer requests, please!   But how?
  • 52. Make fewer HTTP requests Donate $50 per request
  • 53. Make fewer HTTP requests Are you sure you need all those requests? It’s just a mobile, remember: 3”
  • 54. Make fewer HTTP requests In the home page, embed your CSS and JavaScript
  • 55. 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
  • 56. Make fewer HTTP requests Use inline images (data URI)
  • 57. 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= /
  • 58. Make fewer HTTP requests Use inline images (data URI) Remember:   optimize the image first   GZIP the document You can also:   use local storage
  • 59. Make fewer HTTP requests
  • 60. Make fewer HTTP requests Use local pictograms whenever you can
  • 61. 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)
  • 62. Make fewer HTTP requests See pukupi.com/post/1964
  • 63. 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
  • 64. Make fewer HTTP requests Use CSS extensions For:   Titles   Buttons   Backgrounds   Visual Separators   Borders
  • 65. Make fewer HTTP requests text-shadow
  • 66. Make fewer HTTP requests -webkit-border-radius
  • 67. Make fewer HTTP requests -webkit-text-stroke -webkit-text-fill-color
  • 68. Make fewer HTTP requests CSS Sprites
  • 69. Make fewer HTTP requests -webkit-border-image
  • 70. Make fewer HTTP requests -webkit-gradient function
  • 71. Make fewer HTTP requests -webkit-transformation
  • 72. Make fewer HTTP requests -webkit-box-reflect -webkit-mask
  • 73. Make fewer HTTP requests Canvas
  • 74. 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
  • 75. Use a Content Delivery Network   It is better to have it   Use other domain - Cookies - Parallel downloads
  • 76. 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
  • 77. 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
  • 78. Put Stylesheets at the Top   Works similar to desktop
  • 79. Move scripts to the bottom   With some exceptions, script blocks parallel downloads   So, move scripts to the bottom
  • 80. Avoid CSS Expressions   They don’t work on mobile browsers
  • 81. Make JS and CSS external   In theory, it will be better   But, to reduce requests, we should embed them in the Home Page
  • 83. Avoid redirects   Yes, and in mobile redirects are very common mysite.com m.mysite.com m.mysite.com/iphone
  • 84. Avoid redirects   Deliver the home page using the same URL You can take some approaches for SEO using the same URL
  • 85. Remove duplicate scripts   Are you even thinking on more than one script? Use only one script file, compressed and with GZIP
  • 86. Configure ETags   They don’t work on mobile browsers
  • 88. Reduce DOM   Keep it simple!   Did you understand? Keep it simple!   Ok, KISS
  • 89. JavaScript Frameworks   We all love jQuery, but is it suitable for mobile?
  • 90. 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
  • 91. 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
  • 92. Use mobile code  Right MIME and DOCTypes for each device  Use viewport meta tag  Use mobile version meta tags  Create valid, simple HTML
  • 93. 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/
  • 94. Lazy Load Components   After onload or with prediction   For images, later-usage resources and code
  • 96. 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
  • 97. 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
  • 98. 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
  • 99. Use COMET solutions   COMET solutions for AJAX don’t work on mobile browsers   Many problems with 3G and operator gateways
  • 100. Optimize JavaScript   JavaScript = expensive   Reduce it, simplify it   Reduce global variables   Avoid large code execution   Follow any tip you can find about JS optimization
  • 101. 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
  • 102. 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
  • 103. 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
  • 104. 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
  • 105. 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
  • 106. CSS optimization   Again, Keep it Simple   Reduce large CSS structures   Use direct selectors   Follow desktop CSS optimization rules
  • 107. 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
  • 108. 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
  • 109. 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