http://www.flickr.com/photos/nzbuu/4093456029Are Today’s Good Practices…Tomorrow’s Performance Anti-Patterns?@andydavies#We...
People like recipeshttp://www.flickr.com/photos/sowrey/2441134911Saturday, 18 May 13
Browsers already use the network differentlySaturday, 18 May 13
Saturday, 18 May 13
New network protocols are coming herehttp://www.flickr.com/photos/jonlachance/3427660741Saturday, 18 May 13
HTTP 1.1SPDYSPDY testing stops tracking at onload - some requests missing after onloadDifferences in TCP Connection UseSat...
Test EnvironmentImage Credit-Amazon EC2 - Small Instance - Dublin-Apache 2.2- GZIP- Keep-Alive- mod_pagespeed- mod_spdy-‘O...
Minimal Optimisations - HTTP 1.1 vs SPDY(GZIP / Keep-Alive / initcwnd 10)Saturday, 18 May 13
Minimal Optimisations - HTTP 1.1 vs SPDYSPDY is faster(GZIP / Keep-Alive / initcwnd 10)Saturday, 18 May 13
Waterfall for HTTP TestSaturday, 18 May 13
Waterfall for SPDY TestRemember requests after onload not tracked in testSaturday, 18 May 13
So which rules are most likely to be at risk?- Split dominant content domains- Reduce requests- Merging- Sprites- DataURIs...
Sharding CSS background: url() imagesSaturday, 18 May 13
Sharding CSS background: url() imagesSharded page is much slowerSaturday, 18 May 13
Connection to shard opened laterNew TCP connectionopenedSaturday, 18 May 13
Sharding <img src=Saturday, 18 May 13
Sharding <img src=Sharded page is marginally (0.5s) faster!Saturday, 18 May 13
Other tests carried out- Sharding JS- Merging CSS- Merging JS- Server Push(Fonts, third-party JS not yet tested)Saturday, ...
What about the traditional CDN?http://www.flickr.com/photos/jvk/166337955Saturday, 18 May 13
How much do we rely on inline JavaScript?http://www.flickr.com/photos/jfraissi/6352877711Saturday, 18 May 13
Content-Security-Policy“Content Security Policy, a mechanismweb applications can use to mitigate abroad class of content i...
ExampleContent-Security-Policy: script-src http://www.site.comCan re-enable inline scripts, but increases XSS riskContent-...
Typical async script loader<script type="text/javascript">function() {var js = document.createElement(script);js.async = t...
69% of visitors support async attribute<script async src="myscript.js"><script>http://caniuse.com/script-asyncWhat other t...
“Situational Performance Optimization,The Next Frontier”http://calendar.perfplanet.com/2012/situational-performance-optimi...
# Disable concatenation for SPDY/HTTP 2.0 clients<ModPagespeedIf spdy>ModPagespeedDisableFilters combine_css,combine_javas...
http://www.flickr.com/photos/simeon_barkas/2557059247The end for hand crafted optimisations?Saturday, 18 May 13
Limits to what protocols or automation can fixRequests by Domain Bytes by DomainSaturday, 18 May 13
- Some good practices will become obselete-Testing tools have a few issues- Browsers may need better loading hints- Start ...
Thank You!@andydavieshello@andydavies.mehttp://slideshare.net/andydavieshttp://www.flickr.com/photos/nzbuu/4093456029Saturd...
Upcoming SlideShare
Loading in...5
×

Are Today's Good Practices… Tomorrow's Performance Anti-Patterns

1,764

Published on

Talk from WebPerfDays in Amsterdam, May 2013

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

No Downloads
Views
Total Views
1,764
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Are Today's Good Practices… Tomorrow's Performance Anti-Patterns"

  1. 1. http://www.flickr.com/photos/nzbuu/4093456029Are Today’s Good Practices…Tomorrow’s Performance Anti-Patterns?@andydavies#WebPerfDays, AmsterdamSaturday, 18 May 13
  2. 2. People like recipeshttp://www.flickr.com/photos/sowrey/2441134911Saturday, 18 May 13
  3. 3. Browsers already use the network differentlySaturday, 18 May 13
  4. 4. Saturday, 18 May 13
  5. 5. New network protocols are coming herehttp://www.flickr.com/photos/jonlachance/3427660741Saturday, 18 May 13
  6. 6. HTTP 1.1SPDYSPDY testing stops tracking at onload - some requests missing after onloadDifferences in TCP Connection UseSaturday, 18 May 13
  7. 7. Test EnvironmentImage Credit-Amazon EC2 - Small Instance - Dublin-Apache 2.2- GZIP- Keep-Alive- mod_pagespeed- mod_spdy-‘Off the shelf’ web site template-WepPageTest, Dulles / Chrome / CableSaturday, 18 May 13
  8. 8. Minimal Optimisations - HTTP 1.1 vs SPDY(GZIP / Keep-Alive / initcwnd 10)Saturday, 18 May 13
  9. 9. Minimal Optimisations - HTTP 1.1 vs SPDYSPDY is faster(GZIP / Keep-Alive / initcwnd 10)Saturday, 18 May 13
  10. 10. Waterfall for HTTP TestSaturday, 18 May 13
  11. 11. Waterfall for SPDY TestRemember requests after onload not tracked in testSaturday, 18 May 13
  12. 12. So which rules are most likely to be at risk?- Split dominant content domains- Reduce requests- Merging- Sprites- DataURIsSaturday, 18 May 13
  13. 13. Sharding CSS background: url() imagesSaturday, 18 May 13
  14. 14. Sharding CSS background: url() imagesSharded page is much slowerSaturday, 18 May 13
  15. 15. Connection to shard opened laterNew TCP connectionopenedSaturday, 18 May 13
  16. 16. Sharding <img src=Saturday, 18 May 13
  17. 17. Sharding <img src=Sharded page is marginally (0.5s) faster!Saturday, 18 May 13
  18. 18. Other tests carried out- Sharding JS- Merging CSS- Merging JS- Server Push(Fonts, third-party JS not yet tested)Saturday, 18 May 13
  19. 19. What about the traditional CDN?http://www.flickr.com/photos/jvk/166337955Saturday, 18 May 13
  20. 20. How much do we rely on inline JavaScript?http://www.flickr.com/photos/jfraissi/6352877711Saturday, 18 May 13
  21. 21. Content-Security-Policy“Content Security Policy, a mechanismweb applications can use to mitigate abroad class of content injectionvulnerabilities, such as cross-sitescripting (XSS)”http://www.w3.org/TR/CSP/Saturday, 18 May 13
  22. 22. ExampleContent-Security-Policy: script-src http://www.site.comCan re-enable inline scripts, but increases XSS riskContent-Security-Policy script-src selfOnly allow scripts to be executed if they come from adesignated host, disables inline scripts by default.Saturday, 18 May 13
  23. 23. Typical async script loader<script type="text/javascript">function() {var js = document.createElement(script);js.async = true;js.src = myscript.js;var e = document.getElementsByTagName(script)[0];e.parentNode.insertBefore(js, first);})();</script>Relies on inline JSSaturday, 18 May 13
  24. 24. 69% of visitors support async attribute<script async src="myscript.js"><script>http://caniuse.com/script-asyncWhat other techniques rely on inline JS?Saturday, 18 May 13
  25. 25. “Situational Performance Optimization,The Next Frontier”http://calendar.perfplanet.com/2012/situational-performance-optimization-the-next-frontier/Guy PodjarnySaturday, 18 May 13
  26. 26. # Disable concatenation for SPDY/HTTP 2.0 clients<ModPagespeedIf spdy>ModPagespeedDisableFilters combine_css,combine_javascript</ModPagespeedIf># Shard assets for HTTP 1.x clients only<ModPagespeedIf !spdy>ModPagespeedShardDomain www.site.com s1.site.com,s2.site.com</ModPagespeedIf>mod_pagespeed & mod_spdy = tools to experimentHigh Performance Browser Networking, Ilya GrigorikSaturday, 18 May 13
  27. 27. http://www.flickr.com/photos/simeon_barkas/2557059247The end for hand crafted optimisations?Saturday, 18 May 13
  28. 28. Limits to what protocols or automation can fixRequests by Domain Bytes by DomainSaturday, 18 May 13
  29. 29. - Some good practices will become obselete-Testing tools have a few issues- Browsers may need better loading hints- Start experimenting nowSaturday, 18 May 13
  30. 30. Thank You!@andydavieshello@andydavies.mehttp://slideshare.net/andydavieshttp://www.flickr.com/photos/nzbuu/4093456029Saturday, 18 May 13

×