1. Friday, May 4, 2012

2. This Slide Is Blank
Friday, May 4, 2012

3. Friday, May 4, 2012

4. joseph@josephscott.org
http://josephscott.org/
@josephscott
Friday, May 4, 2012

5. Improving
Front-End
Performance
Friday, May 4, 2012

6. Improve the
Perceived
Responsiveness
of a Site
Friday, May 4, 2012

7. The
Measurements
Friday, May 4, 2012

8. Chrome
Network Panel
Friday, May 4, 2012

9. Chrome
Page Speed
Friday, May 4, 2012

10. webpagetest.org
http://www.webpagetest.org/result/120501_S5_45YNJ/
Friday, May 4, 2012

11. The Techniques
Friday, May 4, 2012

12. HTTP Compression
Friday, May 4, 2012

13. HTTP Compression
Request:
Accept-Encoding: deflate, gzip
Response:
Content-Encoding: gzip
Friday, May 4, 2012

14. HTTP Compression
HTTP/1.1 200 OK
Expires: Sun, 26 Dec 2032 06:12:01 GMT
Vary: Accept-Encoding
Content-Encoding: gzip
Last-Modified: Wed, 25 Apr 2012 15:27:45 GMT
ETag: "2942247273"
Content-Type: text/css
Accept-Ranges: bytes
Content-Length: 43524
Date: Fri, 27 Apr 2012 02:09:28 GMT
Server: lighttpd-yt/1.4.18
Age: 227872
Cache-Control: public, max-age=31104000
youtube.com CSS Request
Friday, May 4, 2012

15. HTTP Compression
Response:
Vary: Accept-Encoding
Friday, May 4, 2012

16. HTTP Keep Alive
Friday, May 4, 2012

17. HTTP Keep Alive
Request:
Connection: keep-alive
Response:
Connection: keep-alive
Friday, May 4, 2012

18. HTTP Caching
Friday, May 4, 2012

19. HTTP Caching
Response:
Expires: Fri, 05 May 2017 01:06:01 GMT
Friday, May 4, 2012

20. HTTP Caching
Response:
Cache-Control: max-age: 31536000
Friday, May 4, 2012

21. 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

22. HTTP Caching
Response:
Etag: "850d9-d2ff-4b881f248ec80"
Request:
If-None-Match: "850d9-d2ff-4b881f248ec80"
Friday, May 4, 2012

23. HTTP Caching
Response:
HTTP/1.1 200 OK
HTTP/1.1 304 Not Modified
Friday, May 4, 2012

24. HTTP Caching
Etag, so misunderstood
Friday, May 4, 2012

25. HTTP Caching
Updating Cached Resources
Friday, May 4, 2012

26. HTTP Caching
http://example.com/css/style.css?v=1
http://example.com/css/style.1.css
Friday, May 4, 2012

27. Avoid Redirects
Friday, May 4, 2012

28. Avoid Redirects
utah.gov
Friday, May 4, 2012

29. Avoid Redirects
utah.gov
utah.gov/index.html
Friday, May 4, 2012

30. Avoid Redirects
utah.gov
120ms
utah.gov/index.html
Friday, May 4, 2012

31. Avoid Redirects
deseretnews.com
Friday, May 4, 2012

32. Avoid Redirects
deseretnews.com
www.deseretnews.com/
Friday, May 4, 2012

33. Avoid Redirects
deseretnews.com
www.deseretnews.com/
www.deseretnews.com/home/
Friday, May 4, 2012

34. Avoid Redirects
deseretnews.com
150ms
www.deseretnews.com/
150ms
www.deseretnews.com/home/
Friday, May 4, 2012

35. CSS
Friday, May 4, 2012

36. CSS
Always at the top!
Friday, May 4, 2012

37. CSS
#IDs are only slightly
faster than .CLASSes
Friday, May 4, 2012

38. CSS
#nav a
Browsers read right to left
Friday, May 4, 2012

39. CSS
Bad: #nav * { }
Better: #nav a { }
Betterest: #nav .now { }
Friday, May 4, 2012

40. CSS
html body .wrapper #content a{}
VS.
#content a{}
Friday, May 4, 2012

41. CSS
https://developer.mozilla.org/en/
Writing_Efficient_CSS
https://developers.google.com/
speed/docs/best-practices/rendering
Friday, May 4, 2012

42. CSS
Minify your CSS files
Friday, May 4, 2012

43. CSS
Use CSS Sprites
http://spriteme.org/
Friday, May 4, 2012

44. Javascript
Friday, May 4, 2012

45. Javascript
Always at the
bottom!
Friday, May 4, 2012

46. Javascript
Bottom and Async!
Friday, May 4, 2012

47. Javascript
Bottom 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

48. Javascript
Bottom 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

49. Javascript
Bottom 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

50. Javascript
Bottom 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

51. Javascript
jQuery
Selector Performance
Friday, May 4, 2012

52. 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

53. Javascript
$('#box > p');
$('#box p');
$('#box').children('p');
$('p', $('#box'));
$('p', '#box');
Friday, May 4, 2012

54. Javascript
$('#box > p'); /* Horrible! */
$('#box p'); /* Horrible! */
$('#box').children('p'); /* Bad */
$('p', $('#box')); /* Less Bad */
$('p', '#box'); /* Less Bad */
Friday, May 4, 2012

55. Javascript
box.find('p');
$('p', box);
$('#box').find('p');
Friday, May 4, 2012

56. Javascript
box.find('p'); /* Best! */
$('p', box); /* Almost there! */
$('#box').find('p'); /* Better */
http://jsperf.com/jquery-selector-perf-right-to-left/57
Friday, May 4, 2012

57. Javascript
box.find('p');
document.getElementById
("box").getElementsByTagName("p");
Friday, May 4, 2012

58. Javascript
box.find('p'); /* 48k ops/sec */
document.getElementById
("box").getElementsByTagName("p");
/* 2,000k ops/sec */
http://jsperf.com/jquery-selector-perf-right-to-left/91
Friday, May 4, 2012

59. Javascript
Be careful with
event handlers
Friday, May 4, 2012

60. Javascript
Carefully minimize
your Javascript
Friday, May 4, 2012

61. Various Tips
Friday, May 4, 2012

62. Separate Domain
For Static Resources
example.com
fakecdn.example.com
fakecdnexample.com
Friday, May 4, 2012

63. Optimize Images
pngcrush
jpegtran
http://www.smushit.com/ysmush.it/
http://imageoptim.com/
Friday, May 4, 2012

64. 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

65. Have a favicon.ico
Small
Cacheable
Friday, May 4, 2012

66. Cacheable AJAX
Standard Rules Apply
Friday, May 4, 2012

67. Experiment with cuzillion
http://stevesouders.com/cuzillion/
Friday, May 4, 2012

68. Experiment with
Browserscope
http://www.browserscope.org/
Friday, May 4, 2012

69. Questions?
Friday, May 4, 2012

70. joseph@josephscott.org
http://josephscott.org/
@josephscott
Friday, May 4, 2012