Successfully reported this slideshow.

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

8

Share

Upcoming SlideShare
WebhR
WebhR
Loading in …3
×
1 of 30
1 of 30

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

  1. 1. http://www.flickr.com/photos/nzbuu/4093456029 Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? @andydavies #WebPerfDays, Amsterdam Saturday, 18 May 13
  2. 2. People like recipes http://www.flickr.com/photos/sowrey/2441134911 Saturday, 18 May 13
  3. 3. Browsers already use the network differently Saturday, 18 May 13
  4. 4. Saturday, 18 May 13
  5. 5. New network protocols are coming here http://www.flickr.com/photos/jonlachance/3427660741 Saturday, 18 May 13
  6. 6. HTTP 1.1 SPDY SPDY testing stops tracking at onload - some requests missing after onload Differences in TCP Connection Use Saturday, 18 May 13
  7. 7. Test Environment Image 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 / Cable Saturday, 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 SPDY SPDY is faster (GZIP / Keep-Alive / initcwnd 10) Saturday, 18 May 13
  10. 10. Waterfall for HTTP Test Saturday, 18 May 13
  11. 11. Waterfall for SPDY Test Remember requests after onload not tracked in test Saturday, 18 May 13
  12. 12. So which rules are most likely to be at risk? - Split dominant content domains - Reduce requests - Merging - Sprites - DataURIs Saturday, 18 May 13
  13. 13. Sharding CSS background: url() images Saturday, 18 May 13
  14. 14. Sharding CSS background: url() images Sharded page is much slower Saturday, 18 May 13
  15. 15. Connection to shard opened later New TCP connection opened Saturday, 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/166337955 Saturday, 18 May 13
  20. 20. How much do we rely on inline JavaScript? http://www.flickr.com/photos/jfraissi/6352877711 Saturday, 18 May 13
  21. 21. Content-Security-Policy “Content Security Policy, a mechanism web applications can use to mitigate a broad class of content injection vulnerabilities, such as cross-site scripting (XSS)” http://www.w3.org/TR/CSP/ Saturday, 18 May 13
  22. 22. Example Content-Security-Policy: script-src http://www.site.com Can re-enable inline scripts, but increases XSS risk Content-Security-Policy script-src 'self' Only allow scripts to be executed if they come from a designated 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 JS Saturday, 18 May 13
  24. 24. 69% of visitors support async attribute <script async src="myscript.js"><script> http://caniuse.com/script-async What 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 Podjarny Saturday, 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 experiment High Performance Browser Networking, Ilya Grigorik Saturday, 18 May 13
  27. 27. http://www.flickr.com/photos/simeon_barkas/2557059247 The end for hand crafted optimisations? Saturday, 18 May 13
  28. 28. Limits to what protocols or automation can fix Requests by Domain Bytes by Domain Saturday, 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 now Saturday, 18 May 13
  30. 30. Thank You! @andydavies hello@andydavies.me http://slideshare.net/andydavies http://www.flickr.com/photos/nzbuu/4093456029 Saturday, 18 May 13

×