Speedy App: Frontend Performance Considerations

Preview:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vary: *Cache-Control: private

Vary: *Cache-Control: private

document.write

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

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

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

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

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

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