Published on November 15, 2013
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? @andydavies #VelocityConf, London http://www.ﬂickr.com/photos/nzbuu/4093456029
What if … … dataURIs are an anti-pattern? http://www.ﬂickr.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.ﬂickr.com/photos/marc-ﬂores/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.ﬂickr.com/photos/irishwildcat/3020466221
We have our rules… http://www.ﬂickr.com/photos/sowrey/2441134911
and we love recipes… http://www.ﬂickr.com/photos/mrsmagic/2247364228
But, what happens when things change?
Browsers already use the network differently
New network protocols are coming here http://www.ﬂickr.com/photos/jonlachance/3427660741
Differences in TCP Connection Use HTTP 1.1 SPDY
New Standards - opportunities and challenges
73% of visitors support async attribute <script async src="myscript.js"><script> http://caniuse.com/script-async
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.ﬂickr.com/photos/uwwresnet/5881727219
Tested some scenarios, measured the outcomes http://www.ﬂickr.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 ﬁrefox 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.ﬂickr.com/photos/atoach/6014917153
It’s only going to get more complex “Situational Performance Optimization, The Next Frontier” Guy Podjarny http://www.ﬂickr.com/photos/freshwater2006/693945631
Will complexity lead to the end of hand crafted optimisations? http://www.ﬂickr.com/photos/simeon_barkas/2557059247
Start experimenting, share your experiences http://www.ﬂickr.com/photos/giosp/3933753363
We need to improve our toolkit http://www.ﬂickr.com/photos/alexander/1146677
SPDY waterfall in Firefox! We need to help ﬁx things like this https://github.com/WPO-Foundation/webpagetest
Limits to what new protocols or automation can fix Requests by Domain Bytes by Domain
Thank You! @andydavies email@example.com http://slideshare.net/andydavies http://www.ﬂickr.com/photos/nzbuu/4093456029
... of the original performance rules and as the web changes further will our current good practices ... Good Practices... Tomorrow’s Performance Anti ...
The Future of Web Performance: Are Today's Good Practices Tomorrow's Performance Anti-Patterns? As mobile usage rises, browsers evolve and new protocols ...
The Future of Web Performance: Are Today's Good Practices Tomorrow's Performance Anti-Patterns? with Andy Davies, Associate Director - Web ...
Venue, hotel & travel information for O'Reilly Velocity Conference ... Web Performance; ... Are Today’s Good Practices... Tomorrow’s ...
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? ... Patterns and Practices in Mobile SSO. 1 views. Patterns of agricultural ...
View 28390 Good Practices posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Slide 1 www.bcfsolutions.net October 2011 Today’s Answer, Tomorrow’s Solutions Slide 2 Small Business with Six Divisions BCF is a devoted and trusted ...