client side optimization techniques

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