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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Web Performance Optimization Tips and Tricks

13,350
views

Published on

Published in: Technology, Design

0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,350
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
189
Comments
0
Likes
19
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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
  • Transcript

    • 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
      Summary
    • 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
      3
      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
      4
      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
      5
      Source: http://blog.newrelic.com
    • 7. Front-End Optimization
      FEO: Front-End Optimization
      Addresses 90% of the problem
      Keys to FEO:
      Reduce Requests
      Reduce Bytes
      Do More in Parallel
      6
    • 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
      7
    • 9. Mobile front end optimization
      8
    • 10. 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
    • 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
      10
    • 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
      11
    • 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
      12
    • 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
      13
    • 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
      14
    • 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
      15
    • 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
      16
    • 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
      17
    • 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
      18
    • 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
      19
    • 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
      20
    • 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…
      21
    • 23. Measuring mobile web perf
      22
    • 24. Mobitest
      Mobile Web Performance Measurement
      Free Online Service: http://blaze.io/mobile/
      23
    • 25. Different Locations
      3 Locations
      Ottawa
      Amsterdam
      Dulles
      Sponsored Non-Ottawa Locations
      Aaron Peters
      Patrick Meenan(WebPageTest)
      Interested in hosting a location?
      24
    • 26. Different Devices
      25
    • 27. Measures Page Load
      Measures Load Time & Page Size
      Supports Video Visualization
      Calculates Load Time Percentiles
      Based on past results, per device
      26
    • 28. Details Results Per Run
      Supports Multiple Runs
      WPT Waterfalls
      Detailed HAR Viewer
      27
    • 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 changeshttp://blaze.io/mobile/
      28
    • 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 contact@blaze.io
      29
    • 31. 30
      Questions?
      Contact us at
      contact@blaze.io
      Thank You!
    • 32. 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/

    ×