The 90-Minute Mobile Optimization Life Cycle                 Velocity 2012                    Hooman Beheshti             ...
Agenda•  Why is faster better?•  Measuring performance         –  Tools         –  Challenges•  Stepwise acceleration     ...
Mobile Performance OptimizationWhy Should We Care?
Growth of Smartphone Sales(as % of total mobile phone sales)© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Au...
Traffic from Mobile Devices (2011)© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   5
Mobile Sales© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   6
Case Study© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   7
Customer Profile•     Top 200 Internet retailer, US based•     Target geography: US and Europe•     $3B in revenue•     30...
Page Views by Mobile Device© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   9
Experiment•  Induce delay on HTML         –  200msec, 500msec, 1000msec•  Apply to small percentage of traffic•  12 weeks•...
Results© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   11
Impact on Bounce Rate© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   12
Impact on Returning Visitors© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   13
More Details•  http://www.webperformancetoday.com/   2011/11/23/case-study-slow-page-load-mobile-   business-metrics/•  ht...
Performance MeasurementMeasuring Page Speed on Mobile Devices
Measurement•  Mobile measurement is still a challenge•  There are some tools out there         –  Still pretty manual     ...
Chrome Remote Debugging (ICS)•  A USB connection lets us see activity of mobile   chrome on desktop chrome•  https://devel...
iWebInspector•  Web Inspector, but for iOS Simulator•  http://www.iwebinspector.com/© 2010 Strangeloop Networks   Strangel...
Weinre (Web Inspector Remote)•  Remote debugging from the desktop for what   the phone is doing•  http://people.apache.org...
Aardwolf•  Remote JavaScript debugging (all platforms)•  http://lexandera.com/aardwolf/© 2010 Strangeloop Networks   Stran...
Mobile Perf Bookmarklet•  More focus on performance•  http://stevesouders.com/   mobileperf/mobileperfbkm.php•  Super book...
PCAP2HAR•  Turn packet captures to waterfalls•  http://pcapperf.appspot.com/© 2010 Strangeloop Networks   Strangeloop. Fas...
Real User Monitoring (RUM)•  RUM tools are increasing in availability         –  Google Analytics         –  New companies...
Webpagetest© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   24
Webpagetest’s Mobile Agent•  Based on the recently open-sourced mobitest   agent•  Interacts with the server just like a s...
Visualizing Performance© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   26
Visualizing Performance                       0      6                            12© 2010 Strangeloop Networks       Stra...
Visualizing Performance                                                                                 DNS            TTF...
Visualizing Performance                       0      6                            12© 2010 Strangeloop Networks       Stra...
Visualizing Performance                                                                       Back End: The time from when...
Visualizing Performance                                                                       Back End: The time from when...
Visualizing Performance                                                                       Back End: The time from when...
Stepwise AccelerationAccelerating a Real Site
Methodology© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   34
Setup•  All testing done on 3G from Vancouver         –  Nexus S with WPT agent         –  Rogers Network•  Traffic flows ...
Setup                              3G Connection                                                                          ...
Cooking Show Methodology*No tiger blood was used during any of these tests! © 2010 Strangeloop Networks                   ...
Let’s Pick a Site!© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   38
© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   39
A Few Points of Clarification•  We’re only choosing oreilly.com for fun•  We’re using it only to show what some   performa...
Waterfall and Key Performance Metrics© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   41
Per Object Breakdown (partial)© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   42
Content Breakdown© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   43
Problem Analysis© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   44
Performance Problems•  Too many connections© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   45
Too Many Connections          83 Connections© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   46
Connection Cost is High© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   47
Performance Problems•  Too many connections•  Too many bytes© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Au...
Too Many Bytes© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   49
Performance Problems•  Too many connections•  Too many bytes•  No CDN© 2010 Strangeloop Networks   Strangeloop. Faster Web...
Too Long to First Byte© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   51
Time to First Byte•  Every request is subjected to one round trip•  Concurrency of requests helps, as does   pipelining – ...
Performance Problems•     Too many connections•     Too many bytes•     No CDN•     Too many round trips© 2010 Strangeloop...
Too Many Round Trips© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   54
Too Many Round Trips•  Every request is still paying a penalty         –  TTFB continues to be a problem•  The higher the ...
Performance Problems•     Too many connections•     Too many bytes•     No CDN•     Too many round trips•     Poor caching...
Performance Problems•     Too many connections•     Too many bytes•     No CDN•     Too many round trips•     Poor caching...
3rd party© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   58
3rd party© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   59
3rd party                              Before Start Render© 2010 Strangeloop Networks     Strangeloop. Faster Websites. Au...
Performance Problems•     Too many connections•     Too many bytes•     No CDN•     Too many round trips•     Poor caching...
What Does it Look Like?                       http://www.youtube.com/watch?v=jo4zxzv3USg© 2010 Strangeloop Networks       ...
Summary of Key Metrics© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   63
Key Metrics – Original Site                       Round trips to onload                                                   ...
Let’s Fix It!© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   65
What Are We Going To Do?•  Stepwise acceleration         –  We’ll accelerate the page in multiple steps         –  We’ll a...
Step1: Low Hanging Fruit© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   67
Step 1: Optimizations•  Add keep-alive connections         –  Address the problem with too many connections         –  Les...
Keep-alive Connections                                                           83 Connections© 2010 Strangeloop Networks...
HTTP Compression© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   70
Step 1: What Should We Expect•  Fewer total connections•  Fewer bytes•  Impact to performance metrics         –  Fewer byt...
© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   72
Before and After                              20.52 sec                                                  15.29 sec© 2010 S...
What We Helped•  Connection Count         –  83 connection à 30 connection•  Key metrics© 2010 Strangeloop Networks   Str...
Step 1: Improvements                       Round trips to onload                                                     Bytes...
Step 1: Improvements                       Round trips to onload                                                     Bytes...
What Does it Look Like?                       http://www.youtube.com/watch?v=qMGAOqQQqvw© 2010 Strangeloop Networks       ...
Pros and Cons•  Pros         –  Really easy to do         –  Usually a single configuration option on servers,            ...
Step 2: CDN© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   79
CDN                                                                       Edge Cache                                 Edge ...
CDN•  Static resources are served from locations near   the requesting client (mobile or otherwise)•  Shorter distance bet...
What Should We Expect•  Faster average time to first byte for the objects   on the page•  Impact to performance metrics   ...
© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   83
Before and After                       15.29 sec                                                  13.7 sec© 2010 Strangelo...
Impact on TTFB                                              -39.8 %                              Avg = 655 ms             ...
What We Helped© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   86
Step 2: Improvements                       Round trips to onload                                                     Bytes...
Step 2: Improvements                       Round trips to onload                                                      Byte...
What Does it Look Like?                       http://www.youtube.com/watch?v=aiViEjuVb_g© 2010 Strangeloop Networks       ...
Pros and Cons•  Pros         –  CDNs are always good ways to reduce TTFB         –  Physics!         –  Well-established i...
CDNs for Mobile•  We got faster, but we expected more of an   improvement         –  Before: we forced requests to go from...
CDN Edge Selection - Desktop                                                                         Edge Cache           ...
CDN Edge Selection – Mobile Network                            DNS                                               Edge Cach...
CDN Edge Selection – Mobile Networks•  I have no idea how the inside of the cell   networks work!•  Test:         –  From ...
CDN Edge Selection – Mobile Networks                              CDN 1                                                   ...
CDN Edge Selection – Mobile NetworksBoth pings from phone                                    CDN 1                        ...
HERESY!!© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   97
Important Questions To Ask•  Not making outrageous claims like “CDNs aren’t   effective for mobile devices”!!•  CDNs almos...
Step 3: Mobile Front End Optimization© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   99
Mobile FEO•  Consolidation of resources         –  Images         –  CSS         –  JavaScript•  Image Compression•  Minif...
Mobile FEO© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   101
What Should We Expect•  Fewer round trips will mean the TTFB problem   should get a lot better•  Fewer bytes will mean bet...
© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   103
Before and After                                                                                9.47 sec                  ...
What We Helped© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   105
Step 3: Improvements                       Round trips to onload                                                     Bytes...
Step 3: Improvements                       Round trips to onload                                                     Bytes...
What Does it Look Like?                       http://www.youtube.com/watch?v=J_gU2Z_b-6I© 2010 Strangeloop Networks       ...
Pros and Cons•  Pros         –  Noticeable and significant benefit over easier            techniques         –  The mobile...
Step 4: More Mobile FEO© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   110
More Mobile FEO•  Deferral         –  Analytics         –  Marketing tags         –  Ads         –  Etc© 2010 Strangeloop ...
3rd Party Calls© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   112
3rd Party Calls© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   113
What Should We Expect•  Deferral of round trips to after onload•  Impact to performance metrics         –  Fewer round tri...
© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   115
Before and After© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   116
Before and After© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   117
Before and After                                                                                2.2                       ...
What We Helped© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   119
Step 4: Improvements                       Round trips to onload                                                     Bytes...
Step 4: Improvements                       Round trips to onload                                                     Bytes...
What Does it Look Like?                       http://www.youtube.com/watch?v=e0oFr0pSRn8© 2010 Strangeloop Networks       ...
Pros and Cons•  Pros         –  Gives you the control that your marketing team may            have given away!         –  ...
Quick Summary of Stepwise Acceleration© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   124
Overall Improvements  OriginalKeep-alive /Compression     CDNMobile FEO 1Mobile FEO 2 © 2010 Strangeloop Networks   Strang...
Overall Improvements                       Round trips to onload                                                      Byte...
Mobile Caching© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   127
Stating The Obvious                              Caching is Good!!!© 2010 Strangeloop Networks       Strangeloop. Faster W...
First View of a Page© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   129
Repeat View with Terrible Caching© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   130
Repeat View with Validations Only© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   131
Repeat View with Good Caching© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   132
Mobile Caching•  The primary issues with mobile caching:         –  where to put the objects         –  the size of the ca...
Mobile Cache Sizes•  Cache sizes are much smaller than desktop         –  Android (2.x) about 5-7MB         –  iOS is larg...
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-networ...
HTML5 localStorage•  W3C’s Web Storage Spec:         –  http://dev.w3.org/html5/webstorage/•  Per domain storage         –...
Bing’s Use of localStorage© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   138
localStorage as a Cache•  It gives us new space, not shared, to use for   caching•  It’s programmable and scriptable, some...
A Little Bonus!Maybe there’s another site we can accelerate…
Velocityconf.com© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   141
Waterfall and Key Performance Metrics© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   142
What Does it Look Like?                       http://www.youtube.com/watch?v=hsQnkIPTgo4© 2010 Strangeloop Networks       ...
Further Analysis© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   144
Further Analysis© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   145
Functional Acceleration•  Most images are not in the immediate viewport•  Lots of round trips blocking start render•  This...
Step 1: Deferral© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   147
Deferral•  Let’s defer:         –  3rd party calls (like before)         –  Images not in the viewport•  Also basic Mobile...
© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   149
Before and After                                                                                   2.1                  6....
Before and After                                                                                   2.1                  6....
What We Helped© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   152
What Does it Look Like?                       http://www.youtube.com/watch?v=XD6QkP0bNak© 2010 Strangeloop Networks       ...
Step 2: Less Deferral?© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   154
Let’s Look at the Page Again                              Visible                              Deferred                   ...
Let’s Look at the Page Again                              Visible                                         Make more images...
Defer less images•  Let’s not defer one   scroll of images         –  User can scroll faster and            still have the...
© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   158
Before and After© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   159
Before and After                                                                             2.18                   2.1   ...
What Does it Look Like?                       http://www.youtube.com/watch?v=eLmzd8A7RbA© 2010 Strangeloop Networks       ...
It’s Not Always About Every Metric!•  Visually, we’re about the same as full image   deferral, but 4 images are available ...
Step 3: One Last Thing© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   163
One Last Thing© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   164
One Last Thing© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   165
One Last Thing                                                                             200                            ...
One Last Thing                                                                             200                            ...
Cache the HTML•  Cache the HTML base page itself         –  Somewhere in front of the server, before the browser         –...
© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   169
Before and After© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   170
Before and After                                                            775                                           ...
Before and After             2.18                                                            1.78             sec         ...
What Does it Look Like?                       http://www.youtube.com/watch?v=gQgsxDiWqLQ© 2010 Strangeloop Networks       ...
HTML Caching•  HTML is typically dynamic         –  It can be static for short periods of time (the velocity            ho...
We Covered Everything, right?Not Quite…
Not Done Yet•  We may have made these 2 pages faster, but   there’s a lot more to mobile optimization•  Performance is not...
Site-wide Optimizations - flows                              Actual User Interaction© 2010 Strangeloop Networks        Str...
More Performance Optimizations•  Converting click events to touch events         –  Can save up to 500msec per event•  Sma...
Operational and Other Optimizations•  Hiding the URL bar•  Smart image loading for pinch to zoom         –  Automatically ...
Lessons Learned From The FieldThings you should know about mobile devices
More on Mobile Cache Behavior© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   181
Mobile Cache Behavior    User                                                                                             ...
HTTP Pipelining© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   183
Typical HTTP Operation                                               GET /thing1!                                         ...
Typical HTTP© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   185
HTTP With Pipelining                              GET /thing1 GET /thing2 GET /thing3!                                    ...
HTTP with Pipelining© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   187
Packet Drop Penalty•  Now, a packet dropped could   mean multiple HTTP requests   got dropped•  Good reading:    –  http:/...
TCP Windows© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   189
TCP’s Initial Congestion Window (init_cwnd)                                                      SYN!                     ...
TCP Windows•  Increasing init_cwnd is a common performance   recommendation         –  Google recommends 10         –  Mos...
TCP Windows•  Actual send window calculation is a bit more   complicated         –  Congestion avoidance         –  The ot...
Small Receive Window                                           SYN (Win=2920)!                                         SYN...
Rx Window examples: Windows© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   194
Rx Windows: iOS (iPhone/iPad)© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   195
Rx Windows: Android (Gingerbread)© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   196
Rx Windows: Android (ICS)© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   197
Rx Windows•  It’s still very much a good idea to have larger   init_cwnd sizes•  We should be aware of how data is sent to...
Sleeping Radios!© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   199
Connection To Cell towers•  Radios disconnect from the tower after idle time   (to conserve power) and take 1-2 seconds to...
This Could Complicate Testing                              Run 1                                                  Run 2© 2...
Waterfall Detail (Run 2)© 2010 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   202
The 2 Second Radio Thing•     Not much we can do about it•     Good lesson learned•     Need to keep this in mind as we do...
Final Thoughts(This is slide 204!!!)
Summary•  Performance matters!•  Measurement tools can be somewhat frustrating,   but they’re heading in the right directi...
Thank you." hooman@strangeloopnetworks.com" http://strangeloopnetworks.com"  Velocity Office Hours: Wednesday @2.30pm© 201...
Upcoming SlideShare
Loading in...5
×

Velocity 2012: The 90-Minute Mobile Optimization Life Cycle

10,995
-1

Published on

Strangeloop VP Technology Hooman Beheshti demonstrates – in real time – the impact of advanced mobile optimization techniques on another unsuspecting website.

Over the course of the workshop, witness the mobile optimization life cycle, from start to finish:

- Taking the “Before” shot: Choosing a guinea pig site and benchmarking its current performance, focusing on load time, start render time and round trips.
- Iterating through core best practices, including: Keep-Alive, Compression, Far Future Expiry, and Use a CDN.
- Applying a set of advanced, automated, mobile-specific FEO techniques.
- Taking the “After” shot: Analyzing results using different browsers.

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

No Downloads
Views
Total Views
10,995
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
137
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Velocity 2012: The 90-Minute Mobile Optimization Life Cycle

  1. 1. The 90-Minute Mobile Optimization Life Cycle Velocity 2012 Hooman Beheshti VP Technology, Strangeloop hooman@strangeloopnetworks.com
  2. 2. Agenda•  Why is faster better?•  Measuring performance –  Tools –  Challenges•  Stepwise acceleration –  Pick a real site, and apply step by step performance optimizations•  Lessons from the field© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2
  3. 3. Mobile Performance OptimizationWhy Should We Care?
  4. 4. Growth of Smartphone Sales(as % of total mobile phone sales)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
  5. 5. Traffic from Mobile Devices (2011)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
  6. 6. Mobile Sales© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
  7. 7. Case Study© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
  8. 8. Customer Profile•  Top 200 Internet retailer, US based•  Target geography: US and Europe•  $3B in revenue•  30,000 employees© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
  9. 9. Page Views by Mobile Device© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
  10. 10. Experiment•  Induce delay on HTML –  200msec, 500msec, 1000msec•  Apply to small percentage of traffic•  12 weeks•  Monitor impact on key business metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
  11. 11. Results© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
  12. 12. Impact on Bounce Rate© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
  13. 13. Impact on Returning Visitors© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
  14. 14. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
  15. 15. Performance MeasurementMeasuring Page Speed on Mobile Devices
  16. 16. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16
  17. 17. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 17
  18. 18. iWebInspector•  Web Inspector, but for iOS Simulator•  http://www.iwebinspector.com/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 18
  19. 19. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19
  20. 20. Aardwolf•  Remote JavaScript debugging (all platforms)•  http://lexandera.com/aardwolf/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20
  21. 21. Mobile Perf Bookmarklet•  More focus on performance•  http://stevesouders.com/ mobileperf/mobileperfbkm.php•  Super bookmarklet with lots of tools built in© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
  22. 22. PCAP2HAR•  Turn packet captures to waterfalls•  http://pcapperf.appspot.com/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22
  23. 23. Real User Monitoring (RUM)•  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)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
  24. 24. Webpagetest© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
  25. 25. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
  26. 26. Visualizing Performance© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
  27. 27. Visualizing Performance 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
  28. 28. Visualizing Performance DNS TTFB TCP Download Connection 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
  29. 29. Visualizing Performance 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
  30. 30. Visualizing Performance Back End: The time from when the request is made by the browser to last byte of the HTML response 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
  31. 31. Visualizing Performance Back End: The time from when the request is made by the browser to last byte of the HTML response Front End: Everything after the HTML arrives 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
  32. 32. Visualizing Performance Back End: The time from when the request is made by the browser to last byte of the HTML response Front End: Everything after the HTML arrives Important Timers: Start Render onLoad (Document Complete) 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32
  33. 33. Stepwise AccelerationAccelerating a Real Site
  34. 34. Methodology© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
  35. 35. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35
  36. 36. Setup 3G Connection Origin Origin Data Center© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36
  37. 37. Cooking Show Methodology*No tiger blood was used during any of these tests! © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
  38. 38. Let’s Pick a Site!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
  39. 39. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
  40. 40. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 40
  41. 41. Waterfall and Key Performance Metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 41
  42. 42. Per Object Breakdown (partial)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
  43. 43. Content Breakdown© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 43
  44. 44. Problem Analysis© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
  45. 45. Performance Problems•  Too many connections© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45
  46. 46. Too Many Connections 83 Connections© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46
  47. 47. Connection Cost is High© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47
  48. 48. Performance Problems•  Too many connections•  Too many bytes© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 48
  49. 49. Too Many Bytes© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 49
  50. 50. Performance Problems•  Too many connections•  Too many bytes•  No CDN© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50
  51. 51. Too Long to First Byte© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51
  52. 52. Time to First Byte•  Every request is subjected to one round trip•  Concurrency of requests helps, as does pipelining – but it’s still a problem –  More on pipelining later•  A bigger problem when there are more objects© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 52
  53. 53. Performance Problems•  Too many connections•  Too many bytes•  No CDN•  Too many round trips© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 53
  54. 54. Too Many Round Trips© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54
  55. 55. Too Many Round Trips•  Every request is still paying a penalty –  TTFB continues to be a problem•  The higher the latency, the bigger the problem•  Better concurrency on modern mobile browsers is helping, but not enough. This is still a huge problem© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 55
  56. 56. Performance Problems•  Too many connections•  Too many bytes•  No CDN•  Too many round trips•  Poor caching (more on this later)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 56
  57. 57. 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)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 57
  58. 58. 3rd party© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 58
  59. 59. 3rd party© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 59
  60. 60. 3rd party Before Start Render© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60
  61. 61. 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 onmobile devices© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 61
  62. 62. What Does it Look Like? http://www.youtube.com/watch?v=jo4zxzv3USg© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62
  63. 63. Summary of Key Metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63
  64. 64. Key Metrics – Original Site Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 64
  65. 65. Let’s Fix It!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65
  66. 66. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 66
  67. 67. Step1: Low Hanging Fruit© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 67
  68. 68. 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 text-based content (HTML, CSS, JS, etc)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 68
  69. 69. Keep-alive Connections 83 Connections© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 69
  70. 70. HTTP Compression© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 70
  71. 71. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 71
  72. 72. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 72
  73. 73. Before and After 20.52 sec 15.29 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 73
  74. 74. What We Helped•  Connection Count –  83 connection à 30 connection•  Key metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 74
  75. 75. Step 1: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 75
  76. 76. Step 1: Improvements Round trips to onload Bytes to onload (KB)100 100090 900 94580 80070 218 70060 60050 500 23 % 72740 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 7.738 20.52 20 7 0.679 5.231 6 15 5 4 ~9% 7.059 10 25 % 15.289 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 76
  77. 77. What Does it Look Like? http://www.youtube.com/watch?v=qMGAOqQQqvw© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 77
  78. 78. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 78
  79. 79. Step 2: CDN© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 79
  80. 80. CDN Edge Cache Edge Cache Origin Origin Edge Cache Data Center Edge Cache© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
  81. 81. CDN•  Static resources are served from locations near the requesting client (mobile or otherwise)•  Shorter distance between client and content means smaller TTFB© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 81
  82. 82. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 82
  83. 83. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 83
  84. 84. Before and After 15.29 sec 13.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 84
  85. 85. Impact on TTFB -39.8 % Avg = 655 ms Avg = 394 ms© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 85
  86. 86. What We Helped© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 86
  87. 87. Step 2: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 87
  88. 88. Step 2: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 7.059 15.289 20 7 0.814 1.552 6 15 5 4 12% 6.245 10 10 % 13.737 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88
  89. 89. What Does it Look Like? http://www.youtube.com/watch?v=aiViEjuVb_g© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 89
  90. 90. Pros and Cons•  Pros –  CDNs are always good ways to reduce TTFB –  Physics! –  Well-established industry; lots and lots of vendors•  Cons –  Can sometimes be costly –  Why wasn’t it faster?© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 90
  91. 91. CDNs for Mobile•  We got faster, but we expected more of an improvement –  Before: we forced requests to go from west coast to east coast –  After: let the CDNs naturally select closest edge•  Wondering out loud… –  Is edge selection for mobile devices not as effective? –  3G more of a mystery than WiFi© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 91
  92. 92. CDN Edge Selection - Desktop Edge Cache Edge Cache DNS Resolver CDN DNS Brains Origin Origin Edge Cache Data Center Edge Cache© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 92
  93. 93. CDN Edge Selection – Mobile Network DNS Edge Cache Resolver Edge Cache ? CDN DNS Brains Origin Origin Edge Cache Data Center Edge Cache DNS Resolver© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 93
  94. 94. CDN Edge Selection – Mobile Networks•  I have no idea how the inside of the cell networks work!•  Test: –  From the phone (on 3G) ping 2 CDN names –  From the phone, ping the IP address the CDN resolved for my desktop© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 94
  95. 95. CDN Edge Selection – Mobile Networks CDN 1 CDN 2© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 95
  96. 96. CDN Edge Selection – Mobile NetworksBoth pings from phone CDN 1 Ping cdn.domain.com Both pings from phone CDN 2 Ping IP that CDN picked for desktop © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 96
  97. 97. HERESY!!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 97
  98. 98. Important Questions To Ask•  Not making outrageous claims like “CDNs aren’t effective for mobile devices”!!•  CDNs almost surely deploy servers near cell network exit points. But, what if most of the latency is inside the cell network?•  Does the meaning for “closeness” change for mobile?•  More research is necessary…© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 98
  99. 99. Step 3: Mobile Front End Optimization© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 99
  100. 100. Mobile FEO•  Consolidation of resources –  Images –  CSS –  JavaScript•  Image Compression•  Minification –  JavaScript –  CSS•  Optimal use of localStorage (more on this later)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 100
  101. 101. Mobile FEO© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 101
  102. 102. 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 to performance metrics –  Reduction in round trips –  Reduction in byte count (on top of HTTP Compression) –  Better start render time –  Better document complete time© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 102
  103. 103. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 103
  104. 104. Before and After 9.47 sec 13.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 104
  105. 105. What We Helped© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 105
  106. 106. Step 3: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 106
  107. 107. Step 3: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 800 72770 92 70060 600 310 6450 50040 40030 300 417 2820 20010 70 % 100 43% 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6.245 13.737 6 2.589 15 4.260 5 4 10 3 3.656 9.477 2 5 1 41% 31 % 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 107
  108. 108. What Does it Look Like? http://www.youtube.com/watch?v=J_gU2Z_b-6I© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 108
  109. 109. 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)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 109
  110. 110. Step 4: More Mobile FEO© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 110
  111. 111. More Mobile FEO•  Deferral –  Analytics –  Marketing tags –  Ads –  Etc© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 111
  112. 112. 3rd Party Calls© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 112
  113. 113. 3rd Party Calls© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 113
  114. 114. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 114
  115. 115. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 115
  116. 116. Before and After© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 116
  117. 117. Before and After© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 117
  118. 118. Before and After 2.2 sec 3.6 sec 9.47 sec 5.56 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 118
  119. 119. What We Helped© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 119
  120. 120. Step 4: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 120
  121. 121. Step 4: Improvements Round trips to onload Bytes to onload (KB)100 100090 64 % 900 34 %80 80070 70060 60050 500 28 41740 40030 18 300 14220 20010 100 10 275 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 41% 41 % 20 7 6 15 5 4 3.656 9.477 10 3 3.92 1.493 2 5 1 2.163 5.557 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 121
  122. 122. What Does it Look Like? http://www.youtube.com/watch?v=e0oFr0pSRn8© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 122
  123. 123. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 123
  124. 124. Quick Summary of Stepwise Acceleration© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 124
  125. 125. Overall Improvements OriginalKeep-alive /Compression CDNMobile FEO 1Mobile FEO 2 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 125
  126. 126. Overall Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 89 % 71 % 80070 70060 60050 93 500 94540 40030 83 670 30020 20010 100 10 275 0 0 Start Render (sec) Doc Complete (sec) 9 25 72 % 8 7 20 73 % 6 15 5 7.738 20.52 4 10 3 5.575 14.963 2 5 1 2.163 5.557 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 126
  127. 127. Mobile Caching© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 127
  128. 128. Stating The Obvious Caching is Good!!!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 128
  129. 129. First View of a Page© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 129
  130. 130. Repeat View with Terrible Caching© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 130
  131. 131. Repeat View with Validations Only© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 131
  132. 132. Repeat View with Good Caching© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 132
  133. 133. 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/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 133
  134. 134. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 134
  135. 135. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 135
  136. 136. 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© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 136
  137. 137. 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!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 137
  138. 138. Bing’s Use of localStorage© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 138
  139. 139. localStorage as a Cache•  It gives us new space, not shared, to use for caching•  It’s programmable and scriptable, something we’ve never had with HTTP object caches•  Typically good for caching CSS and JavaScript, especially those used site-wide•  Could also be used for small images –  Using DataURI format for images© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 139
  140. 140. A Little Bonus!Maybe there’s another site we can accelerate…
  141. 141. Velocityconf.com© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 141
  142. 142. Waterfall and Key Performance Metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 142
  143. 143. What Does it Look Like? http://www.youtube.com/watch?v=hsQnkIPTgo4© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 143
  144. 144. Further Analysis© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 144
  145. 145. Further Analysis© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 145
  146. 146. Functional Acceleration•  Most images are not in the immediate viewport•  Lots of round trips blocking start render•  This time, we’ll accelerate with an eye towards: –  Improving start render time –  Making the page available quicker© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 146
  147. 147. Step 1: Deferral© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 147
  148. 148. Deferral•  Let’s defer: –  3rd party calls (like before) –  Images not in the viewport•  Also basic Mobile FEO –  Image compression and minification –  Some consolidation of CSS and JavaScript•  What should we expect –  Better start render time –  Better document complete time –  Better visual response – snappier page© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 148
  149. 149. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 149
  150. 150. Before and After 2.1 6.2 sec sec 12.61 sec 4.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 150
  151. 151. Before and After 2.1 6.2 sec sec 12.61 sec 4.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 151
  152. 152. What We Helped© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 152
  153. 153. What Does it Look Like? http://www.youtube.com/watch?v=XD6QkP0bNak© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 153
  154. 154. Step 2: Less Deferral?© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 154
  155. 155. Let’s Look at the Page Again Visible Deferred Images© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 155
  156. 156. Let’s Look at the Page Again Visible Make more images available before onload Deferred Images© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 156
  157. 157. Defer less images•  Let’s not defer one scroll of images –  User can scroll faster and still have the next screen’s images available•  If the visual response is just as fast, then this is a good option if we expect people to scroll on our site right away© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 157
  158. 158. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 158
  159. 159. Before and After© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 159
  160. 160. Before and After 2.18 2.1 sec sec 4.7 sec 5.3 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 160
  161. 161. What Does it Look Like? http://www.youtube.com/watch?v=eLmzd8A7RbA© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 161
  162. 162. It’s Not Always About Every Metric!•  Visually, we’re about the same as full image deferral, but 4 images are available 2 seconds earlier•  Some of this can be done programmatically – dynamic decisions made by the browser –  Figure out coordinates for image; choose to download now or later© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 162
  163. 163. Step 3: One Last Thing© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 163
  164. 164. One Last Thing© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 164
  165. 165. One Last Thing© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 165
  166. 166. One Last Thing 200 msec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 166
  167. 167. One Last Thing 200 msec 775 msec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 167
  168. 168. Cache the HTML•  Cache the HTML base page itself –  Somewhere in front of the server, before the browser –  In this case, it’s a feature of the service•  Eliminate server processing time –  Serve the HTML faster –  Improve TTFB of the page and all other performance metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 168
  169. 169. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 169
  170. 170. Before and After© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 170
  171. 171. Before and After 775 msec 236 msec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 171
  172. 172. Before and After 2.18 1.78 sec sec 5.3 sec 3.2 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 172
  173. 173. What Does it Look Like? http://www.youtube.com/watch?v=gQgsxDiWqLQ© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 173
  174. 174. HTML Caching•  HTML is typically dynamic –  It can be static for short periods of time (the velocity home page is a good example) –  Some technologies allow fragmentation of the page into static and dynamic portions•  HTML can be user-agent specific –  For velocity’s home page, the same URL generates different pages depending on the browser•  With HTML Caching, we need extra smarts: –  Granular expiration –  Browser aware –  Careful with personalized content© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 174
  175. 175. We Covered Everything, right?Not Quite…
  176. 176. Not Done Yet•  We may have made these 2 pages faster, but there’s a lot more to mobile optimization•  Performance is not only about pages –  We should always think about the site•  Optimizations should include operational improvements specific to mobile devices© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 176
  177. 177. Site-wide Optimizations - flows Actual User Interaction© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 177
  178. 178. More Performance Optimizations•  Converting click events to touch events –  Can save up to 500msec per event•  Smart use of localStorage –  Versioning –  Dynamic decisions based on state of localStorage•  Redirect suppression –  Sites that initially redirect to mobile version incur a costly roundtrip•  3G vs WiFi –  navigator.connection.type – Android only for now© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 178
  179. 179. Operational and Other Optimizations•  Hiding the URL bar•  Smart image loading for pinch to zoom –  Automatically detect pinch and grab higher resolution image•  Viewport optimizations –  E.g. Automatic detection of viewport•  Mobile meta tags•  Great presentation from Max Firtman: –  http://velocityconf.com/velocity2011/public/schedule/ detail/19976© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 179
  180. 180. Lessons Learned From The FieldThings you should know about mobile devices
  181. 181. More on Mobile Cache Behavior© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 181
  182. 182. Mobile Cache Behavior User With Last-Modified Device No Cache Headers* With Last-Modified* With max-age* Action and max-age* Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache New window or tab iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cacheExit browser, Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache lock phone,unlock phone,open browser iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache Kill browser,launch browser iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cacheReboot phone iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache After page If-Modified-Since and If-Modified-Since and Android (Nexus S, v2.3.7) All from cache All from cache loads, click Cache-Control:max-age=0 Cache-Control:max-age=0 URL and hit enter iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache Android (Nexus S, v2.3.7) Cache-Control:no-cache Cache-Control:no-cache Cache-Control:no-cache Cache-Control:no-cache Refresh after page loads If-Modified-Since and If-Modified-Since and iOS (iPhone 3GS, v5.1.1) Cache-Control:max-age=0 Cache-Control:max-age=0 Cache-Control:max-age=0 Cache-Control:max-age=0 *Images only: filled cache through a page that referenced ~2MB of images, all with some or no caching headers; then performed user action © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 182
  183. 183. HTTP Pipelining© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 183
  184. 184. Typical HTTP Operation GET /thing1! 200 STATUS OK!T GET /thing2!IM Client Server 200 STATUS OK!E GET /thing3! 200 STATUS OK!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 184
  185. 185. Typical HTTP© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 185
  186. 186. HTTP With Pipelining GET /thing1 GET /thing2 GET /thing3! 200 STATUS OK!TI 200 STATUS OK!M Client ServerE 200 STATUS OK!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 186
  187. 187. HTTP with Pipelining© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 187
  188. 188. Packet Drop Penalty•  Now, a packet dropped could mean multiple HTTP requests got dropped•  Good reading: –  http://www.guypo.com/ mobile/http-pipelining-big-in- mobile/•  Things to know –  Make sure everything in the middle supports pipelining –  Be aware of HOL blocking© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 188
  189. 189. TCP Windows© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 189
  190. 190. TCP’s Initial Congestion Window (init_cwnd) SYN! SYN/ACK! ACK! GET /!TI Client ServerM 200 STATUS OK (+Data)! (init_cwnd =6)E Data! Data! Data! Data! Data!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 190
  191. 191. TCP Windows•  Increasing init_cwnd is a common performance recommendation –  Google recommends 10 –  Most high performance proxies and load balancers have init_cwnd of much higher than the default 2 or 3 segments –  Nice study on CDN init_cwnd values: •  http://www.cdnplanet.com/blog/initcwnd-settings-major-cdn- providers/•  cwnd during the rest of the connection depends on slow start and congestion avoidance stages of the connection© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 191
  192. 192. TCP Windows•  Actual send window calculation is a bit more complicated –  Congestion avoidance –  The other side’s receive window•  The simplified formula: Min(cwnd, receive_window)! Sender (internal calculation) Receiver (internal calculation and advertised in each segment)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 192
  193. 193. Small Receive Window SYN (Win=2920)! SYN/ACK (Win=xxx)! ACK (Win=2920)! GET / (Win=2920)!TI Client ServerM 200 STATUS OK (+Data)! (init_cwnd =6)E Data! Wait for ACK!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 193
  194. 194. Rx Window examples: Windows© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 194
  195. 195. Rx Windows: iOS (iPhone/iPad)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 195
  196. 196. Rx Windows: Android (Gingerbread)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 196
  197. 197. Rx Windows: Android (ICS)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 197
  198. 198. Rx Windows•  It’s still very much a good idea to have larger init_cwnd sizes•  We should be aware of how data is sent to mobile devices•  Android’s move to 14600 (10 x max MSS) in ICS is great!•  Great reading: –  http://www.cdnplanet.com/blog/tune-tcp-initcwnd- for-optimum-performance/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 198
  199. 199. Sleeping Radios!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 199
  200. 200. Connection To Cell towers•  Radios disconnect from the tower after idle time (to conserve power) and take 1-2 seconds to reconnect•  Excellent reading from Steve: •  http://www.stevesouders.com/blog/2011/09/21/making-a- mobile-connection/ •  Test it: http://stevesouders.com/ms/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 200
  201. 201. This Could Complicate Testing Run 1 Run 2© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 201
  202. 202. Waterfall Detail (Run 2)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 202
  203. 203. The 2 Second Radio Thing•  Not much we can do about it•  Good lesson learned•  Need to keep this in mind as we do more testing•  Optimization opportunity –  You can have small keep-alive requests flow between the phone and the site, as a user navigates through your pages –  Use this carefully à battery and data usage© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 203
  204. 204. Final Thoughts(This is slide 204!!!)
  205. 205. Summary•  Performance matters!•  Measurement tools can be somewhat frustrating, but they’re heading in the right direction•  Mobile performance optimization is a huge area of opportunity –  Lots of room for acceleration of mobile sites –  New considerations for form factor and operational functionality•  For those of us used to testing desktop browsers, there are new gotchas and fun lessons to learn!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 205
  206. 206. Thank you." hooman@strangeloopnetworks.com" http://strangeloopnetworks.com"  Velocity Office Hours: Wednesday @2.30pm© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 206
  1. A particular slide catching your eye?

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

×