Post on 09-Dec-2014
description
transcript
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