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

46 %
54 %
Information about Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?
Technology

Published on October 19, 2013

Author: AndyDavies

Source: slideshare.net

Description

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? @andydavies #VelocityConf, New York http://www.flickr.com/photos/nzbuu/4093456029 Saturday, 19 October 13

What if … … dataURIs are an anti-pattern? http://www.flickr.com/photos/willypayne/3116395089 Saturday, 19 October 13

The ‘humble’ dataURI url(data:image/ png;base64,iVBORw0KGgoAAAANSUh EUgAAABkAAAAZCAMAAADzN3VRAAAAG XRFWHRTb2Z0d2FyZQBBZG9iZSBJbWF nZVJlYWR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeNpiYBg Fo2AwAIAAAwACigABtnCV2AAAAABJR U5ErkJggg==) 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 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

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

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/3427660741 Saturday, 19 October 13

Differences in TCP Connection Use HTTP 1.1 SPDY Saturday, 19 October 13

New Standards - opportunities and challenges Saturday, 19 October 13

How much do we rely on inline JavaScript? http://www.flickr.com/photos/jfraissi/6352877711 Saturday, 19 October 13

74% of visitors support async attribute <script async src="myscript.js"><script> http://caniuse.com/script-async Saturday, 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

XSS Saturday, 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 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

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/4324373384 Saturday, 19 October 13

Test Environment - EC2 - Medium Instance - Dublin - Apache 2.2 - GZIP - Keep-Alive - mod_pagespeed - mod_spdy - WepPageTest, Saturday, 19 October 13 Dulles / Chrome / Cable

Off the shelf website template http://www.html5xcss3.com/2012/05/html5-template-interio.html Saturday, 19 October 13

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

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 0s 1s 2s 3s 4s 5s Sharded Not Sharded Sharded page is much slower Saturday, 19 October 13 6s 7s 8s

Connection to shard opened later New TCP connection opened Saturday, 19 October 13

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

Sharding <img src= 0s 1s 2s 3s 4s 5s 6s Sharded Not Sharded Sharded page is marginally faster??? Saturday, 19 October 13 7s 8s

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 “Situational Performance Optimization, The Next Frontier” Guy Podjarny http://www.flickr.com/photos/freshwater2006/693945631 Saturday, 19 October 13

Hmm… How do we move forward? http://www.flickr.com/photos/atoach/6014917153 Saturday, 19 October 13

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

Will complexity lead to the end of hand crafted optimisations? http://www.flickr.com/photos/simeon_barkas/2557059247 Saturday, 19 October 13

Start experimenting http://www.flickr.com/photos/giosp/3933753363 Saturday, 19 October 13

Need to improve our toolkit http://www.flickr.com/photos/alexander/1146677 Saturday, 19 October 13

Limits to what protocols or automation can fix Requests by Domain Saturday, 19 October 13 Bytes by Domain

Thank You! @andydavies hello@andydavies.me http://slideshare.net/andydavies http://www.flickr.com/photos/nzbuu/4093456029 Saturday, 19 October 13

Add a comment

Related presentations

Related pages

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

... original performance rules and as the web changes further will our current good practices ... Are Today’s Good Practices... Tomorrow’s Performance ...
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

VELOCITY13: Are Today’s Good Practices

VELOCITY13: Are Today’s Good Practices. by n-matsumoto, 2013/11/19. ... Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Read more

Speaker Slides & Video: Velocity Europe 2013 - O'Reilly ...

Speaker Slides & Video ... Are Today’s Good Practices... Tomorrow’s ... We’re already starting to bend some of the original performance rules and ...
Read more

Performance Anti-Patterns - ACM Queue

Performance Anti-Patterns ... that led to these performance problems as anti-patterns—something to be ... or management practices, ...
Read more

Talks - Andy Davies

Talks I normally talks about web performance ... Tomorrow’s Performance Anti-Patterns? ... Are Today’s Best Practices, Tomorrow’s Performance Anti ...
Read more

Enterprise Risk Management: Today's Leading Research and ...

Enterprise Risk Management: Today's Leading Research and Best Practices for Tomorrow's ... risk management practices and how you can ...
Read more