Your SlideShare is downloading. ×
  • Like
Mobile Web Performance Optimization Tips and Tricks
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile Web Performance Optimization Tips and Tricks



Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Mobile Web Performance Optimization
    Guy Podjarny, CTO
  • 2. 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
  • 3. Why Web Performance Matters
    Site Speed Impacts Revenue
    Increases conversions and reduces abandonment, across industries
    • Site Speed Impacts Google Page Rank
    • 4. Assumed to affect other search engines as well
    Shopzilla: 5s load time improvement
    KISSMetrics: Page Abandonment vs. Load Time
  • 5. Why Mobile Web Performance Matters
    Mobile Browsing is Exploding
    Expected to pass desktop browsing by 2014
    Mobile Users are Impatient
    58% Except faster or equal speeds to desktop
    Only 11% accept real delays
  • 6. 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
  • 7. Front-End Optimization
    FEO: Front-End Optimization
    Addresses 90% of the problem
    Keys to FEO:
    Reduce Requests
    Reduce Bytes
    Do More in Parallel
  • 8. 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
  • 9. Mobile front end optimization
  • 10. Mobile Web Performance Traits
    Slower & Asymmetric network
    Different Connection Model
    Weaker CPU
    Smaller Caches
    Form Factor vs. Platform Compatibility
    Smaller screen size
    Broad HTML5 Support
    Relatively new browsers (no IE6 equivalent…)
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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…
  • 23. Measuring mobile web perf
  • 24. Mobitest
    Mobile Web Performance Measurement
    Free Online Service:
  • 25. Different Locations
    3 Locations
    Sponsored Non-Ottawa Locations
    Aaron Peters
    Patrick Meenan(WebPageTest)
    Interested in hosting a location?
  • 26. Different Devices
  • 27. Measures Page Load
    Measures Load Time & Page Size
    Supports Video Visualization
    Calculates Load Time Percentiles
    Based on past results, per device
  • 28. Details Results Per Run
    Supports Multiple Runs
    WPT Waterfalls
    Detailed HAR Viewer
  • 29. 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 changes
  • 30. 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
  • 31. 30
    Contact us at
    Thank You!
  • 32. External Sources