are today’s good practices... tomorrow’s performance anti-patterns?
DESCRIPTION
The web is ever changing… browsers are evolving, new protocols are emerging and mobile continues its relentless rise. We’re already starting to bend some of the original performance rules and as the web changes further will our current good practices last, or will some become barriers that hinder performance?TRANSCRIPT
![Page 1: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/nzbuu/4093456029
Are Today’s Good Practices…Tomorrow’s Performance Anti-Patterns?
@andydavies#VelocityConf, New York
Saturday, 19 October 13
![Page 2: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/2.jpg)
What if …
http://www.flickr.com/photos/willypayne/3116395089
… dataURIs are an anti-pattern?
Saturday, 19 October 13
![Page 3: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/3.jpg)
The ‘humble’ dataURI
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)
=
Saturday, 19 October 13
![Page 4: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/4.jpg)
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 Saturday, 19 October 13
![Page 5: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/5.jpg)
1. Take 50 icons2. Create 50 stylesheets, each with one more dataURI than
previous3. Create matching HTML file for each stylesheet4. Test them all!
Saturday, 19 October 13
![Page 6: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/6.jpg)
Larger CSS download == longer time to RenderStart
500
625
750
875
1000
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
Ren
derS
tart
- T
TFB
(m
s)
Number of Sprites
Saturday, 19 October 13
![Page 7: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/7.jpg)
We have our rules…http://www.flickr.com/photos/sowrey/2441134911
Saturday, 19 October 13
![Page 8: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/8.jpg)
and we love recipes…http://www.flickr.com/photos/mrsmagic/2247364228
Saturday, 19 October 13
![Page 9: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/9.jpg)
But, what happens when things change?
Saturday, 19 October 13
![Page 10: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/10.jpg)
Browsers already use the network differently
Saturday, 19 October 13
![Page 11: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/11.jpg)
Saturday, 19 October 13
![Page 12: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/12.jpg)
Saturday, 19 October 13
![Page 13: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/13.jpg)
New network protocols are coming here
http://www.flickr.com/photos/jonlachance/3427660741Saturday, 19 October 13
![Page 14: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/14.jpg)
HTTP 1.1
SPDY
Differences in TCP Connection Use
Saturday, 19 October 13
![Page 15: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/15.jpg)
New Standards - opportunities and challengesSaturday, 19 October 13
![Page 16: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/16.jpg)
How much do we rely on inline JavaScript?
http://www.flickr.com/photos/jfraissi/6352877711Saturday, 19 October 13
![Page 17: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/17.jpg)
74% of visitors support async attribute
<script async src="myscript.js"><script>
http://caniuse.com/script-asyncSaturday, 19 October 13
![Page 18: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/18.jpg)
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>
Saturday, 19 October 13
![Page 19: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/19.jpg)
XSSSaturday, 19 October 13
![Page 20: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/20.jpg)
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, 19 October 13
![Page 21: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/21.jpg)
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, 19 October 13
![Page 22: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/22.jpg)
What other performance enhancements do we rely on JS for?
Guardian split page into
- Content - Enhancements - Leftovers
Others rely on scroll handlers for lazyload
Saturday, 19 October 13
![Page 23: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/23.jpg)
Tested some scenarios, measured the outcomes
http://www.flickr.com/photos/chandramarsono/4324373384Saturday, 19 October 13
![Page 24: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/24.jpg)
Test Environment
- EC2 - Medium Instance - Dublin
- Apache 2.2- GZIP- Keep-Alive- mod_pagespeed- mod_spdy
- WepPageTest, Dulles / Chrome / Cable
Saturday, 19 October 13
![Page 25: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/25.jpg)
http://www.html5xcss3.com/2012/05/html5-template-interio.html
Off the shelf website templateSaturday, 19 October 13
![Page 26: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/26.jpg)
Minimal Optimisations - HTTP 1.1 vs SPDY
SPDY is faster
(GZIP / Keep-Alive / initcwnd 10)
0s 1s 2s 3s 4s 5s 6s
HTTP
SPDY
Saturday, 19 October 13
![Page 27: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/27.jpg)
Waterfall for HTTP Test
Saturday, 19 October 13
![Page 28: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/28.jpg)
Waterfall for SPDY Test
Saturday, 19 October 13
![Page 29: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/29.jpg)
So which rules are most likely to be at risk?
- Split dominant content domains
- Reduce requests- Merging- Sprites- DataURIs
Saturday, 19 October 13
![Page 30: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/30.jpg)
Sharding CSS background: url() images
Sharded page is much slower
0s 1s 2s 3s 4s 5s 6s 7s 8s
Sharded
Not Sharded
Saturday, 19 October 13
![Page 31: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/31.jpg)
Connection to shard opened later
New TCP connectionopened
Saturday, 19 October 13
![Page 32: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/32.jpg)
New connection shouldn’t have been opened
http://www.stevesouders.com/blog/2013/09/05/domain-sharding-revisited/#comment-60146
“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
Saturday, 19 October 13
![Page 33: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/33.jpg)
Sharding <img src=
Sharded page is marginally faster???
Sharded
Not Sharded
0s 1s 2s 3s 4s 5s 6s 7s 8s
Saturday, 19 October 13
![Page 34: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/34.jpg)
Other tests carried out
- Sharding JS / CSS Horrible
- Merging CSS Slower
- Server Push No noticable difference
- jQuery from Google CDN Suprisingly quick
Saturday, 19 October 13
![Page 35: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/35.jpg)
It’s only going to get more complex
http://www.flickr.com/photos/freshwater2006/693945631
“Situational Performance Optimization, The Next Frontier”
Guy Podjarny
Saturday, 19 October 13
![Page 36: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/36.jpg)
Hmm… How do we move forward?http://www.flickr.com/photos/atoach/6014917153
Saturday, 19 October 13
![Page 37: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/37.jpg)
# 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 GrigorikSaturday, 19 October 13
![Page 38: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/38.jpg)
http://www.flickr.com/photos/simeon_barkas/2557059247
Will complexity lead to the end of hand crafted optimisations?
Saturday, 19 October 13
![Page 39: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/39.jpg)
Start experimenting
http://www.flickr.com/photos/giosp/3933753363Saturday, 19 October 13
![Page 40: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/40.jpg)
Need to improve our toolkit
http://www.flickr.com/photos/alexander/1146677Saturday, 19 October 13
![Page 41: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/41.jpg)
Limits to what protocols or automation can fix
Requests by Domain Bytes by Domain
Saturday, 19 October 13
![Page 42: Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?](https://reader034.vdocuments.us/reader034/viewer/2022051818/54b732c44a7959cd448b45a9/html5/thumbnails/42.jpg)
Thank You!@andydavies
[email protected] http://slideshare.net/andydavies
http://www.flickr.com/photos/nzbuu/4093456029Saturday, 19 October 13