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

  • 1,579 views
Uploaded on

Talk from WebPerfDays in Amsterdam, May 2013

Talk from WebPerfDays in Amsterdam, May 2013

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,579
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. http://www.flickr.com/photos/nzbuu/4093456029Are Today’s Good Practices…Tomorrow’s Performance Anti-Patterns?@andydavies#WebPerfDays, AmsterdamSaturday, 18 May 13
  • 2. People like recipeshttp://www.flickr.com/photos/sowrey/2441134911Saturday, 18 May 13
  • 3. Browsers already use the network differentlySaturday, 18 May 13
  • 4. Saturday, 18 May 13
  • 5. New network protocols are coming herehttp://www.flickr.com/photos/jonlachance/3427660741Saturday, 18 May 13
  • 6. HTTP 1.1SPDYSPDY testing stops tracking at onload - some requests missing after onloadDifferences in TCP Connection UseSaturday, 18 May 13
  • 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. Minimal Optimisations - HTTP 1.1 vs SPDY(GZIP / Keep-Alive / initcwnd 10)Saturday, 18 May 13
  • 9. Minimal Optimisations - HTTP 1.1 vs SPDYSPDY is faster(GZIP / Keep-Alive / initcwnd 10)Saturday, 18 May 13
  • 10. Waterfall for HTTP TestSaturday, 18 May 13
  • 11. Waterfall for SPDY TestRemember requests after onload not tracked in testSaturday, 18 May 13
  • 12. So which rules are most likely to be at risk?- Split dominant content domains- Reduce requests- Merging- Sprites- DataURIsSaturday, 18 May 13
  • 13. Sharding CSS background: url() imagesSaturday, 18 May 13
  • 14. Sharding CSS background: url() imagesSharded page is much slowerSaturday, 18 May 13
  • 15. Connection to shard opened laterNew TCP connectionopenedSaturday, 18 May 13
  • 16. Sharding <img src=Saturday, 18 May 13
  • 17. Sharding <img src=Sharded page is marginally (0.5s) faster!Saturday, 18 May 13
  • 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. What about the traditional CDN?http://www.flickr.com/photos/jvk/166337955Saturday, 18 May 13
  • 20. How much do we rely on inline JavaScript?http://www.flickr.com/photos/jfraissi/6352877711Saturday, 18 May 13
  • 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. 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. 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. 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. “Situational Performance Optimization,The Next Frontier”http://calendar.perfplanet.com/2012/situational-performance-optimization-the-next-frontier/Guy PodjarnySaturday, 18 May 13
  • 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. http://www.flickr.com/photos/simeon_barkas/2557059247The end for hand crafted optimisations?Saturday, 18 May 13
  • 28. Limits to what protocols or automation can fixRequests by Domain Bytes by DomainSaturday, 18 May 13
  • 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. Thank You!@andydavieshello@andydavies.mehttp://slideshare.net/andydavieshttp://www.flickr.com/photos/nzbuu/4093456029Saturday, 18 May 13