Asset Positioning for Performance
•
5 j'aime•926 vues
An internal presentation at Viget to the design team about how asset positioning in markup can have a significant impact on performance.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (19)
Plus de M. Jackson Wilkinson
Dernier
Dernier (20)
Asset Positioning for Performance
- 1. SKILLFULLY USING ALL OF YOUR ASSETS FOR IMPROVED PERFORMANCE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 2. THE PREMISE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 3. FASTER SITES ARE BETTER VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 4. FACEBOOK.COM: EMPTY CACHE BACK-END FRONT-END 5% 95% VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 5. FACEBOOK.COM: PRIMED CACHE BACK-END FRONT-END 19% 81% VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 6. FRONT-END PERFORMANCE MATTERS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 7. THE FACTORS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 8. IMAGE SIZES VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 9. IMAGE SIZES HTTP REQUESTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 10. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 11. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 12. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT CSS EXPRESSIONS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 13. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT CSS EXPRESSIONS CSS & JS POSITIONING VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 14. CSS & JS POSITIONING VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 15. THE RULES VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 16. Rule #1: TWO AT A TIME VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 17. Rule #2: SCRIPTS CAN BLOCK VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 18. Part 1: STYLESHEETS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 19. DON’T USE @IMPORT VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 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. HTML: @import “a.css” HTML: @import “b.css” VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 22. HTML: @import “a.css” HTML: @import “b.css” HTML a.css b.css VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 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. HTML: LINK “a.css” HTML: @import “b.css” VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 25. HTML: LINK “a.css” HTML: @import “b.css” HTML a.css b.css VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 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. 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. 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. 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. 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. 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. WHY NOT JUST USE @IMPORT ONLY? VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 33. Part 2: SCRIPTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 34. IE PRIORITIZES SCRIPTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 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. SCRIPTS CAN BLOCK VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 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. IE8, SAFARI 4, CHROME 2 HTML test.js test2.js a.css img.jpg VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 39. SCRIPT DOM ELEMENTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 40. SCRIPT DOM ELEMENTS DON’T BLOCK CROSS-SITE EASILY-UNDERSTOOD TRIGGERS BUSY INDICATORS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 41. SCRIPT DOM ELEMENTS DOESN’T PRESERVE SCRIPT ORDER EXCEPT FOR FIREFOX AND OPERA VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 42. SCRIPT DEFERRAL VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 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. SCRIPTS AT THE BOTTOM unless you need them sooner VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 45. FIN VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
- 46. Get in Touch! speakerrate.com/whafro jackson@jounce.net @whafro VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009