improving front end performance
TRANSCRIPT
Friday, May 4, 2012
This Slide Is Blank
Friday, May 4, 2012
Friday, May 4, 2012
http://josephscott.org/
@josephscott
Friday, May 4, 2012
ImprovingFront-EndPerformance
Friday, May 4, 2012
Improve the Perceived Responsiveness of a Site
Friday, May 4, 2012
The Measurements
Friday, May 4, 2012
Chrome Network Panel
Friday, May 4, 2012
Chrome Page Speed
Friday, May 4, 2012
webpagetest.org
http://www.webpagetest.org/result/120501_S5_45YNJ/
Friday, May 4, 2012
The Techniques
Friday, May 4, 2012
HTTP Compression
Friday, May 4, 2012
HTTP Compression
Request: Accept-Encoding: deflate, gzip
Response: Content-Encoding: gzip
Friday, May 4, 2012
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
HTTP Compression
Response: Vary: Accept-Encoding
Friday, May 4, 2012
HTTP Keep Alive
Friday, May 4, 2012
HTTP Keep Alive
Request: Connection: keep-alive
Response: Connection: keep-alive
Friday, May 4, 2012
HTTP Caching
Friday, May 4, 2012
HTTP Caching
Response:
Expires: Fri, 05 May 2017 01:06:01 GMT
Friday, May 4, 2012
HTTP Caching
Response:
Cache-Control: max-age: 31536000
Friday, May 4, 2012
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
HTTP Caching
Response: Etag: "850d9-d2ff-4b881f248ec80"
Request: If-None-Match: "850d9-d2ff-4b881f248ec80"
Friday, May 4, 2012
HTTP Caching
Response: HTTP/1.1 200 OK
HTTP/1.1 304 Not Modified
Friday, May 4, 2012
HTTP Caching
Etag, so misunderstood
Friday, May 4, 2012
HTTP Caching
Updating Cached Resources
Friday, May 4, 2012
HTTP Caching
http://example.com/css/style.css?v=1
http://example.com/css/style.1.css
Friday, May 4, 2012
Avoid Redirects
Friday, May 4, 2012
Avoid Redirects
utah.gov
Friday, May 4, 2012
Avoid Redirects
utah.gov
utah.gov/index.html
Friday, May 4, 2012
Avoid Redirects
utah.gov
utah.gov/index.html
120ms
Friday, May 4, 2012
Avoid Redirects
deseretnews.com
Friday, May 4, 2012
Avoid Redirects
deseretnews.com
www.deseretnews.com/
Friday, May 4, 2012
Avoid Redirects
deseretnews.com
www.deseretnews.com/
www.deseretnews.com/home/
Friday, May 4, 2012
Avoid Redirects
deseretnews.com
www.deseretnews.com/
www.deseretnews.com/home/
150ms
150ms
Friday, May 4, 2012
CSS
Friday, May 4, 2012
CSS
Always at the top!
Friday, May 4, 2012
CSS
#IDs are only slightly faster than .CLASSes
Friday, May 4, 2012
CSS
#nav a
Browsers read right to left
Friday, May 4, 2012
CSS
Bad: #nav * { }
Better: #nav a { }
Betterest: #nav .now { }
Friday, May 4, 2012
CSS
html body .wrapper #content a{}
VS.
#content a{}
Friday, May 4, 2012
CSS
https://developer.mozilla.org/en/Writing_Efficient_CSS
https://developers.google.com/speed/docs/best-practices/rendering
Friday, May 4, 2012
CSS
Minify your CSS files
Friday, May 4, 2012
CSS
Use CSS Sprites
http://spriteme.org/
Friday, May 4, 2012
Javascript
Friday, May 4, 2012
Javascript
Always at the bottom!
Friday, May 4, 2012
JavascriptBottom and Async!
Friday, May 4, 2012
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
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
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
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
Javascript
jQuerySelector Performance
Friday, May 4, 2012
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
Javascript
$('#box > p');
$('#box p');
$('#box').children('p');
$('p', $('#box'));
$('p', '#box');
Friday, May 4, 2012
Javascript
$('#box > p'); /* Horrible! */
$('#box p'); /* Horrible! */
$('#box').children('p'); /* Bad */
$('p', $('#box')); /* Less Bad */
$('p', '#box'); /* Less Bad */
Friday, May 4, 2012
Javascript
$('#box').find('p');
$('p', box);
box.find('p');
Friday, May 4, 2012
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
Javascript
document.getElementById("box").getElementsByTagName("p");
box.find('p');
Friday, May 4, 2012
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
Javascript
Be careful withevent handlers
Friday, May 4, 2012
Javascript
Carefully minimizeyour Javascript
Friday, May 4, 2012
Various Tips
Friday, May 4, 2012
Separate DomainFor Static Resources
example.com
fakecdn.example.com
fakecdnexample.com
Friday, May 4, 2012
Optimize Images
pngcrush
jpegtran
http://www.smushit.com/ysmush.it/
http://imageoptim.com/
Friday, May 4, 2012
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
Have a favicon.ico
Small
Cacheable
Friday, May 4, 2012
Cacheable AJAX
Standard Rules Apply
Friday, May 4, 2012
Experiment with cuzillion
http://stevesouders.com/cuzillion/
Friday, May 4, 2012
Experiment with Browserscope
http://www.browserscope.org/
Friday, May 4, 2012
Questions?
Friday, May 4, 2012
http://josephscott.org/
@josephscott
Friday, May 4, 2012