• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Performance Tuning
 

Mobile Performance Tuning

on

  • 1,078 views

Presented to w

Presented to w

Statistics

Views

Total Views
1,078
Views on SlideShare
959
Embed Views
119

Actions

Likes
1
Downloads
12
Comments
0

4 Embeds 119

http://www.gocanvas.com 111
https://twitter.com 4
http://eventifier.co 3
http://www.eventifier.co 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Many products you use expose a public APIVendor products around API managementJosh Bloch – how to design a good API and why it matters
  • <!-- This snippet was inserted via the Poll Everywhere Mac Presenter --> <!-- The presence of this snippet is used to indicate that a poll will be shown during the slideshow --> <!-- TIP: You can draw a solid, filled rectangle on your slide and the Mac Presenter will automatically display your poll in that area. --> <!-- The Mac Presenter application must also be running and logged in for this to work. --> <!-- To remove this, simply delete it from the notes yourself or use the Mac Presenter to remove it for you. --> How many images do you see?
  • http://calendar.perfplanet.com/2012/giving-your-images-an-extra-squeeze/ <!-- This snippet was inserted via the Poll Everywhere Mac Presenter --> <!-- The presence of this snippet is used to indicate that a poll will be shown during the slideshow --> <!-- TIP: You can draw a solid, filled rectangle on your slide and the Mac Presenter will automatically display your poll in that area. --> <!-- The Mac Presenter application must also be running and logged in for this to work. --> <!-- To remove this, simply delete it from the notes yourself or use the Mac Presenter to remove it for you. --> What percent of all web traffic is for images?
  • Fortune 100 company, previous client, looked in SiteCatalyst w/them @ 200% year over year growth on mobile
  • Lazy loading images = scrollling down a web page, images loaded on the fly 62% of all website bandwidth is taken by downloading images Another interesting trend – progressive jpegs making a come back (essentially lazy loading)Content/posts = think Facebook app scroll down or “tap to load more”Resources = RequireJS, AMD, ${yourFrameworkOfChoice}

Mobile Performance Tuning Mobile Performance Tuning Presentation Transcript

  • Web Performance Tuning@apemberton,
  • My Goal• Learn something!• Teach something• Take it back to your team
  • APIs and Services• Most apps need data• APIs power many popular apps & sites• Many APIs expose data in web formats• Hybrid Apps
  • Web Performance Best Practiceshttp://developer.yahoo.com/performance/rules.html
  • Image Sprites
  • The Rules• Minimize HTTP requests• Caching Headers– HTML5 application manifest• GZIP• Source Order• Minification• Reduce DOM count• Optimize Images• … many more
  • What the User saw
  • What the Browser sawGET /assets/img/global/logo/sprite/header.gif HTTP/1.1Host: www.capitalone.comUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:15.0) Gecko/20100101 Firefox/15.0.1Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip, deflateCookie: …Pragma: no-cacheCache-Control: no-cacheHTTP/1.1 200 OKDate: Thu, 09 May 2013 13:07:51 GMTServer: …Last-Modified: Fri, 16 Nov 2012 18:44:36 GMTAccept-Ranges: bytesContent-Length: 6003Cache-Control: no-cache, no-store, must-revalidateExpires: Fri, 10 May 2013 13:07:51 GMTVary: User-AgentContent-Type: image/gif
  • What the Device saw
  • POLLWhat percentage of all web traffic is for images?
  • Optimize Images• EXIF / IPTC metadata• pngcrush, imagemagick, etc.• Yahoo SmushIt– http://smush.it
  • MOBILE
  • Mobile Reality• More constrained hardware• More constrained bandwidth• Variable latency• … massively increasing usage
  • iPhone Caching• 25KB (15KB) limit• Powering off / closing tabs• HTML5 Application Manifest
  • Precaching / Prefetching<a href=“contact.html”>Contact Us</a><a href=“accounts.html” data-prefetch>Accounts</a>Example from jQuery Mobile: http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html
  • Lazy Loading• Lazy loading images• Lazy loading content / posts• Lazy loading resources
  • Performance Monitoring• Analytics is critical• Simulating 3G and other bandwidth scenarios• Growing marketplace– Perfecto mobile, DeviceAnywhere, Appium
  • When Should I load ____?Pros ConsOn install • Always there• “Zero” wait time• Always there • Larger binary in storeOn app start • Allows user / contextspecific data• Smaller binary to install• Maybe loading earlierthan needed• Longer start timeOn request + cache • Don’t load it ‘til youneed it• Cached for subsequentrequests• Caching strategy: easiersaid than done• Longer wait time for therequestOn request • Always live data • Longer wait time for therequest
  • LEARN SOMETHING YET?!
  • Tools• Charles Proxy, Wireshark, Fiddler• FireBug, Google Page Speed• Google mod_pagespeed• YSlow (+ PhantomJS + Jenkins)• Selenium / Appium• http://smush.it• wro4j, pack:tag
  • Thank you!