0
Are Today’s Good Practices…
Tomorrow’s Performance Anti-Patterns?
@andydavies
#VelocityConf, New York
http://www.flickr.com...
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
XRFWHRTb2Z0d2FyZQBBZG9i...
dataURIs for CSS images
Makes a blocking resource larger by including non-blocking resources

•

Browser can’t start rende...
1. Take 50 icons
2. Create 50 stylesheets, each with one more dataURI than
previous
3. Create matching HTML file for each ...
Larger CSS download == longer time to RenderStart

RenderStart - TTFB (ms)

1000

875

750

625

500

1

3

5

7

9

11 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
Saturda...
Yet, this is how we typically asynchronously load scripts
<script type="text/javascript">
function() {
var js = document.c...
XSS
Saturday, 19 October 13
Content-Security-Policy

“Content Security Policy, a mechanism web applications
can use to mitigate a broad class of conte...
Example
Only allow scripts to be executed if they come from a designated host,
disables inline scripts by default.
Content...
What other performance enhancements do we rely on JS for?
Guardian split page into
- Content
- Enhancements
- Leftovers
Ot...
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
- WepPageTes...
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)
...
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
- Dat...
Sharding CSS background: url() images
0s

1s

2s

3s

4s

5s

Sharded
Not
Sharded

Sharded page is much slower

Saturday, ...
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 us...
Sharding <img src=
0s

1s

2s

3s

4s

5s

6s

Sharded
Not
Sharded

Sharded page is marginally faster???

Saturday, 19 Oct...
Other tests carried out
-

Sharding JS / CSS

Horrible

-

Merging CSS

Slower

-

Server Push

No noticable difference

-...
It’s only going to get more complex

“Situational Performance Optimization, The Next Frontier”
Guy Podjarny

http://www.fli...
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>
Mo...
Will complexity lead to the end of hand crafted optimisations?
http://www.flickr.com/photos/simeon_barkas/2557059247
Saturd...
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
S...
Upcoming SlideShare
Loading in...5
×

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

2,276

Published on

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?

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,276
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
32
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. What if … … dataURIs are an anti-pattern? http://www.flickr.com/photos/willypayne/3116395089 Saturday, 19 October 13
  3. 3. The ‘humble’ dataURI url(data:image/ png;base64,iVBORw0KGgoAAAANSUh EUgAAABkAAAAZCAMAAADzN3VRAAAAG XRFWHRTb2Z0d2FyZQBBZG9iZSBJbWF nZVJlYWR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeNpiYBg Fo2AwAIAAAwACigABtnCV2AAAAABJR U5ErkJggg==) Saturday, 19 October 13 =
  4. 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. 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. 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. 7. We have our rules… http://www.flickr.com/photos/sowrey/2441134911 Saturday, 19 October 13
  8. 8. and we love recipes… http://www.flickr.com/photos/mrsmagic/2247364228 Saturday, 19 October 13
  9. 9. But, what happens when things change? Saturday, 19 October 13
  10. 10. Browsers already use the network differently Saturday, 19 October 13
  11. 11. Saturday, 19 October 13
  12. 12. Saturday, 19 October 13
  13. 13. New network protocols are coming here http://www.flickr.com/photos/jonlachance/3427660741 Saturday, 19 October 13
  14. 14. Differences in TCP Connection Use HTTP 1.1 SPDY Saturday, 19 October 13
  15. 15. New Standards - opportunities and challenges Saturday, 19 October 13
  16. 16. How much do we rely on inline JavaScript? http://www.flickr.com/photos/jfraissi/6352877711 Saturday, 19 October 13
  17. 17. 74% of visitors support async attribute <script async src="myscript.js"><script> http://caniuse.com/script-async Saturday, 19 October 13
  18. 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
  19. 19. XSS Saturday, 19 October 13
  20. 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. 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. 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. 23. Tested some scenarios, measured the outcomes http://www.flickr.com/photos/chandramarsono/4324373384 Saturday, 19 October 13
  24. 24. Test Environment - EC2 - Medium Instance - Dublin - Apache 2.2 - GZIP - Keep-Alive - mod_pagespeed - mod_spdy - WepPageTest, Saturday, 19 October 13 Dulles / Chrome / Cable
  25. 25. Off the shelf website template http://www.html5xcss3.com/2012/05/html5-template-interio.html Saturday, 19 October 13
  26. 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. 27. Waterfall for HTTP Test Saturday, 19 October 13
  28. 28. Waterfall for SPDY Test Saturday, 19 October 13
  29. 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. 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. 31. Connection to shard opened later New TCP connection opened Saturday, 19 October 13
  32. 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. 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. 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. 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. 36. Hmm… How do we move forward? http://www.flickr.com/photos/atoach/6014917153 Saturday, 19 October 13
  37. 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. 38. Will complexity lead to the end of hand crafted optimisations? http://www.flickr.com/photos/simeon_barkas/2557059247 Saturday, 19 October 13
  39. 39. Start experimenting http://www.flickr.com/photos/giosp/3933753363 Saturday, 19 October 13
  40. 40. Need to improve our toolkit http://www.flickr.com/photos/alexander/1146677 Saturday, 19 October 13
  41. 41. Limits to what protocols or automation can fix Requests by Domain Saturday, 19 October 13 Bytes by Domain
  42. 42. Thank You! @andydavies hello@andydavies.me http://slideshare.net/andydavies http://www.flickr.com/photos/nzbuu/4093456029 Saturday, 19 October 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×