Improving Front End Performance
Upcoming SlideShare
Loading in...5
×
 

Improving Front End Performance

on

  • 4,433 views

 

Statistics

Views

Total Views
4,433
Views on SlideShare
2,063
Embed Views
2,370

Actions

Likes
6
Downloads
8
Comments
0

6 Embeds 2,370

http://josephscott.org 2357
http://feedonfeeds.ftwr.co.uk 5
http://207.46.192.232 4
http://translate.googleusercontent.com 2
http://www.newsblur.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Improving Front End Performance Improving Front End Performance Presentation Transcript

  • Friday, May 4, 2012
  • This Slide Is BlankFriday, May 4, 2012
  • Friday, May 4, 2012
  • joseph@josephscott.org http://josephscott.org/ @josephscottFriday, May 4, 2012
  • Improving Front-End PerformanceFriday, May 4, 2012
  • Improve the Perceived Responsiveness of a SiteFriday, May 4, 2012
  • The MeasurementsFriday, May 4, 2012
  • Chrome Network PanelFriday, May 4, 2012
  • Chrome Page SpeedFriday, May 4, 2012
  • webpagetest.org http://www.webpagetest.org/result/120501_S5_45YNJ/Friday, May 4, 2012
  • The TechniquesFriday, May 4, 2012
  • HTTP CompressionFriday, May 4, 2012
  • HTTP Compression Request: Accept-Encoding: deflate, gzip Response: Content-Encoding: gzipFriday, May 4, 2012
  • 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 RequestFriday, May 4, 2012
  • HTTP Compression Response: Vary: Accept-EncodingFriday, May 4, 2012
  • HTTP Keep AliveFriday, May 4, 2012
  • HTTP Keep Alive Request: Connection: keep-alive Response: Connection: keep-aliveFriday, May 4, 2012
  • HTTP CachingFriday, May 4, 2012
  • HTTP Caching Response: Expires: Fri, 05 May 2017 01:06:01 GMTFriday, May 4, 2012
  • HTTP Caching Response: Cache-Control: max-age: 31536000Friday, 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 GMTFriday, 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 ModifiedFriday, May 4, 2012
  • HTTP Caching Etag, so misunderstoodFriday, May 4, 2012
  • HTTP Caching Updating Cached ResourcesFriday, May 4, 2012
  • HTTP Caching http://example.com/css/style.css?v=1 http://example.com/css/style.1.cssFriday, May 4, 2012
  • Avoid RedirectsFriday, May 4, 2012
  • Avoid Redirects utah.govFriday, May 4, 2012
  • Avoid Redirects utah.gov utah.gov/index.htmlFriday, May 4, 2012
  • Avoid Redirects utah.gov 120ms utah.gov/index.htmlFriday, May 4, 2012
  • Avoid Redirects deseretnews.comFriday, 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 150ms www.deseretnews.com/ 150ms www.deseretnews.com/home/Friday, May 4, 2012
  • CSSFriday, May 4, 2012
  • CSS Always at the top!Friday, May 4, 2012
  • CSS #IDs are only slightly faster than .CLASSesFriday, May 4, 2012
  • CSS #nav a Browsers read right to leftFriday, 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/renderingFriday, May 4, 2012
  • CSS Minify your CSS filesFriday, May 4, 2012
  • CSS Use CSS Sprites http://spriteme.org/Friday, May 4, 2012
  • JavascriptFriday, May 4, 2012
  • Javascript Always at the bottom!Friday, May 4, 2012
  • Javascript Bottom and Async!Friday, May 4, 2012
  • 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
  • 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
  • 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
  • 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
  • Javascript jQuery Selector PerformanceFriday, 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); /* Best! */ $(p, box); /* Almost there! */ $(#box).find(p); /* Better */ http://jsperf.com/jquery-selector-perf-right-to-left/57Friday, May 4, 2012
  • Javascript box.find(p); document.getElementById ("box").getElementsByTagName("p");Friday, May 4, 2012
  • 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/91Friday, May 4, 2012
  • Javascript Be careful with event handlersFriday, May 4, 2012
  • Javascript Carefully minimize your JavascriptFriday, May 4, 2012
  • Various TipsFriday, May 4, 2012
  • Separate Domain For Static Resources example.com fakecdn.example.com fakecdnexample.comFriday, 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-gravatarsFriday, May 4, 2012
  • Have a favicon.ico Small CacheableFriday, May 4, 2012
  • Cacheable AJAX Standard Rules ApplyFriday, 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/ @josephscottFriday, May 4, 2012