Mobile Performance Trends and PredictionsJoshua Bixby
Agenda         Market         Why is faster better?         Measuring performance         Visualizing performance         ...
Growth of Smartphone Sales(as % of total mobile phone sales)© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Au...
Traffic from Mobile Devices (2011)© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   4
© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   5
Customer Profile        Top 200 Internet retailer, US based        Target geography: US and Europe        $3B in revenue  ...
Page Views by Mobile Device© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   7
Experiment        Induce delay on HTML        200msec, 500msec, 1000msec        Apply to small percentage of traffic      ...
Results© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   9
Impact on Bounce Rate© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   10
Impact on Returning Visitors© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   11
More Details          http://www.webperformancetoday.com/        2011/11/23/case-study-slow-page-load-mobile-        busin...
Performance MeasurementMeasuring Page Speed on Mobile Devices© 2012 Strangeloop Networks   Strangeloop. Faster Websites. A...
Measurement        Mobile measurement is still a challenge          •    There are some tools out there          •    Stil...
Chrome Remote Debugging (ICS)        A USB connection lets us see activity of mobile        Chrome on desktop Chrome      ...
iWebInspector        Web Inspector, but for iOS Simulator               http://www.iwebinspector.com/© 2012 Strangeloop Ne...
Weinre (Web Inspector Remote)        Remote debugging from the desktop for what the        phone is doing          http://...
Aardwolf        Remote JavaScript debugging (all platforms)         http://lexandera.com/aardwolf/© 2012 Strangeloop Netwo...
Mobile Perf Bookmarklet           More focus on performance         http://stevesouders.com/mobileperf/        mobileperfb...
PCAP2HAR        Turn packet captures to waterfalls               http://pcapperf.appspot.com/© 2012 Strangeloop Networks  ...
Real User Monitoring (RUM)         RUM tools are increasing in availability          • Google Analytics          • New com...
WebPagetest© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   22
WebPagetest’s Mobile Agent        Based on the recently open-sourced Mobitest        agent        Interacts with the serve...
Visualizing Performance© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   24
Visualizing Performance© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   25
Visualizing Performance© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   26
Visualizing Performance© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   27
Visualizing Performance© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   28
Visualizing Performance© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   29
How does data work on a mobile network?© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   30
Stepwise AccelerationAccelerating a Real Site© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   31
Methodology© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   32
Setup        All testing done on 3G from Vancouver          • Nexus S with WPT agent          • Rogers Network        Traf...
Setup© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   34
© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   35
A Few Points of Clarification        We’re only choosing oreilly.com for fun        We’re using it only to show what some ...
Summary of Key Metrics© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   37
Performance Problems        Too many connections        Too many bytes        No CDN        Too many round trips        Po...
What Does It Look Like?                        http://www.youtube.com/watch?v=jo4zxzv3USg                                 ...
Key Metrics – Original Site© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   40
Let’s Fix it!© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   41
What Are We Going To Do?        Stepwise acceleration          • We’ll accelerate the page in multiple steps          • We...
Step 1: Low Hanging Fruit© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   43
Step 1: Optimizations        Add keep-alive connections          • Address the problem with too many connections          ...
Keep-alive Connections© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   45
HTTP Compression© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   46
Step 1: What Should We Expect        Fewer total connections        Fewer bytes        Impact to performance metrics      ...
Before and After© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   48
What We Helped        Connection Count          • 83 connection  30 connection        Key metrics© 2012 Strangeloop Netwo...
Step 1: Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   50
Step 1: Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   51
What Does It Look Like?                        http://www.youtube.com/watch?v=qMGAOqQQqvw© 2012 Strangeloop Networks      ...
Pros and Cons        Pros          • Really easy to do          • Usually a single configuration option on servers,       ...
Step 2: CDN© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   54
CDN© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   55
CDN        Static resources are served from locations near        the requesting client (mobile or otherwise)        Short...
What Should We Expect        Faster average time to first byte for the objects        on the page        Impact to perform...
Before and After© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   58
Impact on TTFB© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   59
What We Helped© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   60
Step 2: Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   61
Step 2: Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   62
What Does It Look Like?                              http://www.youtube.com/watch?v=aiViEjuVb_g© 2012 Strangeloop Networks...
Pros and Cons        Pros          • CDNs are always a good way to reduce TTFB          • Physics!          • Well-establi...
CDN and speed© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   65
Step 3: Mobile Front End Optimization© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   66
Mobile FEO        Consolidation of resources          • Images          • CSS          • JavaScript        Image Compressi...
Mobile FEO© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   68
What Should We Expect        Fewer round trips will mean the TTFB problem        should get a lot better        Fewer byte...
Before and After© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   70
What We Helped© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   71
Step 3: Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   72
Step 3: Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   73
What Does It Look Like?                              http://www.youtube.com/watch?v=J_gU2Z_b-6I© 2012 Strangeloop Networks...
Pros and Cons        Pros          • Noticeable and significant benefit over easier            techniques          • The m...
Step 4: More Mobile FEO© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   76
More Mobile FEO        Deferral          •    Analytics          •    Marketing tags          •    Ads          •    Etc.©...
3rd Party Calls© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   78
3rd Party Calls© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   79
What Should We Expect        Deferral of round trips to after onload        Impact to performance metrics          •    Fe...
Before and After© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   81
Before and After© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   82
Before and After© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   83
What We Helped© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   84
Step 4: Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   85
Step 4: Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   86
What Does It Look Like?                              http://www.youtube.com/watch?v=e0oFr0pSRn8© 2012 Strangeloop Networks...
Pros and Cons        Pros          • Gives you the control that your marketing team may            have given away!       ...
Quick Summary of Stepwise Acceleration© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   89
Overall Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   90
Overall Improvements© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   91
Mobile Caching© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   92
Stating the Obvious                    Caching is good!!!© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Autom...
First View of a Page© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   94
Repeat View with Terrible Caching© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   95
Repeat View with Validations Only© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   96
Repeat View with Good Caching© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   97
Mobile Caching        The primary issues with mobile caching          • Where to put the objects          • The size of th...
Mobile Cache Sizes        Cache sizes are much smaller than desktop          • Android (2.x) about 5-7MB          • iOS is...
Some More Findings        Android          • Firefox and Opera (Gingerbread): ~10MB          • Stock browser in ICS: 25MB ...
Comparison to Desktop        IE          • http://blogs.msdn.com/b/ie/archive/2011/03/17/            internet-explorer-9-n...
HTML5 localStorage        W3C’s Web Storage Spec:          – http://dev.w3.org/html5/webstorage/        Per domain storage...
Evolution© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   103
Evolution: Mobile Networks© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   104
The Phone matters© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   105
Browsers: Slow and Steady Growth© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   106
Responsive Images© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   107
Make Full Site Available© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   108
Full Site Matters© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   109
Full Site Matters© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   110
Enhance with Javascript© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   111
State of Mobile Ecommerce PerformanceHow fast do leading m-commerce sites load for real userson 3G?© 2012 Strangeloop Netw...
Report: Key Areas of Exploration• Speed          – How fast are web pages on a 3G connection?• Devices          – What is ...
© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   114
© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   115
© 2012 Strangeloop Networks  2011                        Strangeloop. Faster Websites. Automatically.                     ...
© 2012 Strangeloop Networks  2011                        Strangeloop. Faster Websites. Automatically.                     ...
Upcoming SlideShare
Loading in...5
×

O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions

6,757

Published on

Slides from Strangeloop president Joshua Bixby's O'Reilly webcast:

At Velocity EU in October 2012, Strangeloop president Joshua Bixby will unveil findings from the first comprehensive study ever conducted of mobile performance over 3G networks. In this webcast, Joshua talks about why measuring 3G performance is important, and what kind of evolution we can expect to see from mobile networks, browsers, site development, and performance best practices in 2013.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,757
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
107
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Twitter @joshuabixby\n
  • Twitter @joshuabixby\n
  • O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions

    1. 1. Mobile Performance Trends and PredictionsJoshua Bixby
    2. 2. Agenda Market Why is faster better? Measuring performance Visualizing performance How does data work on a mobile network? Best practices in action Evolution Strangeloop study: State of Mobile Ecommerce Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2
    3. 3. Growth of Smartphone Sales(as % of total mobile phone sales)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 3
    4. 4. Traffic from Mobile Devices (2011)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
    5. 5. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
    6. 6. Customer Profile Top 200 Internet retailer, US based Target geography: US and Europe $3B in revenue 30,000 employees© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
    7. 7. Page Views by Mobile Device© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
    8. 8. Experiment Induce delay on HTML 200msec, 500msec, 1000msec Apply to small percentage of traffic 12 weeks Monitor impact on key business metrics© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
    9. 9. Results© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
    10. 10. Impact on Bounce Rate© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
    11. 11. Impact on Returning Visitors© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
    12. 12. More Details http://www.webperformancetoday.com/ 2011/11/23/case-study-slow-page-load-mobile- business-metrics/ http://velocityconf.com/velocityeu/public/ schedule/detail/21632© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
    13. 13. Performance MeasurementMeasuring Page Speed on Mobile Devices© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
    14. 14. Measurement Mobile measurement is still a challenge • There are some tools out there • Still pretty manual • Less about performance and more about functionality • Lots of simulation More complicated because of the number of different platforms and devices that we may need to cover Things are getting better© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
    15. 15. Chrome Remote Debugging (ICS) A USB connection lets us see activity of mobile Chrome on desktop Chrome https://developers.google.com/chrome/mobile/ docs/debugging© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15
    16. 16. iWebInspector Web Inspector, but for iOS Simulator http://www.iwebinspector.com/© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16
    17. 17. Weinre (Web Inspector Remote) Remote debugging from the desktop for what the phone is doing http://people.apache.org/~pmuellr/weinre/ docs/latest/Home.html© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 17
    18. 18. Aardwolf Remote JavaScript debugging (all platforms) http://lexandera.com/aardwolf/© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 18
    19. 19. Mobile Perf Bookmarklet More focus on performance http://stevesouders.com/mobileperf/ mobileperfbkm.php Super bookmarklet with lots of tools built in© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19
    20. 20. PCAP2HAR Turn packet captures to waterfalls http://pcapperf.appspot.com/© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20
    21. 21. Real User Monitoring (RUM) RUM tools are increasing in availability • Google Analytics • New companies and solutions emerging RUM tools are increasing in availability • Google Analytics • New companies and solutions emerging Measurement on actual devices, for real users Need lots of data to draw conclusions • And must have a way to deal with outliers Navigation Timing (only in Chrome for Android right now)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
    22. 22. WebPagetest© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22
    23. 23. WebPagetest’s Mobile Agent Based on the recently open-sourced Mobitest agent Interacts with the server just like a standard desktop agent Available for Android and iOS • Still in the early stages, but key metrics are reported • Some features (like scripting) don’t work • Cold cache tests and videos are working fine • For iOS, it uses UIWebView rather than Safari Even with the limitations, still the best tool for getting a feel for mobile performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
    24. 24. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
    25. 25. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
    26. 26. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
    27. 27. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
    28. 28. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
    29. 29. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
    30. 30. How does data work on a mobile network?© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
    31. 31. Stepwise AccelerationAccelerating a Real Site© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
    32. 32. Methodology© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32
    33. 33. Setup All testing done on 3G from Vancouver • Nexus S with WPT agent • Rogers Network Traffic flows through Strangeloop service • We apply optimizations in the path • Used host file entries since DNS overwrite isn’t available on the agent The phone does everything else© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 33
    34. 34. Setup© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
    35. 35. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35
    36. 36. A Few Points of Clarification We’re only choosing oreilly.com for fun We’re using it only to show what some performance problems are – this doesn’t mean the site has these problems The real site is somewhere in the middle of this blue bar© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36
    37. 37. Summary of Key Metrics© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
    38. 38. Performance Problems Too many connections Too many bytes No CDN Too many round trips Poor caching (more on this later) 3rd party calls (marketing tags, analytics, etc) Similar to desktop, but impact is different on mobile devices© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
    39. 39. What Does It Look Like? http://www.youtube.com/watch?v=jo4zxzv3USg Text© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
    40. 40. Key Metrics – Original Site© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 40
    41. 41. Let’s Fix it!© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 41
    42. 42. What Are We Going To Do? Stepwise acceleration • We’ll accelerate the page in multiple steps • We’ll add techniques at each step and evaluate the performance impact We’ll start with the easy stuff and get more advanced with each step Try to make the page as fast as possible© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
    43. 43. Step 1: Low Hanging Fruit© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 43
    44. 44. Step 1: Optimizations Add keep-alive connections • Address the problem with too many connections • Lessen the impact of TCP connection setup Add HTTP compression • One way to reduce bytes, and an easy one • We’ll compress the text-based content (HTML, CSS, JS, etc)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
    45. 45. Keep-alive Connections© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45
    46. 46. HTTP Compression© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46
    47. 47. Step 1: What Should We Expect Fewer total connections Fewer bytes Impact to performance metrics • Fewer bytes to onload • No change to roundtrips • Better document complete time • Better start render© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47
    48. 48. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 48
    49. 49. What We Helped Connection Count • 83 connection  30 connection Key metrics© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 49
    50. 50. Step 1: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50
    51. 51. Step 1: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51
    52. 52. What Does It Look Like? http://www.youtube.com/watch?v=qMGAOqQQqvw© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 52
    53. 53. Pros and Cons Pros • Really easy to do • Usually a single configuration option on servers, proxies, or load balancers • Great bang for the buck Cons • It’s still slow! • These are, by themselves, just not enough© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 53
    54. 54. Step 2: CDN© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54
    55. 55. CDN© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 55
    56. 56. CDN Static resources are served from locations near the requesting client (mobile or otherwise) Shorter distance between client and content means smaller TTFB© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 56
    57. 57. What Should We Expect Faster average time to first byte for the objects on the page Impact to performance metrics • No change to round trips • No change to byte count • Better start render time • Better document complete time© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 57
    58. 58. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 58
    59. 59. Impact on TTFB© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 59
    60. 60. What We Helped© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60
    61. 61. Step 2: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 61
    62. 62. Step 2: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62
    63. 63. What Does It Look Like? http://www.youtube.com/watch?v=aiViEjuVb_g© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63
    64. 64. Pros and Cons Pros • CDNs are always a good way to reduce TTFB • Physics! • Well-established industry; lots and lots of vendors Cons • Can sometimes be costly • Why wasn’t it faster?© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 64
    65. 65. CDN and speed© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65
    66. 66. Step 3: Mobile Front End Optimization© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 66
    67. 67. Mobile FEO Consolidation of resources • Images • CSS • JavaScript Image Compression Minification • JavaScript • CSS Optimal use of localStorage (more on this later)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 67
    68. 68. Mobile FEO© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 68
    69. 69. What Should We Expect Fewer round trips will mean the TTFB problem should get a lot better Fewer bytes will mean better performance • Images (from image compression) • CSS/JS (from minification) Impact on performance metrics • Reduction in round trips • Reduction in byte count (on top of HTTP Compression) • Better start render time • Better document complete time© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 69
    70. 70. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 70
    71. 71. What We Helped© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 71
    72. 72. Step 3: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 72
    73. 73. Step 3: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 73
    74. 74. What Does It Look Like? http://www.youtube.com/watch?v=J_gU2Z_b-6I© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 74
    75. 75. Pros and Cons Pros • Noticeable and significant benefit over easier techniques • The mobile form factor lets us be more aggressive with some of the techniques • Smart use of localStorage Cons • It’s not easy! • Techniques must survive site changes (regression)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 75
    76. 76. Step 4: More Mobile FEO© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 76
    77. 77. More Mobile FEO Deferral • Analytics • Marketing tags • Ads • Etc.© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 77
    78. 78. 3rd Party Calls© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 78
    79. 79. 3rd Party Calls© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 79
    80. 80. What Should We Expect Deferral of round trips to after onload Impact to performance metrics • Fewer round trips to onload • Fewer bytes to onload • Better start render time • Better document complete time© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
    81. 81. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 81
    82. 82. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 82
    83. 83. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 83
    84. 84. What We Helped© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 84
    85. 85. Step 4: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 85
    86. 86. Step 4: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 86
    87. 87. What Does It Look Like? http://www.youtube.com/watch?v=e0oFr0pSRn8© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 87
    88. 88. Pros and Cons Pros • Gives you the control that your marketing team may have given away! • Solves a very difficult problem, resulting in improvements to all key metrics • Much better visual experience Cons • Again, not easy! • Must understand what the purpose of each 3rd party call is© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88
    89. 89. Quick Summary of Stepwise Acceleration© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 89
    90. 90. Overall Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 90
    91. 91. Overall Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 91
    92. 92. Mobile Caching© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 92
    93. 93. Stating the Obvious Caching is good!!!© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 93
    94. 94. First View of a Page© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 94
    95. 95. Repeat View with Terrible Caching© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 95
    96. 96. Repeat View with Validations Only© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 96
    97. 97. Repeat View with Good Caching© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 97
    98. 98. Mobile Caching The primary issues with mobile caching • Where to put the objects • The size of the cache Some good reading • Device Cache Sizes - Wink toolkit study: http://www.winktoolkit.org/blog/204/ - YUI study: http://www.yuiblog.com/blog/2010/06/28/mobile- browser-cache-limits/ - Blaze study: http://www.guypo.com/mobile/understanding-mobile- cache-sizes/ • Individual Files - Steve Souders: http://www.stevesouders.com/blog/2010/07/12/ mobile-cache-file-sizes/ - More from YUI: http://www.yuiblog.com/blog/2010/07/12/mobile- browser-cache-limits-revisited/© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 98
    99. 99. Mobile Cache Sizes Cache sizes are much smaller than desktop • Android (2.x) about 5-7MB • iOS is larger (>50MB) We need to think about: • Total cache size limit • Individual object size limit • HTML pages User behavior may affect what’s served from cache Things are getting better, but not at the pace we want© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 99
    100. 100. Some More Findings Android • Firefox and Opera (Gingerbread): ~10MB • Stock browser in ICS: 25MB • Chrome on ICS: much larger and based on amount of space available • http://gent.ilcore.com/2012/02/chrome-fast-for-android.html Android and iOS • When there’s room available, saw aggressive caching behavior© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 100
    101. 101. Comparison to Desktop IE • http://blogs.msdn.com/b/ie/archive/2011/03/17/ internet-explorer-9-network-performance- improvements.aspx • Defaults • IE 6/7/8 1/32 of disk, cap of 50MB • IE9  1/256 of disk (bigger disks), cap of 250MB Chrome – Spot checked: >300MB Firefox – Spot checked: >700MB From Steve: http://stevesouders.com/cache.php© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 101
    102. 102. HTML5 localStorage W3C’s Web Storage Spec: – http://dev.w3.org/html5/webstorage/ Per domain storage • Key/value pairs • ~2.5MB • Test it: http://dev-test.nemikor.com/web-storage/ support-test/ Programmable • It can be used for whatever you want • This includes acting as a programmable object cache!© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 102
    103. 103. Evolution© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 103
    104. 104. Evolution: Mobile Networks© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 104
    105. 105. The Phone matters© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 105
    106. 106. Browsers: Slow and Steady Growth© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 106
    107. 107. Responsive Images© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 107
    108. 108. Make Full Site Available© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 108
    109. 109. Full Site Matters© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 109
    110. 110. Full Site Matters© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 110
    111. 111. Enhance with Javascript© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 111
    112. 112. State of Mobile Ecommerce PerformanceHow fast do leading m-commerce sites load for real userson 3G?© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 112
    113. 113. Report: Key Areas of Exploration• Speed – How fast are web pages on a 3G connection?• Devices – What is faster: Android or iPhone? – What is faster: iPad or Android tablet?• Usability – Do companies have mobile-specific sites? – Who do they serve them to? – Do they let people view the full site from a mobile site?© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 113
    114. 114. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 114
    115. 115. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 115
    116. 116. © 2012 Strangeloop Networks 2011 Strangeloop. Faster Websites. Automatically. Strangeloop. Faster Websites. Automatically. 116
    117. 117. © 2012 Strangeloop Networks 2011 Strangeloop. Faster Websites. Automatically. Strangeloop. Faster Websites. Automatically. 117
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×