SKILLFULLY USING ALL OF YOUR
ASSETS
FOR IMPROVED PERFORMANCE
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

THE PREMISE
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

FASTER SITES
ARE BETTER
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

FACEBOOK.COM: EMPTY CACHE
BACK-END FRONT-END
5%
95%
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

FACEBOOK.COM: PRIMED CACHE
BACK-END FRONT-END
19%
81%
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

FRONT-END
PERFORMANCE MATTERS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

THE FACTORS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

IMAGE SIZES
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

IMAGE SIZES
HTTP REQUESTS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

IMAGE SIZES
HTTP REQUESTS
GZIPPED COMPONENTS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

IMAGE SIZES
HTTP REQUESTS
GZIPPED COMPONENTS
CACHE MANAGEMENT
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

IMAGE SIZES
HTTP REQUESTS
GZIPPED COMPONENTS
CACHE MANAGEMENT
CSS EXPRESSIONS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

IMAGE SIZES
HTTP REQUESTS
GZIPPED COMPONENTS
CACHE MANAGEMENT
CSS EXPRESSIONS
CSS & JS POSITIONING
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

CSS & JS POSITIONING
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

THE RULES
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

Rule #1:
TWO AT A TIME
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

Rule #2:
SCRIPTS CAN BLOCK
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

Part 1:
STYLESHEETS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

DON’T USE @IMPORT
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

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

HTML: @import “a.css”
HTML: @import “b.css”
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

HTML: @import “a.css”
HTML: @import “b.css”
HTML
a.css
b.css
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

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

HTML: LINK “a.css”
HTML: @import “b.css”
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

HTML: LINK “a.css”
HTML: @import “b.css”
HTML
a.css
b.css
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

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

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

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

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

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

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

WHY NOT JUST USE
@IMPORT ONLY?
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

Part 2:
SCRIPTS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

IE PRIORITIZES SCRIPTS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

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

SCRIPTS CAN BLOCK
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

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

IE8, SAFARI 4, CHROME 2
HTML
test.js
test2.js
a.css
img.jpg
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

SCRIPT DOM ELEMENTS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

SCRIPT DOM ELEMENTS
DON’T BLOCK
CROSS-SITE
EASILY-UNDERSTOOD
TRIGGERS BUSY INDICATORS
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

SCRIPT DOM ELEMENTS
DOESN’T PRESERVE SCRIPT
ORDER EXCEPT FOR FIREFOX
AND OPERA
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

SCRIPT DEFERRAL
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

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

SCRIPTS AT THE BOTTOM
unless you need them sooner
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

FIN
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

Get in Touch!
speakerrate.com/whafro
jackson@jounce.net
@whafro
VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009