client side optimization techniques
DESCRIPTION
Slides from "Server Side Techniques for Client Side Optimization" by Jason Huck, presented at Lasso Developer Conference 2008 in Chicago.TRANSCRIPT
C O R E F I V E C R E A T I V E
SERVER SIDE TECHNIQUES FOR CLIENT SIDE OPTIMIZATIONJason Huck
C O R E F I V E C R E A T I V E
WHY OPTIMIZE?
‣ 45% of US adults still on dialup.
‣ 62% in rural areas still on dialup.
‣ Mobile devices on slow networks. (EDGE)
‣ User impatience.
C O R E F I V E C R E A T I V E
THE EVOLUTION OF THE WEB PAGE
C O R E F I V E C R E A T I V E
CHILDHOOD
One Man. One Browser.
Humble beginnings.
C O R E F I V E C R E A T I V E
ADOLESCENCE
‣ Browser Wars (“Best Viewed With”)
‣ Table-based Layouts
‣ Inline scripts and styles (“DHTML”)
‣ Tag Soup
vs.
An awkward growth period.
C O R E F I V E C R E A T I V E
MATURITY
‣ Browser variances stabilizing...even IE(8)!
‣ CSS-based layouts.
‣ External scripts and styles.
‣ Libraries and Frameworks
A-Grade browsers (slowly) taking over.
?
C O R E F I V E C R E A T I V E
CONVERGING NEEDS
Accessibility
Standards Compliance
Organic SEO
Good Markup
C O R E F I V E C R E A T I V E
INCREASING COMPLEXITY
Resolve IP Open Socket Time to First Byte Content Download
Server Activity
Client ActivityDNS Lookup Initial
ConnectionInitial HTTP Request
ReceiveFirst Byte
ReceiveLast Byte
Establish Connection
ProcessRequest
SendFirst Byte
SendLast Byte
ISP
Anatomy of an HTTP Request
C O R E F I V E C R E A T I V E
INCREASING COMPLEXITY
C O R E F I V E C R E A T I V E
INCREASING COMPLEXITY
C O R E F I V E C R E A T I V E
Exceptional Performance Team
‣ Intensely scrutinized behavior and performance across all Yahoo! sites.
‣ Decided client side optimization needed more attention.
‣ Began with 13 rules, now 37 rules and growing.
‣ Today, focus on original 13 rules.
C O R E F I V E C R E A T I V E
13 RULES FOR MAKING WEB SITES FASThttp://developer.yahoo.com/performance/rules.html
C O R E F I V E C R E A T I V E
1. Make Fewer HTTP Requests
C O R E F I V E C R E A T I V E
2. Use a Content Delivery Network
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Sequential Downloads: Max. of 2 Simultaneous Requests Per Host
Parallel Downloads Using Asset Subdomains
Host 1
Host 2
Host 2
Host 3
Host 3
Host 4
Host 4
Host 2
Host 2
Host 3
Host 3
Host 4
C O R E F I V E C R E A T I V E
‣ Tells the browser not to check for updates until a certain future date.
‣ Helps on repeat visits - when browser’s cache has been primed.
‣ Visitors with a primed cache make up 75 - 85% of all web traffic.
3. Add an Expires Header
ExpiresDefault "access plus 10 days"
C O R E F I V E C R E A T I V E
‣ Reduces the size of the response by about 70%.
‣ Supported by all major servers, 90% of all browsers.
‣ mod_gzip or mod_deflate in Apache.
4. GZip Components
Disabled
70%
Average Savings with GZip Compression Enabled
Enabled
C O R E F I V E C R E A T I V E
‣ Creates a perceived improvement in response time via progressive rendering.
‣ Portions of the page are displayed as soon as they can be rendered, even while the remainder of the page is still being processed.
5. Put Stylesheets At The Top
Now is the time for all good men to come to
the aid of their country. The quick brown fox
jumps over the lazy dog.
Now is the time for all good men to come to
the aid of their country. The quick brown fox
jumps over the lazy dog.Now is the time for all
good men to come to the aid of their country.
The quick brown fox jumps over the lazy
dog.Now is the time for all good men to come
to the aid of their country.
The quick brown fox jumps over the lazy
dog.Now is the time for all good men to come
to the aid of their country. The quick brown
fox jumps over the lazy dog.Now is the time
for all good men to come to the aid of their
country.
Now is the time for all
good men to come to
the aid of their country.
The quick brown fox
jumps over the lazy dog.
YourSite.com
http://www.yoursite.com/
C O R E F I V E C R E A T I V E
6. Put JavaScripts At The Bottom
Rendering Begins
Page Shown To User
Rendering Complete
Rendering Begins
Page Shown To User
Rendering Complete
HTML Rendering
Engine
JavaScript Virtual
Machine
HTML Rendering
Engine
JavaScript Virtual
Machine
C O R E F I V E C R E A T I V E
‣ Only supported in Internet Explorer, and deprecated in IE8.
‣ Allows developers to insert a JavaScript expression to set CSS properties.
‣ These expressions are re-evaluated constantly; just moving the mouse can generate 10,000 evaluations.
7. Avoid CSS Expressions
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
C O R E F I V E C R E A T I V E
8. Make Scripts and Styles External
HTML JS JS CSS CSS
HTML
HTML
1
2
3
Scripts and Styles are downloaded once and then cached...
...making subsequent responses leaner.
C O R E F I V E C R E A T I V E
‣ Browsers cache DNS lookups, making subsequent requests to the same host faster.
‣ Conflicts slightly with rule #2 re: asset subdomains.
9. Reduce DNS Lookups
Resolve IP Open Socket Time to First Byte Content Download
Open Socket Time to First Byte Content Download
Open Socket Time to First Byte Content Download
Open Socket Time to First Byte Content Download
1
2
3
4
C O R E F I V E C R E A T I V E
10. Minify JavaScript and CSS
C O R E F I V E C R E A T I V E
‣ Redirects can double the number of steps in a request.
11. Avoid Redirects
Resolve IP Open Socket Time to First Byte Open Socket Time to First Byte Content Download
Redirect (same host)
Resolve IP Open Socket Time to First Byte Content Download
Resolve IP Open Socket Time to First Byte Resolve IP Open Socket Time to First Byte Content Download
Redirect (new host)
C O R E F I V E C R E A T I V E
‣ More common than you might think, especially in modular systems managed by teams.
‣ Even if duplicates are already cached, they’re still executed each time they are called.
12. Remove Duplicate Scripts
C O R E F I V E C R E A T I V E
‣ Versioning for cached content.
‣ No standard among servers for generating ETags.
‣ Best option is usually to disable them, especially if you are using Expires headers (and you should be).
13. Configure ETags
FileETag none
C O R E F I V E C R E A T I V E
+ =‣ Optimization
‣ Compression
‣ Caching
‣ Delivery
C O R E F I V E C R E A T I V E
AN ASSET MANAGEMENT SYSTEM FOR LASSO POWERED SITES
‣ Automate best practices.
‣ Avoid drastic changes to workflow.
‣ Easily disabled for debugging.
‣ Flexible & configurable: use some or all.
C O R E F I V E C R E A T I V E
GETTING ORGANIZED
Scripts & styles effect sites at three distinct levels, from general to specific.
C O R E F I V E C R E A T I V E
1. Global Scripts & Styles
‣ Apply to every page in the site.
‣ Core script libraries such as jQuery or MooTools.
‣ CSS reset files or frameworks such as Blueprint or 960.
C O R E F I V E C R E A T I V E
2. Page/Template Scripts & Styles
‣ Apply to specific pages or page types/templates.
‣ Layout-specific CSS.
2 Column Layout
Status Message
!
3 Column Layout
C O R E F I V E C R E A T I V E
3. Subpage/Module Scripts & Styles
‣ Apply to specific items or item types within a page.
‣ Forms, tables, and “one-off” components.
Login
May
C O R E F I V E C R E A T I V E
‣ Base: Holds global assets. Contents are automatically included.
‣ Cache: Holds the concatenated, minified, compressed results, named by checksum.
‣ Templates (optional): Keeps templates and their assets together.
‣ Modules (optional): Keeps sub-page components and their assets together.
Special folders aid in automation:
GETTING ORGANIZED
C O R E F I V E C R E A T I V E
ADDING AUTOMATION
[asset_manager]
‣ 1. Initialize & Configure Options
‣ 2. Collect Assets (File Paths & Modification Dates)
‣ 3. Execute Caching and Insert Links
C O R E F I V E C R E A T I V E
‣ Create Unique Arrays to Hold Script and Style Paths
‣ Set Usage Options
‣ Use Caching?
‣ Minify?
‣ GZip Compress?
‣ Force Refresh?
‣ Configure Paths
‣ Base and Cache Folders
‣ YUI Compressor
‣ Set Asset Subdomains Via RegEx (Experimental)
1. Initialize & Configure Options
C O R E F I V E C R E A T I V E
asset_manager->options(-usecache = true, -minify = true, -compress = false, -refresh = true, -paths = map( ‘yui’ = server_webroot + ‘/assetmgr/yuicompressor.jar’, ‘scriptcache’ = ’/assetmgr/scripts/cache/’, ‘stylecache’ = ’/assetmgr/styles/cache/’, ‘scriptbase’ = ’/assetmgr/scripts/base/’, ‘stylebase’ = ’/assetmgr/styles/base/’
),-subdomains = (: ‘/[^”]+?’ = ‘http://local.dev\\1’)
);
1. Initialize & Configure Options
C O R E F I V E C R E A T I V E
2. Collect Assets (Paths, Mod Dates)
‣ Global (Base) Assets Loaded Automatically
‣ ->Add Inserts Assets Directly
‣ ->LoadModule Adds Assets With Includes
// add an individual script or styleasset_manager->add(‘/path/to/file.js’);
// include a component...asset_manager->loadmodule(‘/includes/navigation.inc’);
// and assets are automatically added if available:// navigation.css// navigation.js
C O R E F I V E C R E A T I V E
3. Execute Caching & Insert Links
‣ Automatic Via [Define_AtEnd]
‣ Or Explicitly Via ->Cache
‣ Calculate Checksums and Check for Cached Versions
‣ If Cache Found, Skip To Insert, Else...
‣ Concatenate Assets
‣ Optimize and Compress Assets
‣ GZip Assets
‣ Write to Cache Folders
‣ Insert Links Into HTML
‣ Modify For Subdomains
C O R E F I V E C R E A T I V E
[//lasso// must be authorized for file tags and os_process // in actual production, use an inline auth_admin;
// make sure shell.lasso is loaded from lassostartup // load required tags library(‘tags/array_unique.inc’); library(‘tags/asset_manager.inc’); library(‘tags/cache_assets.inc’); library(‘tags/compress_gzip.inc’); library(‘tags/server_webroot.inc’); library(‘tags/url_normalize.inc’);
// initialize the asset manager asset_manager->options(
-usecache = true, -minify = true, -compress = false, -refresh = true, -paths = map(
‘yui’ = server_webroot + ‘/assetmgr/yuicompressor.jar’, ‘scriptcache’ = ’/assetmgr/scripts/cache/’, ‘stylecache’ = ’/assetmgr/styles/cache/’, ‘scriptbase’ = ’/assetmgr/scripts/base/’, ‘stylebase’ = ’/assetmgr/styles/base/’
),-subdomains = (: ‘/[^”]+?’ = ‘http://local.dev\\1’)
);
// add some assets asset_manager->add(‘scripts/jquery.corner.js’); asset_manager->add(‘scripts/global.js’); asset_manager->add(‘styles/global.css’);
] <html>
<head> <title>Asset Manager Example</title>
</head> <body>
<h1>Hello, world.</h1> </body>
</html>
“Hello World” Example
C O R E F I V E C R E A T I V E
<html> <head>
<title>Asset Manager Example</title> </head> <body>
<h1>Hello, world.</h1> </body>
</html>
“Hello World” Example
<html> <head> <title>Asset Manager Example</title>
<link rel="stylesheet" type="text/css" href="http://local.dev/assetmgr/styles/cache/0f5d8fbe8d7e6e894a74c6079614d0bc-min.css" />
</head> <body> <h1>Hello, world.</h1>
<script type="text/javascript" src="http://local.dev/assetmgr/scripts/cache/eb4164e6cbbfa024737cf4bfa4c6807f-min.js"></script>
</body></html>
C O R E F I V E C R E A T I V E
<html> <head>
<title>Asset Manager Example</title> </head> <body>
<h1>Hello, world.</h1> </body>
</html>
“Hello World” Example: No Caching
<html> <head> <title>Asset Manager Example</title> <link rel="stylesheet" type="text/css" href="styles/base/reset.css" /> <link rel="stylesheet" type="text/css" href="styles/global.css" /> </head> <body> <h1>Hello, world.</h1> <script type="text/javascript" src="scripts/base/jquery.core.js"></script> <script type="text/javascript" src="scripts/jquery.corner.js"></script> <script type="text/javascript" src="scripts/global.js"></script> </body></html>
C O R E F I V E C R E A T I V E
CREATING YOUR OWN WORKFLOW
‣ [array_unique]
‣ [cache_assets]
‣ [compress_gzip]
‣ [server_webroot]
‣ [shell]
‣ [url_normalize]
‣ [yui_compress]
All components will be available at tagSwap.net:
C O R E F I V E C R E A T I V E
CAVEATS
‣ Use absolute paths in scripts & styles.
‣ Avoid use of @import rules.
‣ Keep load order in mind, rename as needed.
C O R E F I V E C R E A T I V E
MEASURING RESULTS
Response Time(seconds)
Transferred(kilobytes)
Requests
3.61
1.90
205
61
20
9
Disabled
Averaged over 10 loads. Shorter bars are better.
47%
70%
55%
Example Savings with Asset Manager Enabled
Enabled
C O R E F I V E C R E A T I V E
TOOLS & REFERENCEFirebug for Firefoxhttp://www.getfirebug.com/
YSlow for Firebughttp://developer.yahoo.com/yslow/
Jiffy for Firebughttp://looksgoodworkswell.blogspot.com/2008/06/measuring-user-experience-performance.html
YUI Compressorhttp://developer.yahoo.com/yui/compressor/
Writing Efficient CSShttp://developer.mozilla.org/en/docs/Writing_Efficient_CSS
Yahoo! Best Practices for Speeding Up Your Sitehttp://developer.yahoo.com/performance/rules.html