Talk from Akamai Edge 2014 looking at some of our current web performance optimisation practices and how they may need to change as new standards and protocols emerge

1. http://www.flickr.com/photos/nzbuu/4093456029
Are Today’s Good Practices…
Tomorrow’s Performance Anti-Patterns?
@andydavies
#Akamai Edge, Oct 2014

3. One Christmas…
http://www.flickr.com/photos/willypayne/3116395089

4. One Christmas…
http://www.flickr.com/photos/willypayne/3116395089
What if …!
!

5. One Christmas…
http://www.flickr.com/photos/willypayne/3116395089
What if …!
!
… dataURIs are an anti-pattern?

6. dataURIs are a technique to reduce number of HTTP requests
/images/redsquare.png
.selector {
background-image: url(/images/redsquare.png);
}

7. Encode image as base64 string
encode
iVBORw0KGgoAAAANSUhEUgAAABk
AAAAZCAMAAADzN3VRAAAAGXRFWH
RTb2Z0d2FyZQBBZG9iZSBJbWFnZ
VJlYWR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUeNpi
YBgFo2AwAIAAAwACigABtnCV2AA
AAABJRU5ErkJggg==
/images/redsquare.png base64 string

8. Replace image path with dataURI
!
.selector {
background-image: url(
!
!
!
!
!
}
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAABkA
AAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQB
BZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAA
AwACigABtnCV2AAAAABJRU5ErkJggg==);
dataURIs can also be used with other non-image elements too

9. Reduces number of requests but it’s a tradeoff
Makes a blocking resource (CSS) 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?!
Overrides browsers pre-loader heuristics
* Some browsers defer download of CSS when media query doesn’t match

10. Test the theory
http://www.flickr.com/photos/marc-flores/8367323660

11. 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! (using WebPagetest)

12. Larger CSS download = longer time to RenderStart
1000
ms)
875
(TTFB - 750
RenderStart 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

13. Larger CSS download = longer time to RenderStart
1000
ms)
875
(TTFB - 750
RenderStart 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

14. This started me thinking!
www.flickr.com/photos/irishwildcat/3020466221

15. We have our rules…
http://www.flickr.com/photos/sowrey/2441134911

16. and we love recipes…
http://www.flickr.com/photos/mrsmagic/2247364228

17. But, what happens when things change?

18. Browsers already use the network differently

19. Download order != Document order
https://www.flickr.com/photos/add1sun/4993432274

22. Prioritisation sometimes has unexpected consequences
Major UK retailer’s
site in Chrome

23. Prioritisation sometimes has unexpected consequences
These JS resources are
at the foot of the body!
(perhaps they should merge them into
fewer resources but…)

24. Prioritisation sometimes has unexpected consequences
The hero image is
delayed as it waits for
the JS to downloaded

25. New network protocols are coming here
http://www.flickr.com/photos/jonlachance/3427660741

26. They use TCP connections differently
HTTP 1.1
SPDY

27. New standards present both opportunities and challenges

28. So how might this change what we do today?

29. How much do we rely on inline JavaScript?
www.flickr.com/photos/jfraissi/6352877711

30. 82% of visitors support async attribute
!
<script async src="script.js"></script>
http://caniuse.com/script-async

31. 82% of visitors support async attribute
!
<script async src="script.js"></script>
http://caniuse.com/script-async
Tells browsers they don’t need
pause DOM construction while
the JavaScript downloads and
executes

32. Yet, this is how we typically load scripts asynchronously
<script type="text/javascript">
(function() {
var js = document.createElement('script');
js.async = true;
js.src = 'script.js';
var e = document.getElementsByTagName('script')[0];
e.parentNode.insertBefore(js, first);
})();
</script>

33. Yet, this is how we typically load scripts asynchronously
<script type="text/javascript">
(function() {
Browser won’t discover
script until outer script
inserts it into DOM
var js = document.createElement('script');
js.async = true;
js.src = 'script.js';
var e = document.getElementsByTagName('script')[0];
e.parentNode.insertBefore(js, first);
})();
</script>

34. XSS

35. 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/

36. 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'
Doesn’t just apply to scripts, can be used with CSS, fonts, images etc.

37. What other performance enhancements do we rely on inline JS for?
The Guardian prioritise their content!
!
Divide page load into:!
- Content!
- Enhancements!
- Leftovers !
!
Some sites rely on scroll handlers for lazyloading

39. W3C Resource Priorities - adds lazyload attribute
(also look at Ilya Grigorik’s proposal for Resource Hints)

40. So what about the network?
http://www.flickr.com/photos/uwwresnet/5881727219

41. http://www.flickr.com/photos/7671591@N08/1469828976
HTTP/1.x could use TCP more efficiently

42. We’ve been hacking around the gaps
https://www.flickr.com/photos/rocketnumber9/13695281

43. Browsers added support for more parallel connections
Old browsers - 2 parallel connections
Today’s browsers - 4 plus connections

44. We split resources across domains
www.bbc.co.uk!
static.bbci.co.uk!
news.bbcimg.co.uk!
node1.bbcimg.co.uk

45. Use DataURIs to “push” assets
!
url(
!
!
!
!
!
!
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAABkA
AAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQB
BZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAA
AwACigABtnCV2AAAAABJRU5ErkJggg==);
=

46. Use DataURIs to “push” assets
!
url(
!
!
!
!
!
!
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAABkA
AAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQB
BZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAA
AwACigABtnCV2AAAAABJRU5ErkJggg==);
=
Larger downloads (needs gzip)!
Overrides browser priorities

47. We create CSS and JavaScript bundles
+ + + +
= =

48. We create CSS and JavaScript bundles
+ + + +
= = More to download
and parse

49. We create CSS and JavaScript bundles
+ + + +
= = More to download
and parse +! x
!
Whole bundle is
invalidated if a
single file changes

50. Combine small images into CSS Sprites

51. Combine small images into CSS Sprites
To get just one sprite …

52. Combine small images into CSS Sprites
To get just one sprite …
Browser must download and
decode the whole image

53. There’s a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968

54. SPDY & HTTP/2 can reduce that tension
SPDY
Multiplexed connection reduces overhead of requests!
! - less need to merge resources!
! - better cache hit ratios

55. HTTP/1.1 - browser sets priorities

56. SPDY - browser hints priorities
server can override them

57. Change doesn’t just create challenges…!
!
!
…it offers new opportunities too

58. How much of an image do we need to make it usable - 5%?

59. How much of an image do we need to make it usable - 15%?

60. How much of an image do we need to make it usable - 25%?

61. How much of an image do we need to make it usable - 80%?

62. How much of an image do we need to make it usable - 80%?
There are some questions over the user
experience with progressive images

63. https://www.flickr.com/photos/steveweaver/2915792034
Browsers pull resources from the server but …

64. https://www.flickr.com/photos/christian_bachellier/582457911
What if the server could push them?

65. Browser Server
Server!
builds!
page
GET index.html
<html><head>…
Loading a web page
Request other page resources

66. Browser Server
Server!
builds!
page
GET index.html
<html><head>…
Network!
Idle
Request other page resources
Loading a web page

67. Browser Server
Server!
builds!
page
GET index.html
Push critical resource e .g. CSS
<html><head>…
Server Push
Request other page resources

68. Browser Server
Server!
builds!
page
GET index.html
Push critical resource e .g. CSS
<html><head>…
Request other page resources
Server Push

69. Browser Server
Server!
builds!
page
GET index.html
Push critical resource e .g. CSS
<html><head>…
Request other page resources
Server Push
Browser can reject push

70. Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint

71. Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!
Tree
Fonts and background
images discovered
when render tree builds
JavaScript Layout Paint

72. Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!
Tree
Fonts and background
images discovered
when render tree builds
JavaScript Layout Paint
Could we push them?

73. There’s a huge amount to cope with
http://www.flickr.com/photos/atoach/6014917153

74. and it’s only going to get more complex
http://www.flickr.com/photos/freshwater2006/693945631

75. “Situational Performance Optimization, The Next Frontier”!
!
Guy Podjarny

76. Will the complexity be the end of hand crafted optimisations?
http://www.flickr.com/photos/simeon_barkas/2557059247

77. Will automation be the only sane way to manage this?
https://www.flickr.com/photos/skynoir/12342499794

78. http://www.flickr.com/photos/rkramer62/4028530901
The way we optimise is going to evolve

79. Start experimenting, share your experiences
http://www.flickr.com/photos/giosp/3933753363

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

81. Thank You!
http://www.flickr.com/photos/nzbuu/4093456029
@andydavies
andy.davies@nccgroup.com
http://slideshare.net/andydavies