Blending Performance with

Front-End Architecture

Chris Griego / boldpx.comBlake Elshire / marbleheadllc.com

Front-End Archiwhat?

A holistic view ofbest practices for

web user interfaces.

Term Coined by Garrett Dimon

CSS

IA

DOM Scripting

Accessibility

Design AJAXMarkup

UserAgents

FlashUsability

Content

Back-EndProjectMgmt.

http://v1.garrettdimon.com/fea/

Why performance?

Speed is a Killer Feature

LOFNOLook out for Number One

Blank Page Your Site

Blank Page Your Site

Content & Features

Blank Page Your Site

Content & Features

Performance

Blank Page Your SiteDo Less

Less is more, but a blank page never made

anyone any money.

Why the front-end?

Empty Cache Primed Cache

aol.com 97% 97%

ebay.com 95% 81%

facebook.com 95% 81%

google.com 47% 0%

search.live.com 67% 0%

msn.com 98% 94%

myspace.com 98% 98%

wikipedia.org 94% 91%

yahoo.com 97% 96%

youtube.com 98% 97%

Time Spent on the Front-End

80-90% of the end user response time is spent

on the front-end.

The Performance Golden Rule

• Greater Potential for Improvement

• Greater Potential for Improvement

• Simpler to Implement

• Greater Potential for Improvement

• Simpler to Implement

• Proven to Work

Why now?

Data-Driven Optimization

Understand Techniques & Their Impact

http://www.codinghorror.com/blog/archives/000932.html

#2 Use a ContentDelivery Network?

boldpx.com Traffic

Web Server

Amazon S3 as CDN

The goal isn’t to use a CDN. Locate content closer to your users.

Know your Audience

Plan Your Browser Support

How did performance change our

front-end architecture?

HTML

#8 Make JavaScriptand CSS External

Done! But, why?

So they’ll be cached,or are they?

Can hasstyle.css? OK!

Last-Modified: Jan 1

Can hasstyle.css? OK!

Last-Modified: Jan 1

Has style.csschanged

since Jan 1?

No

Can hasstyle.css? OK!

Last-Modified: Jan 1

Has style.csschanged

since Jan 1?No

Has style.csschanged

since Jan 1?

Has style.csschanged

since Jan 1?

Has style.csschanged

since Jan 1?

Has style.csschanged

since Jan 1?

Has style.csschanged

since Jan 1? No No

No

No

No

No

#3 Add an Expires or Cache-Control Header

Expires:

Sun, 17 Jan 2038 19:14:07 GMT

Last 32-bit Unix Timestamp

Can hasstyle.css? OK!

Expires: 2038

Wait! What happens when I update my files?

Can hasstyle.css? OK!

Expires: 2038

Can hasstyle2.css? OK!

Expires: 2038

style.css?1207894558Cache Buster

It doesn’t end there,40-60% of users visit with an empty cache

CSS

#1 Make FewerHTTP Requests

Why?

• Upspeed vs Downspeed

• Cookies

• Referers

• No Content Encoding

“Combine Stylesheets”

Modular Development

• Global Styles

• Home Page

• Search Results

• Individual Products

• Cart & Checkout

• Customer Service

Screen Print JavaScript Handheld

typography.css

colors.css

layout.css

behavior.css

print.css

link link link link

link link link

@ @

doc.write@

link

• global/typography.css

• global/colors.css

• global/layout.css

• global/behavior.css

• global/print.css

• products/typography.css

• products/colors.css

• products/layout.css

• products/behavior/css

• products/print.css

10 Stylesheets? FAIL

We had to aggregate these files together.

Section/Media Based?

• global/screen.css

• global/print.css

• global/handheld.css

• products/screen.css

• products/print.css

• products/handheld.css

Browsers only download the CSSthey need, right?

IE Opera Firefox Safari

screen.css

print.css

handheld.css

projection.css

tv.css

IE Opera Firefox Safari

screen.css

print.css

handheld.css

projection.css

tv.css

!

!

!

!

!

IE Opera Firefox Safari

screen.css

print.css

handheld.css

projection.css

tv.css

! !

! !

! !

! !

! !

IE Opera Firefox Safari

screen.css

print.css

handheld.css

projection.css

tv.css

! ! !

! ! !

! ! !

! ! !

! ! !

IE Opera Firefox Safari

screen.css

print.css

handheld.css

projection.css

tv.css

! ! ! !

! ! ! !

! ! !

! ! !

! ! !

IE Opera FirefoxSafari & iPhone

screen.css

print.css

handheld.css

projection.css

tv.css

! ! ! !

! ! ! !

! ! !

! ! !

! ! !

@media to the rescue

Section Based

• global.css

• products.css

But what aboutour @import?

#27 Choose link over @import

C-Grade Browser Support

But what about behavior.css?

<script type="text/javascript">! if (de = document.documentElement) {! ! de.className += " js";! }</script>

div#expandable {! display: block;}

.js div#expandable {! display: none;}

Don’t forget to aggregate any 3rd-party

stylesheets.

JavaScript

#1 Make FewerHTTP Requests

No media types to worry about :)

3rd-Party Libraries

3rd-Party Analytics

#10 MinifyJavaScript and CSS

Practice Safe Compression

Minification vs Obfuscation

YUI CompressorWinner among tools compared by Zimbra

#6 Put Scriptsat the Bottom

Come again?

Why?

Scripts blockparallel downloads

Images

Maximize Parallel DownloadsUse Multiple Hostnames

#1 Make FewerHTTP Requests

CSS SpritesNot supported in Opera 6

(Not a problem if extended C-grade support)

http://alistapart.com/articles/sprites

#30 OptimizeCSS Sprites

Use PNGs

• pngcrush

• optipng

• pngout

Re-compress

File Original pngout optipng pngcrush

optipng +

pngout

pngout +

optipng Best

_global/body-background.png (were GIF, changed image)

_global/html-background.png (were GIF, changed image)

_global/left-background.png (were GIF)

_global/right-background.png (were GIF)

logos/bold-pixel.png

portfolio/banctec-international/home-thumbnail.png

portfolio/banctec-international/home.png

portfolio/banctec-international/industries-thumbnail.png

portfolio/banctec-international/industries.png

portfolio/banctec-international/leadership-thumbnail.png

portfolio/banctec-international/leadership.png

portfolio/banctec-international/worldwide-thumbnail.png

portfolio/banctec-international/worldwide.png

portfolio/destination-beer/age-verification-thumbnail.png

portfolio/destination-beer/age-verification.png

portfolio/destination-beer/home-thumbnail.png

portfolio/destination-beer/home.png

portfolio/destination-beer/single-article-thumbnail.png

portfolio/destination-beer/single-article.png

portfolio/destination-beer/single-beer-thumbnail.png

portfolio/destination-beer/single-beer.png

portfolio/guidewire-connection/home-thumbnail.png

portfolio/guidewire-connection/home.png

portfolio/guidewire-connection/single-thumbnail.png

portfolio/guidewire-connection/single.png

portfolio/guidewire-connection/tag-cloud-thumbnail.png

portfolio/guidewire-connection/tag-cloud.png

portfolio/hotels-com-promotions/deals-landing-thumbnail.png

portfolio/hotels-com-promotions/deals-landing.png

portfolio/hotels-com-promotions/deals-last-minute-thumbnail.png

portfolio/hotels-com-promotions/deals-last-minute.png

portfolio/hotels-com-promotions/deals-search-results-thumbnail.png

portfolio/hotels-com-promotions/deals-search-results.png

portfolio/hotels-com-promotions/destinations-highlights-thumbnail.png

portfolio/hotels-com-promotions/destinations-highlights.png

portfolio/hotels-com-promotions/destinations-landing-thumbnail.png

portfolio/hotels-com-promotions/destinations-landing.png

portfolio/hotels-com-promotions/destinations-things-to-do-thumbnail.png

portfolio/hotels-com-promotions/destinations-things-to-do.png

portfolio/hotels-com-promotions/interests-landing-thumbnail.png

portfolio/hotels-com-promotions/interests-landing.png

portfolio/hotels-com-promotions/interests-style-1-thumbnail.png

portfolio/hotels-com-promotions/interests-style-1.png

portfolio/hotels-com-promotions/interests-style-2-thumbnail.png

portfolio/hotels-com-promotions/interests-style-2.png

portfolio/my-global-career/coming-soon-thumbnail.png

portfolio/my-global-career/coming-soon.png

portfolio/my-global-career/home-thumbnail.png

portfolio/my-global-career/home.png

portfolio/my-global-career/single-thumbnail.png

portfolio/my-global-career/single.png

portfolio/nationpoint/home-thumbnail.png

portfolio/nationpoint/home.png

portfolio/nationpoint/second-level-thumbnail.png

portfolio/nationpoint/second-level.png

portfolio/nationpoint/third-level-thumbnail.png

portfolio/nationpoint/third-level.png

portfolio/nuts-about-southwest/author-thumbnail.png

portfolio/nuts-about-southwest/author.png

portfolio/nuts-about-southwest/home-thumbnail.png

portfolio/nuts-about-southwest/home.png

portfolio/nuts-about-southwest/single-thumbnail.png

portfolio/nuts-about-southwest/single.png

1,095 519 500 514 500 421 591

366 421 489 489 421 420 420

7,941 3,277 3,271 7,941 3,271 3,269 3,269

8,034 3,323 3,318 8,034 3,318 3,317 3,317

11,512 10,458 11,498 11,498 10,458 10,458 10,458

19,300 17,005 19,287 19,287 17,005 17,005 17,005

294,566 262,812 282,131 287,982 262,812 262,812 262,812

11,675 10,518 11,675 11,675 10,518 10,518 10,518

158,477 145,627 150,086 156,674 145,627 145,627 145,627

10,718 10,291 10,718 10,718 10,291 10,291 10,291

193,328 174,903 184,357 184,566 174,903 174,903 174,903

14,675 13,313 14,675 14,675 13,313 13,313 13,313

141,279 130,111 50,869 50,905 50,869 50,459 50,459

14,830 13,628 14,830 14,830 13,628 13,628 13,628

434,725 405,972 324,403 325,084 324,403 323,993 323,993

12,593 11,646 12,592 12,593 11,646 11,646 11,646

427,672 412,464 424,851 425,061 412,464 412,464 412,464

13,972 12,761 13,972 13,972 12,761 12,761 12,761

625,005 586,651 615,369 619,032 586,651 586,651 586,651

10,933 10,248 10,933 10,933 10,248 10,248 10,248

389,286 366,527 385,514 385,510 366,527 366,527 366,527

14,915 14,073 14,915 14,915 14,073 14,073 14,073

569,420 525,387 362,678 363,856 362,678 362,268 362,268

12,931 12,177 12,931 12,931 12,177 12,177 12,177

555,663 508,414 311,421 312,628 311,421 311,011 311,011

18,756 18,046 18,667 18,667 18,046 18,046 18,046

375,744 339,840 247,205 247,792 247,205 246,795 246,795

9,576 8,601 9,576 9,576 8,601 8,601 8,601

156,428 126,284 110,236 110,665 110,236 109,897 109,897

13,725 12,702 13,725 13,725 12,702 12,702 12,702

241,645 199,557 174,411 175,148 174,411 174,072 174,072

14,155 13,040 14,155 14,155 13,040 13,040 13,040

313,733 276,713 296,396 309,666 276,713 276,713 276,713

11,287 10,302 11,287 11,287 10,302 10,302 10,302

177,905 144,523 124,210 124,490 124,210 123,871 123,871

16,006 14,577 16,006 16,006 14,577 14,577 14,577

212,144 179,899 171,445 172,787 171,445 171,106 171,106

10,002 9,081 10,002 10,002 9,081 9,081 9,081

179,272 159,010 137,786 138,240 137,786 137,749 137,749

10,929 10,134 10,919 10,919 10,134 10,134 10,134

265,281 236,632 254,436 261,774 236,632 236,632 236,632

19,507 17,638 19,507 19,507 17,638 17,638 17,638

526,448 469,440 498,074 501,692 469,440 469,440 469,440

17,105 15,924 17,099 17,099 15,924 15,924 15,924

372,867 341,818 363,556 367,763 341,818 341,818 341,818

11,957 10,753 11,935 11,937 10,753 10,753 10,753

210,693 200,477 157,345 157,920 147,704 200,477 147,704

10,426 9,854 10,426 10,426 9,854 9,854 9,854

185,275 158,339 145,358 145,748 145,358 145,019 145,019

12,462 11,931 12,462 12,462 11,931 11,931 11,931

203,328 173,799 158,944 159,331 158,944 158,605 158,605

14,792 13,660 14,792 14,792 13,660 13,660 13,660

214,510 195,392 208,089 214,122 195,392 195,392 195,392

16,506 15,519 16,506 16,506 15,519 15,519 15,519

231,207 203,060 214,695 219,641 203,060 203,060 203,060

14,691 13,650 14,691 14,691 13,650 13,650 13,650

119,610 93,060 81,434 81,610 81,434 81,095 81,095

16,209 15,665 16,209 16,209 15,665 15,665 15,665

521,772 486,164 432,674 450,972 415,364 486,164 415,364

17,386 15,781 17,371 17,371 15,781 15,781 15,781

531,651 490,081 442,842 455,716 423,514 490,081 423,514

17,582 16,080 17,516 17,516 16,080 16,080 16,080

753,014 710,017 672,829 681,660 638,663 710,017 638,663

Total 10,020,497 9,099,569 8,412,099 8,525,893 8,094,250 8,351,201 8,089,877

pngout FTW

pngout + optipng -o7

Mini Q&A

MarbleheadLLC.comCase Study

Simple 1 page web site

Load time was 12 sec.

What were the problems?

#1 Fewer HTTP requests

43 HTTP Requests :(

What caused this?

• 1 HTML file

• 23 Images in CSS

• 8 JavaScript files

• 5 CSS Style Sheets

• 6 Images in HTML

How We Fixed It

• CSS Sprites (23 CSS Images to 5)

• Combined and Minified

• 8 JavaScript files to 2

• 5 CSS files to 1

• Moved a lot of images to HTML 18

Reduced to 27 HTTP Requests

#3 Expires Headers

Nothing was getting cached

~1MB requested on every refresh

• Images, CSS, and JS are cached for 10 years

• HTML is cached for 4 hours

Far Future Expires FTW

Now initial load ~1MBRefresh load 5K.

Next Problem

Needed to reduce file size

#4 Gzip components

Apache handles text files pretty well with mod_deflate & mod_gzip

Images?

Optimized Images with pngout

Major file size reduction

Before: 1095.3K

After: 950K

Making it even faster

Played with multiple asset host names

Browsers can now load more than 2 assets at a time

Saw biggest increase in download time

Overall Performance Increases

• 43 HTTP Requests

• Roughly 1MB file size

• No Caching

• Refresh 43 requests 1MB

• Downloading 2 assets

• Load time: ~12 seconds

Before Changes

• 23 HTTP Requests

• 950K file size

• Caching in place

• Refresh 2 requests ~5K

• Downloading 8 assets

• Load time: ~2 seconds

After Changes

One more thing…

Save & Reload!S !R

Traditional Front-End Workflow

Save, Build & Reload!S !B !R

Traditional Back-End Workflow

Traditional Build Tools?

Blender

Blender is like ant or make for the front-end. It aggregates and

compresses CSS and/or JavaScript assets for a site into efficient, production-ready files.

• Open Source (MIT)

• Command Line Tool (Ruby)

• Uses the YUI Compressor

css/global-min.css: - css/global.cssjs/global-min.js: - js/global.js

Blendfile Format

_behavior: _global-min.js: - ../_vendor/jquery/jquery.js - ../_vendor/shadowbox/src/js/adapter/shadowbox-jquery.js - ../_vendor/shadowbox/src/js/shadowbox.js - _global.js - ../_vendor/google-analytics/ga.js - _analytics.js _analytics-min.js: - ../_vendor/google-analytics/ga.js - _analytics.js_style: _global: ../_global-min.css: - ../../_vendor/shadowbox/src/css/shadowbox.css - typography.css - typography-print.css - colors.css - colors-print.css - layout-screen.css - layout-print.css

Boldpx.com Blendfile

Usage: blend [options]

-h, --help Show this message

-V, --version Prints Blender's version number

-g, --generate Generate a stub Blendfile

-f, --file FILE Use given Blendfile

-t, --type TYPE Select file type to blend (css, js)

-c, --cache-buster [BUSTER] Append cache busters to URLs in CSS, defaults to timestamps

--force Force blending when source files aren't newer than output files

--yui=YUIOPTS Pass arguments to YUI Compressor

-d, --data EXPERIMENTAL Convert url(file.ext) to url(data:) in CSS files

-z, --gzip EXPERIMENTAL Also create gzip output files

Command Line Options

Seeking Testersand Contributors

Q&A