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

hello@andydavies.me http://slideshare.net/andydavies

http://www.flickr.com/photos/nzbuu/4093456029Saturday, 19 October 13