are today’s good practices… tomorrow’s performance anti-patterns?
TRANSCRIPT
![Page 1: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/nzbuu/4093456029
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
@andydavies #Akamai Edge, Oct 2014
![Page 2: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/2.jpg)
![Page 3: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/3.jpg)
One Christmas…
http://www.flickr.com/photos/willypayne/3116395089
![Page 4: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/4.jpg)
One Christmas…
http://www.flickr.com/photos/willypayne/3116395089
What if …!!
![Page 5: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/5.jpg)
One Christmas…
http://www.flickr.com/photos/willypayne/3116395089
What if …!!
… dataURIs are an anti-pattern?
![Page 6: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/6.jpg)
dataURIs are a technique to reduce number of HTTP requests
.selector { background-image: url(/images/redsquare.png); }
/images/redsquare.png
![Page 7: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/7.jpg)
Encode image as base64 string
encodeiVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==
/images/redsquare.png base64 string
![Page 8: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/8.jpg)
Replace image path with dataURI
!
.selector { background-image: url( !
!
!
!
!
}
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==);
dataURIs can also be used with other non-image elements too
![Page 9: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/9.jpg)
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
![Page 10: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/10.jpg)
Test the theory
http://www.flickr.com/photos/marc-flores/8367323660
![Page 11: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/11.jpg)
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)
![Page 12: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/12.jpg)
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
![Page 13: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/13.jpg)
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
![Page 14: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/14.jpg)
This started me thinking!
www.flickr.com/photos/irishwildcat/3020466221
![Page 15: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/15.jpg)
We have our rules…
http://www.flickr.com/photos/sowrey/2441134911
![Page 16: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/16.jpg)
and we love recipes…
http://www.flickr.com/photos/mrsmagic/2247364228
![Page 17: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/17.jpg)
But, what happens when things change?
![Page 18: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/18.jpg)
Browsers already use the network differently
![Page 19: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/19.jpg)
Download order != Document orderhttps://www.flickr.com/photos/add1sun/4993432274
![Page 20: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/20.jpg)
![Page 21: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/21.jpg)
![Page 22: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/22.jpg)
Prioritisation sometimes has unexpected consequences
Major UK retailer’s site in Chrome
![Page 23: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/23.jpg)
Prioritisation sometimes has unexpected consequences
These JS resources are at the foot of the body!(perhaps they should merge them into fewer resources but…)
![Page 24: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/24.jpg)
Prioritisation sometimes has unexpected consequences
The hero image is delayed as it waits for the JS to downloaded
![Page 25: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/25.jpg)
New network protocols are coming here
http://www.flickr.com/photos/jonlachance/3427660741
![Page 26: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/26.jpg)
They use TCP connections differentlyHTTP 1.1
SPDY
![Page 27: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/27.jpg)
New standards present both opportunities and challenges
![Page 28: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/28.jpg)
So how might this change what we do today?
![Page 29: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/29.jpg)
How much do we rely on inline JavaScript?
www.flickr.com/photos/jfraissi/6352877711
![Page 30: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/30.jpg)
82% of visitors support async attribute
http://caniuse.com/script-async
!
<script async src="script.js"></script>
![Page 31: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/31.jpg)
82% of visitors support async attribute
http://caniuse.com/script-async
!
<script async src="script.js"></script>
Tells browsers they don’t need pause DOM construction while the JavaScript downloads and
executes
![Page 32: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/32.jpg)
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>
![Page 33: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/33.jpg)
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>
Browser won’t discover script until outer script inserts it into DOM
![Page 34: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/34.jpg)
XSS
![Page 35: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/35.jpg)
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/
![Page 36: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/36.jpg)
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.
Doesn’t just apply to scripts, can be used with CSS, fonts, images etc.
![Page 37: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/37.jpg)
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
![Page 38: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/38.jpg)
![Page 39: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/39.jpg)
W3C Resource Priorities - adds lazyload attribute (also look at Ilya Grigorik’s proposal for Resource Hints)
![Page 40: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/40.jpg)
So what about the network?
http://www.flickr.com/photos/uwwresnet/5881727219
![Page 41: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/41.jpg)
http://www.flickr.com/photos/7671591@N08/1469828976
HTTP/1.x could use TCP more efficiently
![Page 42: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/42.jpg)
We’ve been hacking around the gapshttps://www.flickr.com/photos/rocketnumber9/13695281
![Page 43: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/43.jpg)
Browsers added support for more parallel connections
Old browsers - 2 parallel connections
Today’s browsers - 4 plus connections
![Page 44: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/44.jpg)
We split resources across domains
www.bbc.co.uk!static.bbci.co.uk!news.bbcimg.co.uk!node1.bbcimg.co.uk
![Page 45: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/45.jpg)
!
url( !
!
!
!
!
!
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==);
Use DataURIs to “push” assets
=
![Page 46: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/46.jpg)
!
url( !
!
!
!
!
!
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==);
Use DataURIs to “push” assets
=
Larger downloads (needs gzip)!Overrides browser priorities
![Page 47: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/47.jpg)
We create CSS and JavaScript bundles
++++= =
![Page 48: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/48.jpg)
We create CSS and JavaScript bundles
++++= =More to download
and parse
![Page 49: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/49.jpg)
We create CSS and JavaScript bundles
++++= =More to download
and parse x+!!
Whole bundle is invalidated if a
single file changes
![Page 50: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/50.jpg)
Combine small images into CSS Sprites
![Page 51: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/51.jpg)
Combine small images into CSS Sprites
To get just one sprite …
![Page 52: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/52.jpg)
Combine small images into CSS Sprites
Browser must download and decode the whole image
To get just one sprite …
![Page 53: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/53.jpg)
There’s a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968
![Page 54: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/54.jpg)
SPDY & HTTP/2 can reduce that tension
SPDY
Multiplexed connection reduces overhead of requests!! - less need to merge resources!! - better cache hit ratios
![Page 55: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/55.jpg)
HTTP/1.1 - browser sets priorities
![Page 56: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/56.jpg)
SPDY - browser hints priorities server can override them
![Page 57: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/57.jpg)
Change doesn’t just create challenges…!!
!
…it offers new opportunities too
![Page 58: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/58.jpg)
How much of an image do we need to make it usable - 5%?
![Page 59: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/59.jpg)
How much of an image do we need to make it usable - 15%?
![Page 60: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/60.jpg)
How much of an image do we need to make it usable - 25%?
![Page 61: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/61.jpg)
How much of an image do we need to make it usable - 80%?
![Page 62: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/62.jpg)
There are some questions over the user experience with progressive images
How much of an image do we need to make it usable - 80%?
![Page 63: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/63.jpg)
https://www.flickr.com/photos/steveweaver/2915792034
Browsers pull resources from the server but …
![Page 64: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/64.jpg)
https://www.flickr.com/photos/christian_bachellier/582457911
What if the server could push them?
![Page 65: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/65.jpg)
Browser Server
Server!builds!page
GET index.html
<html><head>…
Loading a web page
Request other page resources
![Page 66: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/66.jpg)
Browser Server
Server!builds!page
GET index.html
<html><head>…
Network!Idle
Request other page resources
Loading a web page
![Page 67: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/67.jpg)
Browser Server
Server!builds!page
GET index.html
<html><head>…
Server Push
Request other page resources
Push critical resource e.g. CSS
![Page 68: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/68.jpg)
Browser Server
Server!builds!page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CSS
Server Push
![Page 69: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/69.jpg)
Browser Server
Server!builds!page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CSS
Server Push
Browser can reject push
![Page 70: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/70.jpg)
Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!Tree Layout PaintJavaScript
![Page 71: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/71.jpg)
Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!Tree Layout PaintJavaScript
Fonts and background images discovered
when render tree builds
![Page 72: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/72.jpg)
Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!Tree Layout PaintJavaScript
Fonts and background images discovered
when render tree builds
Could we push them?
![Page 73: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/73.jpg)
There’s a huge amount to cope with
http://www.flickr.com/photos/atoach/6014917153
![Page 74: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/74.jpg)
and it’s only going to get more complex
http://www.flickr.com/photos/freshwater2006/693945631
![Page 75: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/75.jpg)
“Situational Performance Optimization, The Next Frontier”!!
Guy Podjarny
![Page 76: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/76.jpg)
Will the complexity be the end of hand crafted optimisations?
http://www.flickr.com/photos/simeon_barkas/2557059247
![Page 77: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/77.jpg)
Will automation be the only sane way to manage this?
https://www.flickr.com/photos/skynoir/12342499794
![Page 78: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/78.jpg)
http://www.flickr.com/photos/rkramer62/4028530901
The way we optimise is going to evolve
![Page 79: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/79.jpg)
Start experimenting, share your experiences
http://www.flickr.com/photos/giosp/3933753363
![Page 80: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/80.jpg)
Limits to what new protocols or automation can fix
Requests by Domain Bytes by Domain
![Page 81: Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?](https://reader038.vdocuments.net/reader038/viewer/2022110204/55d578e0bb61ebae2f8b45ed/html5/thumbnails/81.jpg)
http://www.flickr.com/photos/nzbuu/4093456029
Thank You!
@andydavies [email protected]
http://slideshare.net/andydavies