• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
 

Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?

on

  • 3,342 views

Exploring how our optimisations may have to change as protocols, browsers and standards change

Exploring how our optimisations may have to change as protocols, browsers and standards change

Statistics

Views

Total Views
3,342
Views on SlideShare
2,743
Embed Views
599

Actions

Likes
13
Downloads
42
Comments
0

12 Embeds 599

http://tech.m6web.fr 348
http://velocityconf.com 98
https://twitter.com 70
http://localhost 43
http://local.tryghost.org 14
http://feedly.com 9
http://m6web.github.io 8
http://leed.galsungen.net 4
http://mail.qq.com 2
http://cloud.feedly.com 1
http://www.linkedin.com 1
http://newsblur.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? Presentation Transcript

  • Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? @andydavies #VelocityConf, London http://www.flickr.com/photos/nzbuu/4093456029
  • What if … … dataURIs are an anti-pattern? http://www.flickr.com/photos/willypayne/3116395089
  • The ‘humble’ dataURI url(data:image/ png;base64,iVBORw0KGgoAAAANSUh EUgAAABkAAAAZCAMAAADzN3VRAAAAG XRFWHRTb2Z0d2FyZQBBZG9iZSBJbWF nZVJlYWR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeNpiYBg Fo2AwAIAAAwACigABtnCV2AAAAABJR U5ErkJggg==) =
  • dataURIs for CSS images Makes a blocking resource larger by including non-blocking resources • Browser can’t start rendering page until CSS has downloaded * • Images don’t block Do they have the same caching lifetime? * Some browsers defer download of CSS when media query doesn’t match
  • Test the theory http://www.flickr.com/photos/marc-flores/8367323660
  • 1. Take 50 icons 2. Create 50 stylesheets, each with one more dataURI than previous 3. Create matching HTML file for each stylesheet 4. Test them all!
  • Larger CSS download = longer time to RenderStart RenderStart - TTFB (ms) 1000 875 750 625 500 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 Number of Sprites
  • This got me thinking! http://www.flickr.com/photos/irishwildcat/3020466221
  • We have our rules… http://www.flickr.com/photos/sowrey/2441134911
  • and we love recipes… http://www.flickr.com/photos/mrsmagic/2247364228
  • But, what happens when things change?
  • Browsers already use the network differently
  • New network protocols are coming here http://www.flickr.com/photos/jonlachance/3427660741
  • Differences in TCP Connection Use HTTP 1.1 SPDY
  • New Standards - opportunities and challenges
  • How much do we rely on inline JavaScript? http://www.flickr.com/photos/jfraissi/6352877711
  • 73% of visitors support async attribute <script async src="myscript.js"><script> http://caniuse.com/script-async
  • Yet, this is how we typically asynchronously load scripts <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>
  • XSS
  • 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/
  • Example Only allow scripts to be executed if they come from a designated host, disables inline scripts by default. Content-Security-Policy: script-src http://www.site.com Can re-enable inline scripts, but increases XSS risk Content-Security-Policy script-src 'self'
  • What other performance enhancements do we rely on inline JS for? Guardian split page into - Content - Enhancements - Leftovers Others rely on scroll handlers for lazyloading
  • Resource Priorities - adds lazyload and postpone attributes
  • So what about the network? http://www.flickr.com/photos/uwwresnet/5881727219
  • Tested some scenarios, measured the outcomes http://www.flickr.com/photos/chandramarsono/4324373384
  • Test Environment - EC2 - Medium Instance - Dublin - Apache 2.2 - GZIP - Keep-Alive - mod_pagespeed - mod_spdy - WepPageTest, Dulles / Chrome / Cable
  • Off the shelf website template http://www.html5xcss3.com/2012/05/html5-template-interio.html
  • Minimal Optimisations - HTTP 1.1 vs SPDY 0s 1s 2s 3s 4s HTTP SPDY SPDY is faster (GZIP / Keep-Alive / initcwnd 10) 5s 6s
  • Waterfall for HTTP Test
  • Waterfall for SPDY Test
  • So which rules are most likely to be at risk? - Split dominant content domains - Reduce requests - Merging - Sprites - DataURIs
  • Sharding CSS background: url() images 0s 1s 2s 3s 4s 5s Sharded Not Sharded Sharded page is much slower 6s 7s 8s
  • Connection to shard opened later New TCP connection opened
  • New connection shouldn’t have been opened “Both chrome and firefox will automatically unshard transparently for you when using spdy and both of the sharded hosts are at the same IP address and covered under one SSL cert (e.g. *.example.com).” Patrick McManus, Mozilla http://www.stevesouders.com/blog/2013/09/05/domain-sharding-revisited/#comment-60146
  • Sharding <img src= 0s 1s 2s 3s 4s 5s 6s Sharded Not Sharded Sharded page is marginally faster??? 7s 8s
  • Other tests carried out - Sharding JS / CSS Horrible - Merging CSS Slower - Server Push No noticable difference - jQuery from Google CDN Suprisingly quick
  • Hmm… How do we move forward? http://www.flickr.com/photos/atoach/6014917153
  • It’s only going to get more complex “Situational Performance Optimization, The Next Frontier” Guy Podjarny http://www.flickr.com/photos/freshwater2006/693945631
  • Will complexity lead to the end of hand crafted optimisations? http://www.flickr.com/photos/simeon_barkas/2557059247
  • mod_pagespeed & mod_spdy == tools to experiment # 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> High Performance Browser Networking, Ilya Grigorik
  • Start experimenting, share your experiences http://www.flickr.com/photos/giosp/3933753363
  • We need to improve our toolkit http://www.flickr.com/photos/alexander/1146677
  • SPDY waterfall in Firefox! We need to help fix things like this https://github.com/WPO-Foundation/webpagetest
  • Limits to what new protocols or automation can fix Requests by Domain Bytes by Domain
  • http://www.flickr.com/photos/rkramer62/4028530901
  • Thank You! @andydavies hello@andydavies.me http://slideshare.net/andydavies http://www.flickr.com/photos/nzbuu/4093456029