Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?

47 %
53 %
Information about Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?

Published on November 15, 2013

Author: AndyDavies



Exploring how our optimisations may have to change as protocols, browsers and standards change

Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? @andydavies #VelocityConf, London

What if … … dataURIs are an anti-pattern?


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

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!

We have our rules…

and we love recipes…

But, what happens when things change?

Browsers already use the network differently

New network protocols are coming here

Differences in TCP Connection Use HTTP 1.1 SPDY

New Standards - opportunities and challenges

How much do we rely on inline JavaScript?

73% of visitors support async attribute <script async src="myscript.js"><script>

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>


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)”

Example Only allow scripts to be executed if they come from a designated host, disables inline scripts by default. Content-Security-Policy: script-src 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?

Tested some scenarios, measured the outcomes

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

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 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. *” Patrick McManus, Mozilla

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?

It’s only going to get more complex “Situational Performance Optimization, The Next Frontier” Guy Podjarny

Will complexity lead to the end of hand crafted optimisations?

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, </ModPagespeedIf> High Performance Browser Networking, Ilya Grigorik

Start experimenting, share your experiences

We need to improve our toolkit

SPDY waterfall in Firefox! We need to help fix things like this

Limits to what new protocols or automation can fix Requests by Domain Bytes by Domain

Thank You! @andydavies

Add a comment

Related pages

Are Today’s Good Practices... Tomorrow’s Performance Anti ...

... of the original performance rules and as the web changes further will our current good practices ... Good Practices... Tomorrow’s Performance Anti ...
Read more

Edge 2014 - Andy Davies - Future of Web Perf.pdf | Akamai ...

The Future of Web Performance: Are Today's Good Practices Tomorrow's Performance Anti-Patterns? As mobile usage rises, browsers evolve and new protocols ...
Read more

Edge 2014: The Future of Web Performance with ... - YouTube

The Future of Web Performance: Are Today's Good Practices Tomorrow's Performance Anti-Patterns? with Andy Davies, Associate Director - Web ...
Read more

Venue, Hotel & Travel: Velocity New York 2013 - O'Reilly ...

Venue, hotel & travel information for O'Reilly Velocity Conference ... Web Performance; ... Are Today’s Good Practices... Tomorrow’s ...
Read more

An Introduction to the Office 365 Patterns and Practices ...

Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? ... Patterns and Practices in Mobile SSO. 1 views. Patterns of agricultural ...
Read more

Good Practices | LinkedIn

View 28390 Good Practices posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more October 2011 Today’s Answer, Tomorrow ...

Slide 1 October 2011 Today’s Answer, Tomorrow’s Solutions Slide 2 Small Business with Six Divisions BCF is a devoted and trusted ...
Read more