Speedy App: Frontend Performance Considerations

14,063 views
13,274 views

Published on

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!

Published in: Technology, Education
4 Comments
29 Likes
Statistics
Notes
No Downloads
Views
Total views
14,063
On SlideShare
0
From Embeds
0
Number of Embeds
3,301
Actions
Shares
0
Downloads
172
Comments
4
Likes
29
Embeds 0
No embeds

No notes for slide

Speedy App: Frontend Performance Considerations

  1. GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioHTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Wed, 23 Feb 2011 17:00:00 GTMContent-Length: 453
  2. GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioHTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 30 Sep 2011 17:00:00 GTMContent-Length: 453
  3. GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioHTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 30 Sep 2011 17:00:00 GTMContent-Length: 453
  4. GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioIf-Modified-Since: Thu, 30 Sep 2011 17:00:00 GTMHTTP/1.1 304 Not ModifiedContent-Type: text/html; charset=UTF-8Last-Modified: Wed, 23 Feb 2011 17:00:00 GTM
  5. GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioIf-Modified-Since: Thu, 30 Sep 2011 17:00:00 GTMHTTP/1.1 304 Not ModifiedContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 30 Sep 2011 17:00:00 GTM
  6. <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeH h0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP/ 5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0Ccgu Ww6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj" width="16" height="14" alt="Play">
  7. 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
  8. HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 30 Sep 2011 17:00:00 GTMExpires: Thu, 30 Sep 2011 21:00:00 GTM
  9. HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 30 Sep 2011 17:00:00 GTMExpires: Thu, 30 Sep 2021 21:00:00 GTM
  10. HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 30 Sep 2011 17:00:00 GTMCache-Control: max-age=315360000
  11. HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 30 Sep 2011 17:00:00 GTMCache-Control: max-age=315360000
  12. HTTP/1.1 200 OKContent-Type: application/x-javascriptLast-Modified: Thu, 30 Sep 2011 17:00:00 GTMCache-Control: max-age=315360000
  13. <FilesMatch ".(gif|jpg|js|css)"> ExpiresDefault "access plus 10 years"</FilesMatch>
  14. GET /nelm.io/pierreHTTP/1.1HOST: nelm.ioAccept-Encoding: gzip,deflateHTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 30 Sep 2011 17:00:00 GTMContent-Length: 453Content-Encoding: gzip
  15. HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Wed, 23 Feb 2011 17:00:00 GTMContent-Length: 453Content-Encoding: gzipVary: Accept-Encoding
  16. HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Last-Modified: Thu, 30 Sep 2011 17:00:00 GTMContent-Length: 453Content-Encoding: gzipVary: Accept-Encoding
  17. As of February 2010, estimates of IE6sglobal market share ranged from 10-20%.Nonetheless, IE6 continues to maintain aplurality or even majority presence in thebrowser market of certain countries,notably China and South Korea. - Wikipedia
  18. Vary: *Cache-Control: private
  19. Vary: *Cache-Control: private
  20. document.write
  21. width: expression(document.body.clientWitdh < 600 ? “600px” : “auto”);min-width: 600px;
  22. GET /nelm.io/foo.js GET /nelm.io/foo.jsHOST: nelm.io HOST: nelm.io If-Modified-Since: [...] If-None-Match: 10f24bc-4abHTTP/1.1 200 OK HTTP/1.1 304 Not ModifiedLast-Modified:[...]ETag: 10f24bc-4ab-457e1c1f
  23. GET /nelm.io/foo.js GET /nelm.io/foo.jsHOST: nelm.io HOST: nelm.io If-Modified-Since: [...] If-None-Match: 10f24bc-4ab HTTP/1.1 304 Not ModifiedHTTP/1.1 200 OKETag: 10f24bc-4ab-457e1c1f
  24. GET /nelm.io/foo.js GET /nelm.io/foo.jsHOST: nelm.io HOST: nelm.io If-None-Match: 10f24bc-4ab HTTP/1.1 304 Not ModifiedHTTP/1.1 200 OKETag: 10f24bc-4ab-457e1c1f
  25. GET /nelm.io/foo.js GET /nelm.io/foo.jsHOST: nelm.io HOST: nelm.io If-None-Match: 10f24bc-4ab HTTP/1.1 304 Not ModifiedHTTP/1.1 200 OKETag: 10f24bc-4ab-457e1c1f
  26. HTTP/1.1 200 OKETag: 10f24bc-4ab-457e1c1f

×