improving front end performance

Friday, May 4, 2012

This Slide Is Blank

Friday, May 4, 2012

Friday, May 4, 2012

joseph@josephscott.org

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

joseph@josephscott.org

http://josephscott.org/

@josephscott

Friday, May 4, 2012