BEING A TWEAKER - MODERN WEBPERFORMANCE TECHNIQUESChris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/Ch...
Diamond Sponsor       CTREC Hiltonhttp://www.ctrechilton.com/
TELLAGO
REFERENCESEssential Knowledge forFront-End EngineersSteve Soudershttp://www.stevesouders.com/http://amzn.to/gwf9pGhttp://a...
SPEED KILLS Customers/Users Are Impatient Speed SEO Factor Amazon: 1 Click Purchase   Case Study Wal-Mart
SPEED KILLShttp://bit.ly/xfvPMC
SPEED KILLShttp://bit.ly/xfvPMC
SPEED KILLS For every 1 second of improvement they  experienced up to a 2% increase in  conversions For every 100 ms of ...
TOOLS   IE – F12     Networking     Profiling   FireFox     FireBug     – Yslow Plugin   WebKit     Developer     T...
MAKE FEWER REQUESTS•   Each Request Adds More Overhead•   Avoid Slicing Images that are not Reused•   Image Maps•   CSS Sp...
BUNDLING & MINIFICATION Reduces Requests Reduces Size JSMin http://bit.ly/tzBeo YUI Compressor http://yhoo.it/AWec Go...
BUNDLING & MINIFICATION ASP.NET 4.0 Includes New Tool Gu’s Blog Post http://bit.ly/su4zHd JS & CSS Granular Control C...
COMPRESS•   Reduces Content being sent over the wire•   Gzip, Deflate•   Increases Processer Demand on both ends•   IIS 6 ...
IMAGE SPRITES Add Multiple Images  together Great for Icons Use CSS positioning to set  background-image
IMAGE SPRITESdiv {        background:url(icon-sprites.png);        margin:3px;   }  .sprite1  {      width:24px;      heig...
DATA URIS Base64 Encode Data Eliminates Requests Do Not Use for LARGE Images<img src="data:image/png;base64, {mysteryme...
SINGLE PAGE APPS Can Reduce Requests Snappy Page & Content Transitions Be Cautious of Browser Memory Pressures
DEFERRED CONTENT Load Content in the background Predictive Loading Use the IMG load event to load next image
USE CDN   Common Scripts & Resources   Reduces Requests (sort of)   Typically Not Compressed (but that’s OK)
USE CDN<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script> window.jQuery || document...
STYLES @ TOP Browser   needs Styles to Render  Markup Avoid Inline Styles
SCRIPTS @ BOTTOM SCRIPT tag is a blocking Tag Scripts Must Be Evaluated before proceding Allows markup to be rendered 1...
STORAGE LocalStorage IndexDB WebSQL (deprecated)   IndexDB & WebSQL have better perf and    reliability
JQUERY PERFORMANCE Always Use Latest Version Use CDNs (Google, Microsoft)
USE FOR NOT $.EACHvar array = new Array ();for (var i=0; i<10000; i++) {           array[i] = 0;}console.time(native);var ...
USE FOR NOT $.EACH
USE IDS NOT CLASSESconsole.time(class);var list = $(#list);var items = <ul>;for (i=0; i<1000; i++) {                  item...
USE IDS NOT CLASSES
GIVE SELECTORS CONTEXT$(“.class”).takeAction({x:y});Vs$(“.class”, “#container”).takeAction({x:y});
CACHE & CHAIN$(“.class”).takeAction1({x:y});$(“.class”).takeAction2({x:y});$(“.class”).takeAction2({x:y});Vs$(“.class”).ta...
CACHE & CHAINfor (var i=0; i<1000; i++) {       $(#list).append (i);}// much better this wayvar item = $(#list);for (var i...
AVOID DOM MANIPULATIONvar list = ;for (var i=0; i<1000; i++) {      list += <li>+i+</li>;}(#list).html (list);
JOIN NOT CONCATvar array = [];for (var i=0; i<=10000; i++) {      array[i] = <li>+i+</li>;}$(#list).html (array.join ());
RETURN FALSE$(#item).click (function () {// stuff here      return false;});
Upcoming SlideShare
Loading in …5
×

Being a tweaker modern web performance techniques

553 views
488 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
553
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Being a tweaker modern web performance techniques

  1. 1. BEING A TWEAKER - MODERN WEBPERFORMANCE TECHNIQUESChris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
  2. 2. Diamond Sponsor CTREC Hiltonhttp://www.ctrechilton.com/
  3. 3. TELLAGO
  4. 4. REFERENCESEssential Knowledge forFront-End EngineersSteve Soudershttp://www.stevesouders.com/http://amzn.to/gwf9pGhttp://amzn.to/gudayQhttp://developer.yahoo.com/performance/rules.html
  5. 5. SPEED KILLS Customers/Users Are Impatient Speed SEO Factor Amazon: 1 Click Purchase Case Study Wal-Mart
  6. 6. SPEED KILLShttp://bit.ly/xfvPMC
  7. 7. SPEED KILLShttp://bit.ly/xfvPMC
  8. 8. SPEED KILLS For every 1 second of improvement they experienced up to a 2% increase in conversions For every 100 ms of improvement, they grew incremental revenue by up to 1% SEO benefits for entry pages and reduce bounces
  9. 9. TOOLS IE – F12  Networking  Profiling FireFox  FireBug – Yslow Plugin WebKit  Developer Tools Ctrl + Shift + I
  10. 10. MAKE FEWER REQUESTS• Each Request Adds More Overhead• Avoid Slicing Images that are not Reused• Image Maps• CSS Sprites• Inline Images• Combine Scripts and CSS
  11. 11. BUNDLING & MINIFICATION Reduces Requests Reduces Size JSMin http://bit.ly/tzBeo YUI Compressor http://yhoo.it/AWec Google Closure Compiler http://bit.ly/aNwjz AJAXMin http://bit.ly/cCCKEI Cassette http://bit.ly/zsGm8X
  12. 12. BUNDLING & MINIFICATION ASP.NET 4.0 Includes New Tool Gu’s Blog Post http://bit.ly/su4zHd JS & CSS Granular Control Custom Rules Demo http://bit.ly/q5sFNK
  13. 13. COMPRESS• Reduces Content being sent over the wire• Gzip, Deflate• Increases Processer Demand on both ends• IIS 6 and IIS 7• http://technet2.microsoft.com/windowsserver2008/en/library/ 60f3fa55-f005-496e-9d2f-cc4fc2732fce1033.mspx?mfr=true• Blowry• Various ISAPI Filters
  14. 14. IMAGE SPRITES Add Multiple Images together Great for Icons Use CSS positioning to set background-image
  15. 15. IMAGE SPRITESdiv { background:url(icon-sprites.png); margin:3px; } .sprite1 { width:24px; height:26px; background-position: 0px 0px; }
  16. 16. DATA URIS Base64 Encode Data Eliminates Requests Do Not Use for LARGE Images<img src="data:image/png;base64, {mysterymeat} " alt="Texas Rangers">
  17. 17. SINGLE PAGE APPS Can Reduce Requests Snappy Page & Content Transitions Be Cautious of Browser Memory Pressures
  18. 18. DEFERRED CONTENT Load Content in the background Predictive Loading Use the IMG load event to load next image
  19. 19. USE CDN Common Scripts & Resources Reduces Requests (sort of) Typically Not Compressed (but that’s OK)
  20. 20. USE CDN<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script> window.jQuery || document.write("<scriptsrc=@Url.Content("~/js/libs/jquery-1.7.1.min.js")>x3C/script>")</script><scriptsrc="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script><script>window.jQuery.fn.tmpl ||document.write("<scriptsrc=@Url.Content("~/js/libs/jquery.tmpl.min.js")>x3C/script>")</script>
  21. 21. STYLES @ TOP Browser needs Styles to Render Markup Avoid Inline Styles
  22. 22. SCRIPTS @ BOTTOM SCRIPT tag is a blocking Tag Scripts Must Be Evaluated before proceding Allows markup to be rendered 1st (perceived perf) Exception - modernizr
  23. 23. STORAGE LocalStorage IndexDB WebSQL (deprecated) IndexDB & WebSQL have better perf and reliability
  24. 24. JQUERY PERFORMANCE Always Use Latest Version Use CDNs (Google, Microsoft)
  25. 25. USE FOR NOT $.EACHvar array = new Array ();for (var i=0; i<10000; i++) { array[i] = 0;}console.time(native);var l = array.length;for (var i=0;i<l; i++) { array[i] = i;}console.timeEnd(native);console.time(jquery);$.each (array, function (i) { array[i] = i;});console.timeEnd(jquery);
  26. 26. USE FOR NOT $.EACH
  27. 27. USE IDS NOT CLASSESconsole.time(class);var list = $(#list);var items = <ul>;for (i=0; i<1000; i++) { items += <li class="item + i + ">item</li>;}items += </ul>;list.html (items);for (i=0; i<1000; i++) { var s = $(.item + i);}console.timeEnd(class);console.time(id);var list = $(#list);var items = <ul>;for (i=0; i<1000; i++) { items += <li id="item + i + ">item</li>;}items += </ul>;list.html (items);for (i=0; i<1000; i++) { var s = $(#item + i);}console.timeEnd(id);
  28. 28. USE IDS NOT CLASSES
  29. 29. GIVE SELECTORS CONTEXT$(“.class”).takeAction({x:y});Vs$(“.class”, “#container”).takeAction({x:y});
  30. 30. CACHE & CHAIN$(“.class”).takeAction1({x:y});$(“.class”).takeAction2({x:y});$(“.class”).takeAction2({x:y});Vs$(“.class”).takeAction1({x:y}) .takeAction2({x:y}).takeAction3({x:y});
  31. 31. CACHE & CHAINfor (var i=0; i<1000; i++) { $(#list).append (i);}// much better this wayvar item = $(#list);for (var i=0; i<1000; i++) { item.append (i);}
  32. 32. AVOID DOM MANIPULATIONvar list = ;for (var i=0; i<1000; i++) { list += <li>+i+</li>;}(#list).html (list);
  33. 33. JOIN NOT CONCATvar array = [];for (var i=0; i<=10000; i++) { array[i] = <li>+i+</li>;}$(#list).html (array.join ());
  34. 34. RETURN FALSE$(#item).click (function () {// stuff here return false;});

×