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

Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native codeJoakim Kemeny
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...Yottaa
 
Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Carin Campanario
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Aaron Gustafson
 
Image-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationImage-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationYottaa
 
Mobile Mantras: XD Best Practices for Mobile Development
Mobile Mantras: XD Best Practices for Mobile DevelopmentMobile Mantras: XD Best Practices for Mobile Development
Mobile Mantras: XD Best Practices for Mobile DevelopmentRob Fitzgibbon
 
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webFirefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webChristian Heilmann
 
Web App vs Web Site
Web App vs Web SiteWeb App vs Web Site
Web App vs Web SiteMatt Evans
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhonekentbrew
 
Sg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleySg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleyn_adam_stanley
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work EverywhereTodd Anglin
 
Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroidDoug Sillars
 
Responsive Design & Mobile First
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile FirstLuke Brooker
 
Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Matheus Cardoso
 
Leverage web technology in a mobile world
Leverage web technology in a mobile worldLeverage web technology in a mobile world
Leverage web technology in a mobile worldDieter Blomme
 
Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Scott Weiss
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
 
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008Oliver Weidlich
 

What's hot (20)

Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
 
Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications?
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
 
Image-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationImage-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion Maximization
 
Mobile Mantras: XD Best Practices for Mobile Development
Mobile Mantras: XD Best Practices for Mobile DevelopmentMobile Mantras: XD Best Practices for Mobile Development
Mobile Mantras: XD Best Practices for Mobile Development
 
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webFirefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
 
Web App vs Web Site
Web App vs Web SiteWeb App vs Web Site
Web App vs Web Site
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhone
 
Sg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleySg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanley
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
 
Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroid
 
Responsive Design & Mobile First
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile First
 
Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!
 
Leverage web technology in a mobile world
Leverage web technology in a mobile worldLeverage web technology in a mobile world
Leverage web technology in a mobile world
 
What Lies Ahead for HTML5
What Lies Ahead for HTML5What Lies Ahead for HTML5
What Lies Ahead for HTML5
 
Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
 

Viewers also liked

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 challengesTuong Do
 
SMX Social Media eBay
SMX Social Media eBaySMX Social Media eBay
SMX Social Media eBayjtkoene
 
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 Sudha Jamthe
 
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 VietnamTuong Do
 
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 VietnamTuong Do
 
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
 
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 2012Sudha Jamthe
 
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
 
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 LocationJohn Lawson
 
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 #SMF10Pieter De Wit
 
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...Heather Drake
 
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 & TricksSandi Garcia
 
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
 
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 AgricultureJazz Yao-Tsung Wang
 
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 2Tuong Do
 
Serverless & Event-driven Architecture
Serverless & Event-driven ArchitectureServerless & Event-driven Architecture
Serverless & Event-driven ArchitectureJosué Neis
 
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 WilliamsCloudera, Inc.
 
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 MTLSJose Luis Bonilla Sánchez
 

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

Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High PerformanceAmjad Rafique
 
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 experiencesBen Mantooth
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser worldPeter-Paul Koch
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Tom Deryckere
 
The Mobile Platform World
The Mobile Platform WorldThe Mobile Platform World
The Mobile Platform WorldMatt 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 Todaydavyjones
 
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 2014Maximiliano Firtman
 
Tuenti Mobile Development
Tuenti Mobile DevelopmentTuenti Mobile Development
Tuenti Mobile DevelopmentTuenti
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App DevelopmentChris 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 JavaScriptJonathan Stark
 
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 NYMaximiliano Firtman
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and HowJudi Wunderlich
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser worldPeter-Paul Koch
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application developmentsaritasingh19866
 

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?
 
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
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 

More from Maximiliano Firtman

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersMaximiliano Firtman
 
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 2020Maximiliano Firtman
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsMaximiliano Firtman
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman
 
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)Maximiliano Firtman
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Maximiliano Firtman
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoMaximiliano Firtman
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and PerformanceMaximiliano Firtman
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the WebMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Maximiliano Firtman
 
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 2015Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesMaximiliano 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
 
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webFINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webMaximiliano 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

Aggregating Ad Events with Kafka Streams and Interactive Queries at Invidi
Aggregating Ad Events with Kafka Streams and Interactive Queries at InvidiAggregating Ad Events with Kafka Streams and Interactive Queries at Invidi
Aggregating Ad Events with Kafka Streams and Interactive Queries at InvidiHostedbyConfluent
 
AsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonAsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonHostedbyConfluent
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...HostedbyConfluent
 
Apache Flink: Building a Company-wide Self-service Streaming Data Platform
Apache Flink: Building a Company-wide Self-service Streaming Data PlatformApache Flink: Building a Company-wide Self-service Streaming Data Platform
Apache Flink: Building a Company-wide Self-service Streaming Data PlatformHostedbyConfluent
 
Data Contracts In Practice With Debezium and Apache Flink
Data Contracts In Practice With Debezium and Apache FlinkData Contracts In Practice With Debezium and Apache Flink
Data Contracts In Practice With Debezium and Apache FlinkHostedbyConfluent
 
BODYPACK DIGITAL TECHNOLOGY STACK - 2024
BODYPACK DIGITAL TECHNOLOGY STACK - 2024BODYPACK DIGITAL TECHNOLOGY STACK - 2024
BODYPACK DIGITAL TECHNOLOGY STACK - 2024Andri H.
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023Joshua Flannery
 
Data Contracts Management: Schema Registry and Beyond
Data Contracts Management: Schema Registry and BeyondData Contracts Management: Schema Registry and Beyond
Data Contracts Management: Schema Registry and BeyondHostedbyConfluent
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
Real-time Geospatial Aircraft Monitoring Using Apache Kafka
Real-time Geospatial Aircraft Monitoring Using Apache KafkaReal-time Geospatial Aircraft Monitoring Using Apache Kafka
Real-time Geospatial Aircraft Monitoring Using Apache KafkaHostedbyConfluent
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024BookNet Canada
 
How to Build an Event-based Control Center for the Electrical Grid
How to Build an Event-based Control Center for the Electrical GridHow to Build an Event-based Control Center for the Electrical Grid
How to Build an Event-based Control Center for the Electrical GridHostedbyConfluent
 
Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024BookNet Canada
 
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdfREFASHIOND
 
Attacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonAttacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonHostedbyConfluent
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemSafe Software
 
Brick-by-Brick: Exploring the Elements of Apache Kafka®
Brick-by-Brick: Exploring the Elements of Apache Kafka®Brick-by-Brick: Exploring the Elements of Apache Kafka®
Brick-by-Brick: Exploring the Elements of Apache Kafka®HostedbyConfluent
 
Women in Automation 2024: Technical session - Get your career started in auto...
Women in Automation 2024: Technical session - Get your career started in auto...Women in Automation 2024: Technical session - Get your career started in auto...
Women in Automation 2024: Technical session - Get your career started in auto...DianaGray10
 
Exactly-once Stream Processing with Arroyo and Kafka
Exactly-once Stream Processing with Arroyo and KafkaExactly-once Stream Processing with Arroyo and Kafka
Exactly-once Stream Processing with Arroyo and KafkaHostedbyConfluent
 

Recently uploaded (20)

Aggregating Ad Events with Kafka Streams and Interactive Queries at Invidi
Aggregating Ad Events with Kafka Streams and Interactive Queries at InvidiAggregating Ad Events with Kafka Streams and Interactive Queries at Invidi
Aggregating Ad Events with Kafka Streams and Interactive Queries at Invidi
 
AsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonAsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit London
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
 
Apache Flink: Building a Company-wide Self-service Streaming Data Platform
Apache Flink: Building a Company-wide Self-service Streaming Data PlatformApache Flink: Building a Company-wide Self-service Streaming Data Platform
Apache Flink: Building a Company-wide Self-service Streaming Data Platform
 
Data Contracts In Practice With Debezium and Apache Flink
Data Contracts In Practice With Debezium and Apache FlinkData Contracts In Practice With Debezium and Apache Flink
Data Contracts In Practice With Debezium and Apache Flink
 
BODYPACK DIGITAL TECHNOLOGY STACK - 2024
BODYPACK DIGITAL TECHNOLOGY STACK - 2024BODYPACK DIGITAL TECHNOLOGY STACK - 2024
BODYPACK DIGITAL TECHNOLOGY STACK - 2024
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
 
Data Contracts Management: Schema Registry and Beyond
Data Contracts Management: Schema Registry and BeyondData Contracts Management: Schema Registry and Beyond
Data Contracts Management: Schema Registry and Beyond
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
Real-time Geospatial Aircraft Monitoring Using Apache Kafka
Real-time Geospatial Aircraft Monitoring Using Apache KafkaReal-time Geospatial Aircraft Monitoring Using Apache Kafka
Real-time Geospatial Aircraft Monitoring Using Apache Kafka
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
 
How to Build an Event-based Control Center for the Electrical Grid
How to Build an Event-based Control Center for the Electrical GridHow to Build an Event-based Control Center for the Electrical Grid
How to Build an Event-based Control Center for the Electrical Grid
 
Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024
 
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
 
Attacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonAttacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit London
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data Ecosystem
 
Brick-by-Brick: Exploring the Elements of Apache Kafka®
Brick-by-Brick: Exploring the Elements of Apache Kafka®Brick-by-Brick: Exploring the Elements of Apache Kafka®
Brick-by-Brick: Exploring the Elements of Apache Kafka®
 
Women in Automation 2024: Technical session - Get your career started in auto...
Women in Automation 2024: Technical session - Get your career started in auto...Women in Automation 2024: Technical session - Get your career started in auto...
Women in Automation 2024: Technical session - Get your career started in auto...
 
Exactly-once Stream Processing with Arroyo and Kafka
Exactly-once Stream Processing with Arroyo and KafkaExactly-once Stream Processing with Arroyo and Kafka
Exactly-once Stream Processing with Arroyo and Kafka
 

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