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
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)
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
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>
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
38.
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
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
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