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

http://www.flickr.com/photos/nzbuu/4093456029

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

@andydavies #Akamai Edge, Oct 2014

One Christmas…

http://www.flickr.com/photos/willypayne/3116395089

One Christmas…


What if …!!

One Christmas…


What if …!!

… dataURIs are an anti-pattern?

dataURIs are a technique to reduce number of HTTP requests

.selector { background-image: url(/images/redsquare.png); }

/images/redsquare.png

Encode image as base64 string

encodeiVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==

/images/redsquare.png base64 string

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

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

Test the theory

http://www.flickr.com/photos/marc-flores/8367323660

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)

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

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

This started me thinking!

www.flickr.com/photos/irishwildcat/3020466221

We have our rules…

http://www.flickr.com/photos/sowrey/2441134911

and we love recipes…

http://www.flickr.com/photos/mrsmagic/2247364228

But, what happens when things change?

Browsers already use the network differently

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

Prioritisation sometimes has unexpected consequences

Major UK retailer’s site in Chrome


These JS resources are at the foot of the body!(perhaps they should merge them into fewer resources but…)


The hero image is delayed as it waits for the JS to downloaded

New network protocols are coming here

http://www.flickr.com/photos/jonlachance/3427660741

They use TCP connections differentlyHTTP 1.1

SPDY

New standards present both opportunities and challenges

So how might this change what we do today?

How much do we rely on inline JavaScript?

www.flickr.com/photos/jfraissi/6352877711

82% of visitors support async attribute

http://caniuse.com/script-async

!

<script async src="script.js"></script>

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

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>

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

XSS

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/

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.

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

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

So what about the network?

http://www.flickr.com/photos/uwwresnet/5881727219

http://www.flickr.com/photos/7671591@N08/1469828976

HTTP/1.x could use TCP more efficiently

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

Browsers added support for more parallel connections

Old browsers - 2 parallel connections

Today’s browsers - 4 plus connections

We split resources across domains

www.bbc.co.uk!static.bbci.co.uk!news.bbcimg.co.uk!node1.bbcimg.co.uk

!

url( !

!

!

!

!

!


Use DataURIs to “push” assets

=

!

url( !

!

!

!

!

!


Use DataURIs to “push” assets

=

Larger downloads (needs gzip)!Overrides browser priorities

We create CSS and JavaScript bundles

++++= =


++++= =More to download

and parse


++++= =More to download

and parse x+!!

Whole bundle is invalidated if a

single file changes

Combine small images into CSS Sprites


To get just one sprite …


Browser must download and decode the whole image

To get just one sprite …

There’s a tension between development and delivery

https://www.flickr.com/photos/domiriel/7376397968

SPDY & HTTP/2 can reduce that tension

SPDY

Multiplexed connection reduces overhead of requests!! - less need to merge resources!! - better cache hit ratios

HTTP/1.1 - browser sets priorities

SPDY - browser hints priorities server can override them

Change doesn’t just create challenges…!!

!

…it offers new opportunities too

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




There are some questions over the user experience with progressive images


https://www.flickr.com/photos/steveweaver/2915792034

Browsers pull resources from the server but …

https://www.flickr.com/photos/christian_bachellier/582457911

What if the server could push them?

Browser Server

Server!builds!page

GET index.html

<html><head>…

Loading a web page

Request other page resources

Browser Server

Server!builds!page

GET index.html

<html><head>…

Network!Idle


Loading a web page

Browser Server

Server!builds!page

GET index.html

<html><head>…

Server Push


Push critical resource e.g. CSS

Browser Server

Server!builds!page

GET index.html

<html><head>…



Server Push

Browser Server

Server!builds!page

GET index.html

<html><head>…



Server Push

Browser can reject push

Other opportunities for server push?

HTML

CSS

DOM

CSSOM

Render!Tree Layout PaintJavaScript


HTML

CSS

DOM

CSSOM


Fonts and background images discovered

when render tree builds


HTML

CSS

DOM

CSSOM


Fonts and background images discovered

when render tree builds

Could we push them?

There’s a huge amount to cope with

http://www.flickr.com/photos/atoach/6014917153

and it’s only going to get more complex

http://www.flickr.com/photos/freshwater2006/693945631

“Situational Performance Optimization, The Next Frontier”!!

Guy Podjarny

Will the complexity be the end of hand crafted optimisations?

http://www.flickr.com/photos/simeon_barkas/2557059247

Will automation be the only sane way to manage this?

https://www.flickr.com/photos/skynoir/12342499794

http://www.flickr.com/photos/rkramer62/4028530901

The way we optimise is going to evolve

Start experimenting, share your experiences

http://www.flickr.com/photos/giosp/3933753363

Limits to what new protocols or automation can fix

Requests by Domain Bytes by Domain

http://www.flickr.com/photos/nzbuu/4093456029

Thank You!

@andydavies [email protected]

http://slideshare.net/andydavies

Technology

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