Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?
-
Upload
andy-davies -
Category
Technology
-
view
2.129 -
download
1
description
Transcript of Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?
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
What if …
http://www.flickr.com/photos/willypayne/3116395089
… dataURIs are an anti-pattern?
Saturday, 19 October 13
The ‘humble’ dataURI
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)
=
Saturday, 19 October 13
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
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
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
We have our rules…http://www.flickr.com/photos/sowrey/2441134911
Saturday, 19 October 13
and we love recipes…http://www.flickr.com/photos/mrsmagic/2247364228
Saturday, 19 October 13
But, what happens when things change?
Saturday, 19 October 13
Browsers already use the network differently
Saturday, 19 October 13
Saturday, 19 October 13
Saturday, 19 October 13
New network protocols are coming here
http://www.flickr.com/photos/jonlachance/3427660741Saturday, 19 October 13
HTTP 1.1
SPDY
Differences in TCP Connection Use
Saturday, 19 October 13
New Standards - opportunities and challengesSaturday, 19 October 13
How much do we rely on inline JavaScript?
http://www.flickr.com/photos/jfraissi/6352877711Saturday, 19 October 13
74% of visitors support async attribute
<script async src="myscript.js"><script>
http://caniuse.com/script-asyncSaturday, 19 October 13
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
XSSSaturday, 19 October 13
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
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
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
Tested some scenarios, measured the outcomes
http://www.flickr.com/photos/chandramarsono/4324373384Saturday, 19 October 13
Test Environment
- EC2 - Medium Instance - Dublin
- Apache 2.2- GZIP- Keep-Alive- mod_pagespeed- mod_spdy
- WepPageTest, Dulles / Chrome / Cable
Saturday, 19 October 13
http://www.html5xcss3.com/2012/05/html5-template-interio.html
Off the shelf website templateSaturday, 19 October 13
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
Waterfall for HTTP Test
Saturday, 19 October 13
Waterfall for SPDY Test
Saturday, 19 October 13
So which rules are most likely to be at risk?
- Split dominant content domains
- Reduce requests- Merging- Sprites- DataURIs
Saturday, 19 October 13
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
Connection to shard opened later
New TCP connectionopened
Saturday, 19 October 13
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
Sharding <img src=
Sharded page is marginally faster???
Sharded
Not Sharded
0s 1s 2s 3s 4s 5s 6s 7s 8s
Saturday, 19 October 13
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
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
Hmm… How do we move forward?http://www.flickr.com/photos/atoach/6014917153
Saturday, 19 October 13
# 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
http://www.flickr.com/photos/simeon_barkas/2557059247
Will complexity lead to the end of hand crafted optimisations?
Saturday, 19 October 13
Start experimenting
http://www.flickr.com/photos/giosp/3933753363Saturday, 19 October 13
Need to improve our toolkit
http://www.flickr.com/photos/alexander/1146677Saturday, 19 October 13
Limits to what protocols or automation can fix
Requests by Domain Bytes by Domain
Saturday, 19 October 13
Thank You!@andydavies
[email protected] http://slideshare.net/andydavies
http://www.flickr.com/photos/nzbuu/4093456029Saturday, 19 October 13