SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?
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?
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?
Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?
1.
Are Today’s Good Practices…
Tomorrow’s Performance Anti-Patterns?
@andydavies
#VelocityConf, New York
http://www.flickr.com/photos/nzbuu/4093456029
Saturday, 19 October 13
2.
What if …
… dataURIs are an anti-pattern?
http://www.flickr.com/photos/willypayne/3116395089
Saturday, 19 October 13
3.
The ‘humble’ dataURI
url(data:image/
png;base64,iVBORw0KGgoAAAANSUh
EUgAAABkAAAAZCAMAAADzN3VRAAAAG
XRFWHRTb2Z0d2FyZQBBZG9iZSBJbWF
nZVJlYWR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUeNpiYBg
Fo2AwAIAAAwACigABtnCV2AAAAABJR
U5ErkJggg==)
Saturday, 19 October 13
=
4.
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
5.
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!
Saturday, 19 October 13
6.
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
Saturday, 19 October 13
7.
We have our rules…
http://www.flickr.com/photos/sowrey/2441134911
Saturday, 19 October 13
8.
and we love recipes…
http://www.flickr.com/photos/mrsmagic/2247364228
Saturday, 19 October 13
9.
But, what happens when things change?
Saturday, 19 October 13
10.
Browsers already use the network differently
Saturday, 19 October 13
13.
New network protocols are coming here
http://www.flickr.com/photos/jonlachance/3427660741
Saturday, 19 October 13
14.
Differences in TCP Connection Use
HTTP 1.1
SPDY
Saturday, 19 October 13
15.
New Standards - opportunities and challenges
Saturday, 19 October 13
16.
How much do we rely on inline JavaScript?
http://www.flickr.com/photos/jfraissi/6352877711
Saturday, 19 October 13
17.
74% of visitors support async attribute
<script async src="myscript.js"><script>
http://caniuse.com/script-async
Saturday, 19 October 13
18.
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
20.
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
21.
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'
Saturday, 19 October 13
22.
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
23.
Tested some scenarios, measured the outcomes
http://www.flickr.com/photos/chandramarsono/4324373384
Saturday, 19 October 13
25.
Off the shelf website template
http://www.html5xcss3.com/2012/05/html5-template-interio.html
Saturday, 19 October 13
26.
Minimal Optimisations - HTTP 1.1 vs SPDY
0s
1s
2s
3s
4s
HTTP
SPDY
SPDY is faster
(GZIP / Keep-Alive / initcwnd 10)
Saturday, 19 October 13
5s
6s
27.
Waterfall for HTTP Test
Saturday, 19 October 13
28.
Waterfall for SPDY Test
Saturday, 19 October 13
29.
So which rules are most likely to be at risk?
- Split dominant content domains
- Reduce requests
- Merging
- Sprites
- DataURIs
Saturday, 19 October 13
30.
Sharding CSS background: url() images
0s
1s
2s
3s
4s
5s
Sharded
Not
Sharded
Sharded page is much slower
Saturday, 19 October 13
6s
7s
8s
31.
Connection to shard opened later
New TCP connection
opened
Saturday, 19 October 13
32.
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
Saturday, 19 October 13
33.
Sharding <img src=
0s
1s
2s
3s
4s
5s
6s
Sharded
Not
Sharded
Sharded page is marginally faster???
Saturday, 19 October 13
7s
8s
34.
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
35.
It’s only going to get more complex
“Situational Performance Optimization, The Next Frontier”
Guy Podjarny
http://www.flickr.com/photos/freshwater2006/693945631
Saturday, 19 October 13
36.
Hmm… How do we move forward?
http://www.flickr.com/photos/atoach/6014917153
Saturday, 19 October 13
37.
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
Saturday, 19 October 13
38.
Will complexity lead to the end of hand crafted optimisations?
http://www.flickr.com/photos/simeon_barkas/2557059247
Saturday, 19 October 13
39.
Start experimenting
http://www.flickr.com/photos/giosp/3933753363
Saturday, 19 October 13
40.
Need to improve our toolkit
http://www.flickr.com/photos/alexander/1146677
Saturday, 19 October 13
41.
Limits to what protocols or automation can fix
Requests by Domain
Saturday, 19 October 13
Bytes by Domain