144

Speedy App: Frontend Performance Considerations

Embed Size (px)

DESCRIPTION

Execution time in the backend is not all there is to the speed of a web application. In this talk, we'll look at the basic enhancements we can make to get an applications that truly feels snappy!

Citation preview

Page 1: Speedy App: Frontend Performance Considerations
Page 2: Speedy App: Frontend Performance Considerations
Page 3: Speedy App: Frontend Performance Considerations
Page 4: Speedy App: Frontend Performance Considerations
Page 5: Speedy App: Frontend Performance Considerations
Page 6: Speedy App: Frontend Performance Considerations
Page 7: Speedy App: Frontend Performance Considerations
Page 8: Speedy App: Frontend Performance Considerations
Page 9: Speedy App: Frontend Performance Considerations
Page 10: Speedy App: Frontend Performance Considerations
Page 11: Speedy App: Frontend Performance Considerations
Page 12: Speedy App: Frontend Performance Considerations
Page 13: Speedy App: Frontend Performance Considerations
Page 14: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Wed, 23 Feb 2011 12:23:32 GTMContent-Length: 453

GET /nelm.io/pierreHTTP/1.1HOST: nelm.io

Page 15: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 3 Mar 2011 12:23:32 GTMContent-Length: 453

GET /nelm.io/pierreHTTP/1.1HOST: nelm.io

Page 16: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 3 Mar 2011 12:23:32 GTM Content-Length: 453

GET /nelm.io/pierreHTTP/1.1HOST: nelm.io

Page 17: Speedy App: Frontend Performance Considerations

GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioIf-Modified-Since: Thu, 3 Mar 2011 12:23:32 GTM

HTTP/1.1 304 Not ModifiedContent-Type: text/html; charset=UTF-8Last-Modified: Wed, 23 Feb 2011 12:23:32 GTM

Page 18: Speedy App: Frontend Performance Considerations

GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioIf-Modified-Since: Thu, 3 Mar 2011 12:23:32 GTM

HTTP/1.1 304 Not ModifiedContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 3 Mar 2011 12:23:32 GTM

Page 19: Speedy App: Frontend Performance Considerations
Page 20: Speedy App: Frontend Performance Considerations
Page 21: Speedy App: Frontend Performance Considerations
Page 22: Speedy App: Frontend Performance Considerations
Page 23: Speedy App: Frontend Performance Considerations
Page 24: Speedy App: Frontend Performance Considerations
Page 25: Speedy App: Frontend Performance Considerations
Page 26: Speedy App: Frontend Performance Considerations
Page 27: Speedy App: Frontend Performance Considerations
Page 28: Speedy App: Frontend Performance Considerations

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeH h0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP/ 5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0Ccgu Ww6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj" width="16" height="14" alt="Play">

Page 29: Speedy App: Frontend Performance Considerations
Page 30: Speedy App: Frontend Performance Considerations
Page 31: Speedy App: Frontend Performance Considerations
Page 32: Speedy App: Frontend Performance Considerations
Page 33: Speedy App: Frontend Performance Considerations
Page 34: Speedy App: Frontend Performance Considerations
Page 35: Speedy App: Frontend Performance Considerations
Page 36: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Wed, 23 Feb 2011 17:23:32 GTMExpires: Wed, 23 Feb 2011 19:23:32 GTM

Page 37: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 3 Mar 2011 12:23:32 GTMExpires: Thu, 3 Mar 2011 14:23:32 GTM

Page 38: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 3 Mar 2011 12:23:32 GTM Expires: Thu, 3 Mar 2021 14:23:32 GTM

Page 39: Speedy App: Frontend Performance Considerations
Page 40: Speedy App: Frontend Performance Considerations
Page 41: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 3 Mar 2011 12:23:32 GTMCache-Control: max-age=315360000

Page 42: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 3 Mar 2011 12:23:32 GTM Cache-Control: max-age=315360000

Page 43: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 3 Mar 2011 12:23:32 GTMCache-Control: max-age=315360000

Page 44: Speedy App: Frontend Performance Considerations
Page 45: Speedy App: Frontend Performance Considerations
Page 46: Speedy App: Frontend Performance Considerations

<FilesMatch "\.(gif|jpg|js|css)"> ExpiresDefault "access plus 10 years"</FilesMatch>

Page 47: Speedy App: Frontend Performance Considerations
Page 48: Speedy App: Frontend Performance Considerations
Page 49: Speedy App: Frontend Performance Considerations
Page 50: Speedy App: Frontend Performance Considerations
Page 51: Speedy App: Frontend Performance Considerations
Page 52: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 3 Mar 2011 12:23:32 GTMContent-Length: 453Content-Encoding: gzip

GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioAccept-Encoding: gzip,deflate

Page 53: Speedy App: Frontend Performance Considerations
Page 54: Speedy App: Frontend Performance Considerations
Page 55: Speedy App: Frontend Performance Considerations
Page 56: Speedy App: Frontend Performance Considerations
Page 57: Speedy App: Frontend Performance Considerations
Page 58: Speedy App: Frontend Performance Considerations
Page 59: Speedy App: Frontend Performance Considerations
Page 60: Speedy App: Frontend Performance Considerations
Page 61: Speedy App: Frontend Performance Considerations
Page 62: Speedy App: Frontend Performance Considerations
Page 63: Speedy App: Frontend Performance Considerations
Page 64: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Wed, 23 Feb 2011 12:23:32 GTMContent-Length: 453Content-Encoding: gzipVary: Accept-Encoding

Page 65: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 3 Mar 2011 12:23:32 GTMContent-Length: 453Content-Encoding: gzipVary: Accept-Encoding

Page 66: Speedy App: Frontend Performance Considerations
Page 67: Speedy App: Frontend Performance Considerations
Page 68: Speedy App: Frontend Performance Considerations

As of February 2010, estimates of IE6's global market share ranged from 10-20%. Nonetheless, IE6 continues to maintain a plurality or even majority presence in the browser market of certain countries, notably China and South Korea.

- Wikipedia

Page 69: Speedy App: Frontend Performance Considerations
Page 70: Speedy App: Frontend Performance Considerations

Vary: *Cache-Control: private

Page 71: Speedy App: Frontend Performance Considerations

Vary: *Cache-Control: private

Page 72: Speedy App: Frontend Performance Considerations
Page 73: Speedy App: Frontend Performance Considerations
Page 74: Speedy App: Frontend Performance Considerations
Page 75: Speedy App: Frontend Performance Considerations
Page 76: Speedy App: Frontend Performance Considerations
Page 77: Speedy App: Frontend Performance Considerations
Page 78: Speedy App: Frontend Performance Considerations
Page 79: Speedy App: Frontend Performance Considerations
Page 80: Speedy App: Frontend Performance Considerations
Page 81: Speedy App: Frontend Performance Considerations
Page 82: Speedy App: Frontend Performance Considerations
Page 83: Speedy App: Frontend Performance Considerations
Page 84: Speedy App: Frontend Performance Considerations
Page 85: Speedy App: Frontend Performance Considerations
Page 86: Speedy App: Frontend Performance Considerations

document.write

Page 87: Speedy App: Frontend Performance Considerations
Page 88: Speedy App: Frontend Performance Considerations
Page 89: Speedy App: Frontend Performance Considerations
Page 90: Speedy App: Frontend Performance Considerations
Page 91: Speedy App: Frontend Performance Considerations
Page 92: Speedy App: Frontend Performance Considerations
Page 93: Speedy App: Frontend Performance Considerations
Page 94: Speedy App: Frontend Performance Considerations

width: expression(document.body.clientWitdh < 600 ? “600px” : “auto”);min-width: 600px;

Page 95: Speedy App: Frontend Performance Considerations
Page 96: Speedy App: Frontend Performance Considerations
Page 97: Speedy App: Frontend Performance Considerations
Page 98: Speedy App: Frontend Performance Considerations
Page 99: Speedy App: Frontend Performance Considerations
Page 100: Speedy App: Frontend Performance Considerations
Page 101: Speedy App: Frontend Performance Considerations
Page 102: Speedy App: Frontend Performance Considerations
Page 103: Speedy App: Frontend Performance Considerations
Page 104: Speedy App: Frontend Performance Considerations
Page 105: Speedy App: Frontend Performance Considerations
Page 106: Speedy App: Frontend Performance Considerations
Page 107: Speedy App: Frontend Performance Considerations
Page 108: Speedy App: Frontend Performance Considerations
Page 109: Speedy App: Frontend Performance Considerations
Page 110: Speedy App: Frontend Performance Considerations
Page 111: Speedy App: Frontend Performance Considerations
Page 112: Speedy App: Frontend Performance Considerations
Page 113: Speedy App: Frontend Performance Considerations
Page 114: Speedy App: Frontend Performance Considerations
Page 115: Speedy App: Frontend Performance Considerations
Page 116: Speedy App: Frontend Performance Considerations
Page 117: Speedy App: Frontend Performance Considerations
Page 118: Speedy App: Frontend Performance Considerations
Page 119: Speedy App: Frontend Performance Considerations
Page 120: Speedy App: Frontend Performance Considerations
Page 121: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKLast-Modified:[...]ETag: 10f24bc-4ab-457e1c1f

GET /nelm.io/foo.jsHOST: nelm.io

GET /nelm.io/foo.jsHOST: nelm.ioIf-Modified-Since: [...]If-None-Match: 10f24bc-4ab-457e1c1f

HTTP/1.1 304 Not Modified

Page 122: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKETag: 10f24bc-4ab-457e1c1f

GET /nelm.io/foo.jsHOST: nelm.io

GET /nelm.io/foo.jsHOST: nelm.ioIf-Modified-Since: [...]If-None-Match: 10f24bc-4ab-457e1c1f

HTTP/1.1 304 Not Modified

Page 123: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKETag: 10f24bc-4ab-457e1c1f

GET /nelm.io/foo.jsHOST: nelm.io

HTTP/1.1 304 Not Modified

GET /nelm.io/foo.jsHOST: nelm.ioIf-None-Match: 10f24bc-4ab-457e1c1f

Page 124: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKETag: 10f24bc-4ab-457e1c1f

GET /nelm.io/foo.jsHOST: nelm.io

GET /nelm.io/foo.jsHOST: nelm.ioIf-None-Match: 10f24bc-4ab-457e1c1f

HTTP/1.1 304 Not Modified

Page 125: Speedy App: Frontend Performance Considerations

HTTP/1.1 200 OKETag: 10f24bc-4ab-457e1c1f

Page 126: Speedy App: Frontend Performance Considerations
Page 127: Speedy App: Frontend Performance Considerations
Page 128: Speedy App: Frontend Performance Considerations
Page 129: Speedy App: Frontend Performance Considerations
Page 130: Speedy App: Frontend Performance Considerations
Page 131: Speedy App: Frontend Performance Considerations
Page 132: Speedy App: Frontend Performance Considerations
Page 133: Speedy App: Frontend Performance Considerations
Page 134: Speedy App: Frontend Performance Considerations
Page 135: Speedy App: Frontend Performance Considerations
Page 136: Speedy App: Frontend Performance Considerations
Page 137: Speedy App: Frontend Performance Considerations
Page 138: Speedy App: Frontend Performance Considerations
Page 139: Speedy App: Frontend Performance Considerations
Page 140: Speedy App: Frontend Performance Considerations
Page 141: Speedy App: Frontend Performance Considerations
Page 142: Speedy App: Frontend Performance Considerations
Page 143: Speedy App: Frontend Performance Considerations
Page 144: Speedy App: Frontend Performance Considerations