Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Asset Positioning for Performance

2,038 views

Published on

An internal presentation at Viget to the design team about how asset positioning in markup can have a significant impact on performance.

Published in: Technology, Business

Asset Positioning for Performance

  1. 1. SKILLFULLY USING ALL OF YOUR ASSETS FOR IMPROVED PERFORMANCE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  2. 2. THE PREMISE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  3. 3. FASTER SITES ARE BETTER VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  4. 4. FACEBOOK.COM: EMPTY CACHE BACK-END FRONT-END 5% 95% VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  5. 5. FACEBOOK.COM: PRIMED CACHE BACK-END FRONT-END 19% 81% VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  6. 6. FRONT-END PERFORMANCE MATTERS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  7. 7. THE FACTORS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  8. 8. IMAGE SIZES VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  9. 9. IMAGE SIZES HTTP REQUESTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  10. 10. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  11. 11. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  12. 12. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT CSS EXPRESSIONS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  13. 13. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT CSS EXPRESSIONS CSS & JS POSITIONING VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  14. 14. CSS & JS POSITIONING VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  15. 15. THE RULES VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  16. 16. Rule #1: TWO AT A TIME VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  17. 17. Rule #2: SCRIPTS CAN BLOCK VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  18. 18. Part 1: STYLESHEETS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  19. 19. DON’T USE @IMPORT VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  20. 20. DON’T USE @IMPORT unless it’s all you use & it’s all at a single level VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  21. 21. HTML: @import “a.css” HTML: @import “b.css” VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  22. 22. HTML: @import “a.css” HTML: @import “b.css” HTML a.css b.css VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  23. 23. HTML: @import “a.css” HTML: @import “b.css” HTML a.css b.css Single-level @import only: not so bad VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  24. 24. HTML: LINK “a.css” HTML: @import “b.css” VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  25. 25. HTML: LINK “a.css” HTML: @import “b.css” HTML a.css b.css VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  26. 26. HTML: LINK “a.css” HTML: @import “b.css” HTML a.css b.css Mixed LINK and @import: Breaks IE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  27. 27. HTML: LINK “a.css” a.css: @import “b.css” HTML a.css b.css @import inside LINK: Breaks ALL VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  28. 28. HTML: LINK “a.css” a.css: @import “b.css” HTML a.css b.css @import inside LINK: Breaks ALL VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  29. 29. HTML: LINK “a.css” HTML: LINK “b.css” b.css: @import “c.css” HTML a.css b.css c.css LINK blocks @import on IE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  30. 30. HTML: LINK “a.css” HTML: LINK “b.css” b.css: @import “c.css” HTML a.css b.css c.css but NOT on other browsers VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  31. 31. HTML: LINK “a.css” HTML: LINK “b.css” HTML: LINK “c.css” HTML a.css b.css c.css All LINKs work as expected VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  32. 32. WHY NOT JUST USE @IMPORT ONLY? VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  33. 33. Part 2: SCRIPTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  34. 34. IE PRIORITIZES SCRIPTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  35. 35. HTML: @import “a.css” HTML: @import “b.css” HTML: @import “c.css” HTML: SCRIPT “test.js” HTML test.js a.css b.css c.css @import is prioritized below header SCRIPT VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  36. 36. SCRIPTS CAN BLOCK VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  37. 37. IE 6/7, FIREFOX 2/3, SAFARI 3, CHROME 1, OPERA: HTML test.js test2.js a.css img.jpg VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  38. 38. IE8, SAFARI 4, CHROME 2 HTML test.js test2.js a.css img.jpg VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  39. 39. SCRIPT DOM ELEMENTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  40. 40. SCRIPT DOM ELEMENTS DON’T BLOCK CROSS-SITE EASILY-UNDERSTOOD TRIGGERS BUSY INDICATORS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  41. 41. SCRIPT DOM ELEMENTS DOESN’T PRESERVE SCRIPT ORDER EXCEPT FOR FIREFOX AND OPERA VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  42. 42. SCRIPT DEFERRAL VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  43. 43. SCRIPT DEFERRAL defer=”defer” ENFORECES LOAD ORDER IN IE, SAFARI 4, CHROME 2, FF 3.1 VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  44. 44. SCRIPTS AT THE BOTTOM unless you need them sooner VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  45. 45. FIN VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  46. 46. Get in Touch! speakerrate.com/whafro jackson@jounce.net @whafro VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

×