tricking people into thinking your website is fast · rule 1: make fewer http requests 40-60% of...
TRANSCRIPT
Tricking People Into Thinking Tricking People Into Thinking Your Website Is FastYour Website Is Fast
● Patrick Donelan, SDH Consulting GroupPatrick Donelan, SDH Consulting Group
WebGUI and YSlow: 100 or BustWebGUI and YSlow: 100 or Bust
Who This Talk Is ForWho This Talk Is For● Intermediate TrackIntermediate Track● DesignersDesigners● DevelopersDevelopers● System AdministratorsSystem Administrators● Impatient PeopleImpatient People
HTMLHTML<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><html lang="en">
<head><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"><meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title><title>title</title>
<link rel="stylesheet" type="text/css" href="style.css"><link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script><script type="text/javascript" src="script.js"></script>
</head></head>
<body><body>
Content goes hereContent goes here
</body></body>
</html></html>
yahoo.com (circa 2006)yahoo.com (circa 2006)
The Pareto PrincipleThe Pareto Principle
Steve SoudersSteve Souders● 14 Rules For High Performance Websites14 Rules For High Performance Websites
YSlowYSlow
YSlowYSlow
YSlowYSlow
WebGUI Default SiteWebGUI Default SiteYslow Score = 78Yslow Score = 78
WebGUI v7.7.19-stable, WRE 0.9.3
WebGUI Default SiteWebGUI Default SiteStatisticsStatistics
Admin OnAdmin OnYSlow Score = 67 (-11)YSlow Score = 67 (-11)
Rule 1: Make Fewer HTTP Rule 1: Make Fewer HTTP RequestsRequests
● 40-60% of daily visitors to your site will 40-60% of daily visitors to your site will have an empty cache (Yahoo! study)have an empty cache (Yahoo! study)
● Merge JS into monolithic filesMerge JS into monolithic files● Same for CSSSame for CSS● CSS Image SpritesCSS Image Sprites● YUI Rollup FilesYUI Rollup Files
YUI Dependency CalculatorYUI Dependency Calculator
http://developer.yahoo.com/yui/articles/hostinghttp://developer.yahoo.com/yui/articles/hosting
Rule 2: Use a Content Rule 2: Use a Content Delivery NetworkDelivery Network
● Proximity mattersProximity matters● Free and commercial CDNsFree and commercial CDNs● Easy in WebGUIEasy in WebGUI● Amazon S3 integration – thanks to Amazon S3 integration – thanks to
donor.com!donor.com!
Default Site Page RequestsDefault Site Page Requests
Yahoo! Combo LoaderYahoo! Combo Loader
Modify Nav TemplateModify Nav Template
Using YUI Combo LoaderUsing YUI Combo LoaderYSlow Score = 78YSlow Score = 78
Rule 3: Add an Expires Rule 3: Add an Expires HeaderHeader
● 75-85% of page views have a primed 75-85% of page views have a primed cache (Yahoo! Study)cache (Yahoo! Study)
● WRE now ships with mod_expiresWRE now ships with mod_expires● Let's see what happens if we turn it on:Let's see what happens if we turn it on:
<Location /extras> ExpiresActive On ExpiresDefault "access plus 10 years" </Location> <Location /uploads> ExpiresActive On ExpiresDefault "access plus 10 years" </Location>
Access + 10 yearsAccess + 10 yearsYSlow Score = 85 (+7)YSlow Score = 85 (+7)
Rule 4: Gzip ComponentsRule 4: Gzip Components● Fixed since WRE v0.8.6Fixed since WRE v0.8.6
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript application/x-shockwave-flash application/javascript
+2 YSlow points for free+2 YSlow points for free
Rule 13: Configure ETagsRule 13: Configure ETags● Fixed since WRE v0.8.6Fixed since WRE v0.8.6
FileETag none
Another +2 YSlow points for freeAnother +2 YSlow points for free
Template DesignTemplate Design● Rule 5 – Put CSS at the TopRule 5 – Put CSS at the Top● Rule 6 – Put Scripts at the BottomRule 6 – Put Scripts at the Bottom● Rule 7 – Avoid CSS ExpressionsRule 7 – Avoid CSS Expressions● Rule 8 – Make JavaScript and CSS Rule 8 – Make JavaScript and CSS
ExternalExternal
Rule 10: Minify JavaScript & Rule 10: Minify JavaScript & CSS.. a dilemmaCSS.. a dilemma
● Development team: Development team:
"I want well commented, modular, reusable "I want well commented, modular, reusable files”files”
● Browser: Browser:
"I want minimal files with all whitespace and "I want minimal files with all whitespace and comments removed”comments removed”
● Who wins?Who wins?
Design FilesDesign Files
● WebGUI Assets (File, Snippet, etc..)WebGUI Assets (File, Snippet, etc..)● Static FilesStatic Files● Remote FilesRemote Files
Introducing FilePumpIntroducing FilePump
● BundlesBundles● JavaScript and CSS filesJavaScript and CSS files● CollateralCollateral● Design files via URIDesign files via URI● Optimise for ease of development, Optimise for ease of development,
modularity, re-use AND performancemodularity, re-use AND performance
FilePump BundleFilePump Bundle
Your TemplateYour Template<html><html> <head> <head> <!-- css at the top --> <!-- css at the top --> ^FilePump(bundle, css); ^FilePump(bundle, css); </head> </head> <body> <body> … … <!-- js at the bottom --> <!-- js at the bottom --> ^FilePump(bundle, js); ^FilePump(bundle, js); </body> </body></html></html>
Users See..Users See..<html><html> <head> <head> <!-- css at the top --> <!-- css at the top --> <link rel=”stylesheet” type=”text/css” <link rel=”stylesheet” type=”text/css” href=”/uploads/filepump/bundle.12345012562/bundle.css”> href=”/uploads/filepump/bundle.12345012562/bundle.css”> </head> </head> <body> <body> … … <!-- js at the bottom --> <!-- js at the bottom --> <script type=”text/javascript” <script type=”text/javascript” src=”/uploads/filepump/bundle.12345012562/bundle.js”> src=”/uploads/filepump/bundle.12345012562/bundle.js”>
</script> </script> </body> </body></html></html>
<Location /uploads/filepump> ExpiresActive On ExpiresDefault ”access plus 10 years”</Location>
Admin OnAdmin On<html><html> <head> <head> <!-- css at the top --> <!-- css at the top --> <link rel=”stylesheet” type=”text/css” href=”/my-asset.css”> <link rel=”stylesheet” type=”text/css” href=”/my-asset.css”> <link rel=”stylesheet” type=”text/css” href=”/my-snippet.css”> <link rel=”stylesheet” type=”text/css” href=”/my-snippet.css”> <link rel=”stylesheet” type=”text/css” <link rel=”stylesheet” type=”text/css”
href=”/uploads/design/my-file.css”> href=”/uploads/design/my-file.css”> </head> </head> <body> <body> … … <!-- js at the bottom --> <!-- js at the bottom --> <script type=”text/javascript” src=”/my-asset.js”></script> <script type=”text/javascript” src=”/my-asset.js”></script> <script type=”text/javascript” src=”/my-snippet.js”></script> <script type=”text/javascript” src=”/my-snippet.js”></script> <script type=”text/javascript” <script type=”text/javascript”
src=”/uploads/design/my-file.js”></script>src=”/uploads/design/my-file.js”></script> </body> </body></html></html>
CSS Background ImagesCSS Background Images
● Collateral directoriesCollateral directories
{ background-image: url(relative/path/to/image.png)
}
FilePumping the Default SiteFilePumping the Default Site
FilePumping the Default SiteFilePumping the Default Site
YSlow Score = 92 (+13)YSlow Score = 92 (+13)
CSS SpriteCSS SpriteYSlow Score = 94YSlow Score = 94
Or bust..Or bust..● Simulate "Build to CDN / Cluster” RFE..Simulate "Build to CDN / Cluster” RFE..
FilePump CDNFilePump CDNYSlow Score = 100 YSlow Score = 100 :):)
Future ExtensionsFuture Extensions● Build to CDN or clusterBuild to CDN or cluster● Bundle diffBundle diff● Template attachmentsTemplate attachments● Asset CSS Introspection bundleAsset CSS Introspection bundle● Far-future cache assets via revisionDateFar-future cache assets via revisionDate● Dynamic ^FilePump(); macroDynamic ^FilePump(); macro● YUI combo loaderYUI combo loader
Available NowAvailable Now● In WebGUI stable v7.7.19In WebGUI stable v7.7.19● Used in productionUsed in production
Questions?Questions?
14 Rules For High 14 Rules For High Performance WebsitesPerformance Websites
i.i. Make Fewer HTTP Make Fewer HTTP RequestsRequests
ii.ii. Use a Content Delivery Use a Content Delivery NetworkNetwork
iii.iii.Add an Expires HeaderAdd an Expires Header
iv.iv.Gzip ComponentsGzip Components
v.v. Put Stylesheets at the TopPut Stylesheets at the Top
vi.vi.Put Scripts at the BottomPut Scripts at the Bottom
vii.vii.Avoid CSS ExpressionsAvoid CSS Expressions
viii.viii.Make JavaScript and Make JavaScript and CSS ExternalCSS External
ix.ix.Reduce DNS LookupsReduce DNS Lookups
x.x.Minify JavaScriptMinify JavaScript
xi.xi.Avoid RedirectsAvoid Redirects
xii.xii.Remove Duplicate Remove Duplicate ScriptsScripts
xiii.xiii.Configure EtagsConfigure Etags
xiv.xiv.Make Ajax CacheableMake Ajax Cacheable
And more..And more..i.i. Flush the Buffer EarlyFlush the Buffer Early
ii.ii. Use GET for Ajax RequestsUse GET for Ajax Requests
iii.iii.Post-load ComponentsPost-load Components
iv.iv. Preload ComponentsPreload Components
v.v. Reduce the Number of DOM Reduce the Number of DOM ElementsElements
vi.vi.Split Components Across Split Components Across DomainsDomains
vii.vii.Minimise the Number of Minimise the Number of iFramesiFrames
viii.viii.No 404sNo 404s
ix.ix.Reduce Cookie SizeReduce Cookie Size
x.x. Use Cookie-free DomainsUse Cookie-free Domains
xi.xi.Minimise DOM AccessMinimise DOM Access
xii.xii.Develop Smart Event HandlersDevelop Smart Event Handlers
xiii.xiii.Choose <link> Over @importChoose <link> Over @import
xiv.xiv.Avoid FiltersAvoid Filters
xv.xv.Optimise ImagesOptimise Images
xvi.xvi.Optimise CSS SpritesOptimise CSS Sprites
xvii.xvii.Don't Scalre Images in HTMLDon't Scalre Images in HTML
xviii.xviii.Make favicon.ico Small and Make favicon.ico Small and CacheableCacheable
xix.xix.Keep Components under 25kKeep Components under 25k
xx.xx.Pack Components into Multi-Pack Components into Multi-part documentspart documents