Mobile Web Performance Optimization Tips and Tricks
Upcoming SlideShare
Loading in...5
×
 

Mobile Web Performance Optimization Tips and Tricks

on

  • 13,401 views

 

Statistics

Views

Total Views
13,401
Views on SlideShare
9,266
Embed Views
4,135

Actions

Likes
19
Downloads
177
Comments
0

23 Embeds 4,135

http://econsultancy.com 3427
http://feeds.feedburner.com 297
http://www.blaze.io 166
https://econsultancy.com 73
http://plutecki.net 41
http://marketing-digital.wsimarketingeninternet.com 35
https://pramati.qontext.com 26
http://apps.synaptive.net 18
http://g.dev.gree.jp 13
http://translate.googleusercontent.com 10
http://www.hanrss.com 5
http://blog.g4marketingonline.com 4
http://core.traackr.com 4
http://www.portalos.pl 3
http://www.encarolina.com 3
http://www.newsblur.com 2
http://ebulletin.collected.info 2
http://electrosmart.com 1
http://www.diffbot.com&_=1356882912428 HTTP 1
http://www.diffbot.com&_=1356882926160 HTTP 1
http://www.diffbot.com&_=1356882943067 HTTP 1
http://us-w1.rockmelt.com 1
http://131.253.14.250 1
More...

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
  • http://www.google.com/events/io/2011/sessions/use-page-speed-to-optimize-your-web-site-for-mobile.htmlhttp://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1

Mobile Web Performance Optimization Tips and Tricks Mobile Web Performance Optimization Tips and Tricks Presentation Transcript

  • Mobile Web Performance Optimization
    Guy Podjarny, CTO
  • Agenda
    Why Web Performance Matters
    And why Mobile Web Performance Matters
    Web Performance Optimization
    How Mobile is different than Desktop
    Mobile Optimization Techniques
    Measuring Mobile Performance
    Summary
  • Why Web Performance Matters
    Site Speed Impacts Revenue
    Increases conversions and reduces abandonment, across industries
    • Site Speed Impacts Google Page Rank
    • Assumed to affect other search engines as well
    3
    Shopzilla: 5s load time improvement
    KISSMetrics: Page Abandonment vs. Load Time
  • Why Mobile Web Performance Matters
    Mobile Browsing is Exploding
    Expected to pass desktop browsing by 2014
    4
    Mobile Users are Impatient
    58% Except faster or equal speeds to desktop
    Only 11% accept real delays
  • Front-End vs. Back-End Performance
    Back-End Performance
    Time to generate page
    10% of page load time
    Front-End Performance
    Network Time
    Browser Time
    90% of page load time
    5
    Source: http://blog.newrelic.com
  • Front-End Optimization
    FEO: Front-End Optimization
    Addresses 90% of the problem
    Keys to FEO:
    Reduce Requests
    Reduce Bytes
    Do More in Parallel
    6
  • FEO in Mobile vs. Desktop
    Mobile Browsing has unique challenges
    Different types of Mobile WPO techniques
    Unique to mobile
    More important on mobile
    Tuned for mobile
    Equally important on desktop and mobile
    We’ll take a holistic approach instead
    Describe the mobile challenges
    Describe the solutions, using all of the above
    7
  • Mobile front end optimization
    8
  • Mobile Web Performance Traits
    Challenges:
    Slower & Asymmetric network
    Different Connection Model
    Weaker CPU
    Smaller Caches
    Form Factor vs. Platform Compatibility
    Opportunities:
    Smaller screen size
    Broad HTML5 Support
    Relatively new browsers (no IE6 equivalent…)
    9
  • Slower & Asymetric Network
    Download Speed 3x slower than DSL/Cable
    Upload Speed 5x slower than Cable
    Similar properties to DSL
    Low Reliability
    17% of connections fail to maintain reasonable speed
    High initial connection cost
    Average 2.5 seconds
    Blaze study shows:Number of reqs is the top slowdown factor on mobile
    Total number of bytes the top factor on desktop
    10
  • Slow Network Solution: Reduce Reqs
    Consolidate CSS & JS Files
    Inline small CSS & JS
    Download size impact is minor after gzip
    Especially useful for light mobile sites
    Embed CSS Images into CSS
    Using data URIs (data:image/png;base64,…)
    Data URIs supported by all major mobile browsers
    Only load images as they scroll into view
    Highest impact on smaller screens
    11
  • Slow Network Solution: Reduce Bytes
    Resize images to screen size
    Desktop resolution: 85% are over 1024x768
    Recent mobile resolution: 480x360(Torch), 800x480 (Nexus S), 960x640(iPhone 4),
    Shouldn’t send the same image to both
    Properly compress images
    Enable lossless compression, drop metadata
    Avoid excessive image quality, it doesn’t show
    Enable gzip Compression
    All mobile browsers that matter support gzip
    12
  • Different Connection Model
    Small Max # Connections
    Android, Blackberry, Nokia
    Less max conn on IE Mobile
    HTTP Pipelining on Android
    Only browser to do so?
    Expensive Connections
    Slower Hardware
    Slower Network
    13
  • Different Connection Model: Solutions
    Reduce domain sharding
    2-3 shards on iOS
    No sharding on other devices
    Reduce 304 responses
    Wasteful requests, wasteful connections
    Use versioning with far future expiration
    Verify support for HTTP Pipelining
    Most major web servers support it today
    14
  • Weaker CPU = Slower JavaScript
    Results of SunSpider JavaScript benchmark
    Measured in duration, lower is better
    Impacts evaluation of JavaScript too
    Estimated at 1ms per KB
    Seems to slow down image rendering as well
    Seen in Blaze Study, still being verified
    15
  • Weaker CPU Solutions
    Make JavaScript Async to Page Load
    Download, eval and exec block page load
    Async JS avoids delays to rest of page
    Remove unused code
    browser-specific code, full 3rd party libraries, Flash…
    Defer evaluation of JS not needed for load
    Fetch via XHR
    Fetch via Iframe
    Serve in HTML comment, eval on-demand
    16
  • Smaller Caches
    Persistent Cache Sizes
    After Browser Process Restart
    iOS Memory Cache varies (20-100 MB for iOS 4.3)
    Average mobile page size is ~400KB
    Mobile users browse for 74 mins/day on average
    Desktop users visit 88 sites/day, mobile likely similar
    Your page not likely to be in the cache tomorrow
    17
  • More Mobile Cache Problems
    Older phones strongly limit individual file size
    iOS 3.2 only caches pages under 25KB unzipped
    Cache eviction policy not simple
    Not a simple Least-Recently-Used
    Seem to prefer far-future expiry dates
    Android cacheability depends on device
    Above and beyond the version
    Cache eviction policy may change as well
    18
  • Smaller Cache Solution: localStorage
    Use HTML5 persistent storage for caching
    Called localStorage
    Available on all major mobile platforms
    Doesn’t expire
    Survives browser reset and power cycle
    Size limit is usually ~5MB
    Most useful for caching JavaScript & CSS files
    Using for images will quickly consume the 5MB
    Implementation Tips
    Ensure proper version control and clear old items
    Handle case of not enough space
    Ideally create a Least-Recently-Used Cache
    In addition, use far-future expiry dates
    19
  • Optimizing for Form Factor vs OS
    Mobile OSes impose technical limitations
    Notably having no or poor Flash support
    Simplifying site to match smaller screen helps
    Mobile sites are usually simpler and faster
    Tablets carry the same limitations
    But take away the “mobile site” solution
    Result: Tablets force us to truly improve perf
    But a mobile site for phones can still help usability
    20
  • Form Factor vs OS: Solutions
    Don’t just minimize content – fix performance
    Mobile websites are for usability, not perf
    Create an adaptive website
    E.g. Determine image size by client width
    Download code on-demand
    E.g. Don’t download desktop JS in mobile site
    Progressive Design helps address usability
    We focus on performance…
    21
  • Measuring mobile web perf
    22
  • Mobitest
    Mobile Web Performance Measurement
    Free Online Service: http://blaze.io/mobile/
    23
  • Different Locations
    3 Locations
    Ottawa
    Amsterdam
    Dulles
    Sponsored Non-Ottawa Locations
    Aaron Peters
    Patrick Meenan(WebPageTest)
    Interested in hosting a location?
    24
  • Different Devices
    25
  • Measures Page Load
    Measures Load Time & Page Size
    Supports Video Visualization
    Calculates Load Time Percentiles
    Based on past results, per device
    26
  • Details Results Per Run
    Supports Multiple Runs
    WPT Waterfalls
    Detailed HAR Viewer
    27
  • Mobile FEO – Summary
    Reduce Requests
    Consolidate CSS & JS
    Embed CSS images in CSS
    Inline small CSS & JS files
    Load images only when visible
    Reduce Bytes
    Resize images to screen size
    Properly compress images
    Enable gzip Compression
    Minimize Connections
    Manage domain sharding by client
    Reduce 304 responses
    Verify support for HTTP Pipelining
    Defer and minimize JavaScript
    Download and Execute JavaScript asynchronously
    Remove unused code
    Defer evaluation of JS not required during page load
    Cache using localStorage
    Primarily for CSS & JS Files
    Use far-future expiry dates
    Measure your changeshttp://blaze.io/mobile/
    28
  • Blaze Automated Front-End Optimization
    Blaze automates Front-End Optimization
    No Software, Hardware or Code Changes needed
    All the pitfalls and complexities taken care of
    Blaze optimizes Mobile & Desktop Websites
    Applying the right optimizations for each client
    Contact us for a free reporton how much faster yourmobile site can be at contact@blaze.io
    29
  • 30
    Questions?
    Contact us at
    contact@blaze.io
    Thank You!
  • External Sources
    31
    http://www.mobile-broadband-reviews.com/us-cellular-3g-speed.html
    http://www.google.com/events/io/2011/sessions/use-page-speed-to-optimize-your-web-site-for-mobile.html
    http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1
    http://www.blaze.io/mobile/13-of-top-websites-return-mobile-content-to-android-tablet/
    http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
    http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/
    http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-Rear-view-Mirror
    http://blog.newrelic.com/wp-content/uploads/infog_061611.png
    http://blog.kissmetrics.com/loading-time/