improving front end performance
TRANSCRIPT
![Page 1: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/1.jpg)
Friday, May 4, 2012
![Page 2: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/2.jpg)
This Slide Is Blank
Friday, May 4, 2012
![Page 3: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/3.jpg)
Friday, May 4, 2012
![Page 4: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/4.jpg)
http://josephscott.org/
@josephscott
Friday, May 4, 2012
![Page 5: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/5.jpg)
ImprovingFront-EndPerformance
Friday, May 4, 2012
![Page 6: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/6.jpg)
Improve the Perceived Responsiveness of a Site
Friday, May 4, 2012
![Page 7: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/7.jpg)
The Measurements
Friday, May 4, 2012
![Page 8: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/8.jpg)
Chrome Network Panel
Friday, May 4, 2012
![Page 9: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/9.jpg)
Chrome Page Speed
Friday, May 4, 2012
![Page 10: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/10.jpg)
webpagetest.org
http://www.webpagetest.org/result/120501_S5_45YNJ/
Friday, May 4, 2012
![Page 11: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/11.jpg)
The Techniques
Friday, May 4, 2012
![Page 12: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/12.jpg)
HTTP Compression
Friday, May 4, 2012
![Page 13: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/13.jpg)
HTTP Compression
Request: Accept-Encoding: deflate, gzip
Response: Content-Encoding: gzip
Friday, May 4, 2012
![Page 14: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/14.jpg)
HTTP Compression
HTTP/1.1 200 OKExpires: Sun, 26 Dec 2032 06:12:01 GMTVary: Accept-EncodingContent-Encoding: gzipLast-Modified: Wed, 25 Apr 2012 15:27:45 GMTETag: "2942247273"Content-Type: text/cssAccept-Ranges: bytesContent-Length: 43524Date: Fri, 27 Apr 2012 02:09:28 GMTServer: lighttpd-yt/1.4.18Age: 227872Cache-Control: public, max-age=31104000
youtube.com CSS Request
Friday, May 4, 2012
![Page 15: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/15.jpg)
HTTP Compression
Response: Vary: Accept-Encoding
Friday, May 4, 2012
![Page 16: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/16.jpg)
HTTP Keep Alive
Friday, May 4, 2012
![Page 17: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/17.jpg)
HTTP Keep Alive
Request: Connection: keep-alive
Response: Connection: keep-alive
Friday, May 4, 2012
![Page 18: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/18.jpg)
HTTP Caching
Friday, May 4, 2012
![Page 19: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/19.jpg)
HTTP Caching
Response:
Expires: Fri, 05 May 2017 01:06:01 GMT
Friday, May 4, 2012
![Page 20: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/20.jpg)
HTTP Caching
Response:
Cache-Control: max-age: 31536000
Friday, May 4, 2012
![Page 21: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/21.jpg)
HTTP Caching
Response: Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
Request:If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
Friday, May 4, 2012
![Page 22: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/22.jpg)
HTTP Caching
Response: Etag: "850d9-d2ff-4b881f248ec80"
Request: If-None-Match: "850d9-d2ff-4b881f248ec80"
Friday, May 4, 2012
![Page 23: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/23.jpg)
HTTP Caching
Response: HTTP/1.1 200 OK
HTTP/1.1 304 Not Modified
Friday, May 4, 2012
![Page 24: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/24.jpg)
HTTP Caching
Etag, so misunderstood
Friday, May 4, 2012
![Page 25: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/25.jpg)
HTTP Caching
Updating Cached Resources
Friday, May 4, 2012
![Page 26: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/26.jpg)
HTTP Caching
http://example.com/css/style.css?v=1
http://example.com/css/style.1.css
Friday, May 4, 2012
![Page 27: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/27.jpg)
Avoid Redirects
Friday, May 4, 2012
![Page 28: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/28.jpg)
Avoid Redirects
utah.gov
Friday, May 4, 2012
![Page 29: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/29.jpg)
Avoid Redirects
utah.gov
utah.gov/index.html
Friday, May 4, 2012
![Page 30: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/30.jpg)
Avoid Redirects
utah.gov
utah.gov/index.html
120ms
Friday, May 4, 2012
![Page 31: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/31.jpg)
Avoid Redirects
deseretnews.com
Friday, May 4, 2012
![Page 32: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/32.jpg)
Avoid Redirects
deseretnews.com
www.deseretnews.com/
Friday, May 4, 2012
![Page 33: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/33.jpg)
Avoid Redirects
deseretnews.com
www.deseretnews.com/
www.deseretnews.com/home/
Friday, May 4, 2012
![Page 34: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/34.jpg)
Avoid Redirects
deseretnews.com
www.deseretnews.com/
www.deseretnews.com/home/
150ms
150ms
Friday, May 4, 2012
![Page 35: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/35.jpg)
CSS
Friday, May 4, 2012
![Page 36: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/36.jpg)
CSS
Always at the top!
Friday, May 4, 2012
![Page 37: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/37.jpg)
CSS
#IDs are only slightly faster than .CLASSes
Friday, May 4, 2012
![Page 38: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/38.jpg)
CSS
#nav a
Browsers read right to left
Friday, May 4, 2012
![Page 39: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/39.jpg)
CSS
Bad: #nav * { }
Better: #nav a { }
Betterest: #nav .now { }
Friday, May 4, 2012
![Page 40: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/40.jpg)
CSS
html body .wrapper #content a{}
VS.
#content a{}
Friday, May 4, 2012
![Page 41: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/41.jpg)
CSS
https://developer.mozilla.org/en/Writing_Efficient_CSS
https://developers.google.com/speed/docs/best-practices/rendering
Friday, May 4, 2012
![Page 42: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/42.jpg)
CSS
Minify your CSS files
Friday, May 4, 2012
![Page 43: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/43.jpg)
CSS
Use CSS Sprites
http://spriteme.org/
Friday, May 4, 2012
![Page 44: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/44.jpg)
Javascript
Friday, May 4, 2012
![Page 45: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/45.jpg)
Javascript
Always at the bottom!
Friday, May 4, 2012
![Page 46: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/46.jpg)
JavascriptBottom and Async!
Friday, May 4, 2012
![Page 47: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/47.jpg)
JavascriptBottom and Async!
(function() { var js = document.createElement( 'script' ); js.async = true; js.src = '/js/awesome.js’;
var s = document.getElementsByTagName( 'script' )[0]; s.parentNode.insertBefore( js, s );} )();
Friday, May 4, 2012
![Page 48: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/48.jpg)
JavascriptBottom and Async!
(function() { var js = document.createElement( 'script' ); js.async = true; js.src = '/js/awesome.js’;
var s = document.getElementsByTagName( 'script' )[0]; s.parentNode.insertBefore( js, s );} )();
Friday, May 4, 2012
![Page 49: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/49.jpg)
JavascriptBottom and Async!
(function() { var js = document.createElement( 'script' ); js.async = true; js.src = '/js/awesome.js’;
var s = document.getElementsByTagName( 'script' )[0]; s.parentNode.insertBefore( js, s );} )();
Friday, May 4, 2012
![Page 50: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/50.jpg)
JavascriptBottom and Async!
(function() { var js = document.createElement( 'script' ); js.async = true; js.src = '/js/awesome.js’;
var s = document.getElementsByTagName( 'script' )[0]; s.parentNode.insertBefore( js, s );} )();
Friday, May 4, 2012
![Page 51: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/51.jpg)
Javascript
jQuerySelector Performance
Friday, May 4, 2012
![Page 52: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/52.jpg)
Javascript
<div id="box"> <p> Hi </p></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script> var box = $('#box');</script>
Friday, May 4, 2012
![Page 53: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/53.jpg)
Javascript
$('#box > p');
$('#box p');
$('#box').children('p');
$('p', $('#box'));
$('p', '#box');
Friday, May 4, 2012
![Page 54: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/54.jpg)
Javascript
$('#box > p'); /* Horrible! */
$('#box p'); /* Horrible! */
$('#box').children('p'); /* Bad */
$('p', $('#box')); /* Less Bad */
$('p', '#box'); /* Less Bad */
Friday, May 4, 2012
![Page 55: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/55.jpg)
Javascript
$('#box').find('p');
$('p', box);
box.find('p');
Friday, May 4, 2012
![Page 56: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/56.jpg)
Javascript
$('#box').find('p'); /* Better */
$('p', box); /* Almost there! */
box.find('p'); /* Best! */
http://jsperf.com/jquery-selector-perf-right-to-left/57
Friday, May 4, 2012
![Page 57: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/57.jpg)
Javascript
document.getElementById("box").getElementsByTagName("p");
box.find('p');
Friday, May 4, 2012
![Page 58: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/58.jpg)
Javascript
document.getElementById("box").getElementsByTagName("p");/* 2,000k ops/sec */
box.find('p'); /* 48k ops/sec */
http://jsperf.com/jquery-selector-perf-right-to-left/91
Friday, May 4, 2012
![Page 59: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/59.jpg)
Javascript
Be careful withevent handlers
Friday, May 4, 2012
![Page 60: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/60.jpg)
Javascript
Carefully minimizeyour Javascript
Friday, May 4, 2012
![Page 61: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/61.jpg)
Various Tips
Friday, May 4, 2012
![Page 62: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/62.jpg)
Separate DomainFor Static Resources
example.com
fakecdn.example.com
fakecdnexample.com
Friday, May 4, 2012
![Page 63: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/63.jpg)
Optimize Images
pngcrush
jpegtran
http://www.smushit.com/ysmush.it/
http://imageoptim.com/
Friday, May 4, 2012
![Page 64: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/64.jpg)
Delay Loading Resources
<img data-gravatar_hash="713072bbe89035a79c17d19e53dd5d9b" class="load-gravatar" height="64" width="64" src="https://secure.gravatar.com/avatar/00000000000000000000000000000000?s=64&d=mm" />
https://github.com/josephscott/async-gravatars
Friday, May 4, 2012
![Page 65: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/65.jpg)
Have a favicon.ico
Small
Cacheable
Friday, May 4, 2012
![Page 66: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/66.jpg)
Cacheable AJAX
Standard Rules Apply
Friday, May 4, 2012
![Page 67: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/67.jpg)
Experiment with cuzillion
http://stevesouders.com/cuzillion/
Friday, May 4, 2012
![Page 68: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/68.jpg)
Experiment with Browserscope
http://www.browserscope.org/
Friday, May 4, 2012
![Page 69: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/69.jpg)
Questions?
Friday, May 4, 2012
![Page 70: Improving Front End Performance](https://reader034.vdocuments.mx/reader034/viewer/2022042601/5552beceb4c905920f8b4709/html5/thumbnails/70.jpg)
http://josephscott.org/
@josephscott
Friday, May 4, 2012