exstatic -- browser cache

67
EXSTATIC [example.org’s statics]

Upload: antoine-bernier

Post on 12-Apr-2017

113 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Exstatic -- browser cache

EXSTATIC[example.org’s statics]

Page 2: Exstatic -- browser cache
Page 3: Exstatic -- browser cache
Page 4: Exstatic -- browser cache
Page 5: Exstatic -- browser cache

http://

Page 6: Exstatic -- browser cache

http://example.orghttp://

Page 7: Exstatic -- browser cache

GET /Host: example.org

Page 8: Exstatic -- browser cache

http://weka.com/iscool

200 OKContent-Type: text/html

Page 9: Exstatic -- browser cache

http://weka.com/iscool

<img src=”foo.png”>

Page 10: Exstatic -- browser cache

http://weka.com/iscool

GET /foo.pngHost: example.org

Page 11: Exstatic -- browser cache

http://weka.com/iscool

200 OKContent-Type: image/png

Page 12: Exstatic -- browser cache

http://example.org

Page 13: Exstatic -- browser cache

http://example.org

Page 14: Exstatic -- browser cache

http://weka.com/iscool

GET /foo.pngHost: example.org

Page 15: Exstatic -- browser cache

http://weka.com/iscool

200 OKContent-Type: image/png

Page 16: Exstatic -- browser cache

http://weka.com/iscool

200 OKContent-Type: image/png

Page 17: Exstatic -- browser cache

Caching headers

Page 18: Exstatic -- browser cache

Last-Modified

Page 19: Exstatic -- browser cache

http://weka.com/iscool

200 OKContent-Type: image/pngLast-Modified: Wed, 22 Feb 2006 04:15:54 GMT

Page 20: Exstatic -- browser cache

http://example.org

Page 21: Exstatic -- browser cache

http://example.org

Page 22: Exstatic -- browser cache

http://weka.com/iscool

GET /foo.pngHost: example.orgIf-Modified-Since: Wed, 22 Feb 2006 04:15:54 GMT

Page 23: Exstatic -- browser cache

http://weka.com/iscool

304 Not Modified

Page 24: Exstatic -- browser cache
Page 25: Exstatic -- browser cache

Last-Modifiedallows you to perform

validity checkagainst cache’s resources

—and download only outdated resources

Page 26: Exstatic -- browser cache

Expires

Page 27: Exstatic -- browser cache

http://weka.com/iscool

200 OKContent-Type: image/pngExpires: Wed, 30 Mar 2012 19:16:20 GMT

Page 28: Exstatic -- browser cache

http://example.org

Page 29: Exstatic -- browser cache

http://example.org

Page 30: Exstatic -- browser cache
Page 31: Exstatic -- browser cache

Expiresno request

since it’s cached!or unless explicitly asked (refresh)

Page 32: Exstatic -- browser cache

Set caching headers aggressively for all static resources.

— google pagespeed

Page 33: Exstatic -- browser cache

<FilesMatch "\.(gif|jpg|js|css)$"> ExpiresDefault "access plus 1 year"</FilesMatch>

Page 34: Exstatic -- browser cache

Caching headersTake advantage on client’s

caching mechanism—

and reduce requests

Page 35: Exstatic -- browser cache

Revving

Page 36: Exstatic -- browser cache

v2

Page 37: Exstatic -- browser cache

http://example.org

Page 38: Exstatic -- browser cache

http://example.org

Page 39: Exstatic -- browser cache
Page 40: Exstatic -- browser cache
Page 41: Exstatic -- browser cache

The most effective solution is to change any links to them; that way, completely new representations will be loaded fresh from the origin server.

— Mark Nottingham

Page 42: Exstatic -- browser cache

The most effective solution is to change any links to them; that way, completely new representations will be loaded fresh from the origin server.

— Mark Nottingham

trick

Page 43: Exstatic -- browser cache

http://weka.com/iscool

<img src=”foo-v2.png”>

Page 44: Exstatic -- browser cache

http://weka.com/iscool

GET /foo-v2.pngHost: example.org

Page 45: Exstatic -- browser cache

http://weka.com/iscool

200 OKContent-Type: image/pngLast-Modified: Thu, 26 Feb 2006 05:19:12 GMT

Page 46: Exstatic -- browser cache

http://example.org

v2

Page 47: Exstatic -- browser cache

vX =

Page 48: Exstatic -- browser cache

foo-{md5}.png

Page 49: Exstatic -- browser cache

GET /foo-234569103.pngHost: example.org

Page 50: Exstatic -- browser cache

RewriteEngine onRewriteRule (.*)(-[0-9]+)?(\.[^\.]*)$ $1$3 [L]

Page 51: Exstatic -- browser cache

http://weka.com/iscool

200 OKContent-Type: image/pngLast-Modified: Thu, 26 Feb 2006 05:19:12 GMT

Page 52: Exstatic -- browser cache

Revvingeffective brower’s trick to

bypass caching—

or make sure your user has the latest version

Page 53: Exstatic -- browser cache

Cookieless domain

Page 54: Exstatic -- browser cache

http://example.org

Cookie: hiHOha

Page 55: Exstatic -- browser cache

http://weka.com/iscool

GET /foo.pngHost: example.orgCookie: hiHOha

Page 56: Exstatic -- browser cache

http://weka.com/iscool

GET /foo.pngHost: example.orgCookie: hiHOha

Page 57: Exstatic -- browser cache

http://weka.com/iscool

GET /foo.pngHost: exstatic.org

Page 58: Exstatic -- browser cache

Cookieless domainMinimize requests!

—but maybe not in the “critical path”

Page 59: Exstatic -- browser cache

Parallelize downloads

Page 60: Exstatic -- browser cache

X concurrent connexions maxper hostname

Page 61: Exstatic -- browser cache

host1 host2 host3 host4

Page 62: Exstatic -- browser cache

Parallelize downloadsBypass browsers’

concurrent connexions limitation

Page 63: Exstatic -- browser cache

Infra?

Page 64: Exstatic -- browser cache

web1 web2 web3 assets

tagA tagA tagA tagA

tagA

tagB tagB tagB tagB

example.org

one.exstatic.orgtwo.exstatic.orgthree.exstatic.orgfour.exstatic.org

exstatic.org

Page 65: Exstatic -- browser cache

COLOPHON

Page 67: Exstatic -- browser cache

Antoine BERNIER (abernier)2011

EXSTATIC[example.org’s statics]