High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance http://developer.yahoo.com/performance PHP Quebec, March 13, 2008

High Performance

Web Pages

Stoyan Stefanov

Yahoo! Exceptional Performance

http://developer.yahoo.com/performance

PHP Quebec, March 13, 2008

The sluggish Web We’re getting used to the web as a tool for our day-to-day tasks We all want a nice user experience We won’t tolerate slow pages (we have options) 500 ms slower = 20% drop in traffic (Google) 100 ms slower = 1% drop in sales (Amazon)

We’re getting used to the web as a tool for our day-to-day tasks

We all want a nice user experience

We won’t tolerate slow pages (we have options)

500 ms slower = 20% drop in traffic (Google)

100 ms slower = 1% drop in sales (Amazon)

This talk How to improve page performance Focus on the front-end 14 best practices for faster pages … and 20 more!

How to improve page performance

Focus on the front-end

14 best practices for faster pages

… and 20 more!

Exceptional Performance at Yahoo! Quantify and improve the performance of all Yahoo! products worldwide Center of expertise Build tools, analyze data Gather, research, and evangelize best practices - internally and externally

Quantify and improve the performance of all Yahoo! products worldwide

Center of expertise

Build tools, analyze data

Gather, research, and evangelize best practices - internally and externally

The Importance of Front-End Performance Back-end= 5% Front-end= 95% Even here, front-end= 88%

Focus on the front-end 80-90% of the time Easier than the back-end Proven to work

80-90% of the time

Easier than the back-end

Proven to work

List of 14 best practices (updated) Make Fewer HTTP Requests Use a Content Delivery Network Add Expires header (or Cache-control) Gzip Components Put CSS at the Top Move Scripts to the Bottom (inline too) Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS (inline too) Avoid Redirects Remove Duplicate Scripts Configure ETags Make AJAX Cacheable http://developer.yahoo.com/performance/rules.html content server server server server javascript javascript javascript javascript content css css css css content content

Make Fewer HTTP Requests

Use a Content Delivery Network

Add Expires header (or Cache-control)

Gzip Components

Put CSS at the Top

Move Scripts to the Bottom (inline too)

Avoid CSS Expressions

Make JavaScript and CSS External

Reduce DNS Lookups

Minify JavaScript and CSS (inline too)

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

Make AJAX Cacheable

YSlow Yahoo!’s performance lint tool Extension to the Firebug extension to Firefox Checks for compliance with the best practices Grades (offends) http://developer.yahoo.com/yslow/

Yahoo!’s performance lint tool

Extension to the Firebug extension to Firefox

Checks for compliance with the best practices

Grades (offends)

The Life of Page 2.0 request HTML sent onload page settles conception birth graduation marriage? R.I.P. User perceived “onload” happens somewhere here user interaction, XHRs event handlers, components, XHRs request backend fetching components fetus child teen adult

After YSlow &quot;A&quot;? Flush the buffer early Use GET for AJAX requests Post-load components Preload components Reduce the number of DOM elements Split components across domains Minimize the number of iframes No 404s Reduce cookie size Use cookie-free domains for components Minimize DOM access Develop smart event handlers Choose <link> over @import Avoid filters Optimize images Optimize CSS sprites Don't scale images in HTML Make favicon.ico small and cacheable Keep components under 25K Pack components into a multipart document content javascript javascript content content content content server server css css images images images images mobile mobile cookie cookie content

Flush the buffer early

Use GET for AJAX requests

Post-load components

Preload components

Reduce the number of DOM elements

Split components across domains

Minimize the number of iframes

No 404s

Reduce cookie size

Use cookie-free domains for components

Minimize DOM access

Develop smart event handlers

Choose <link> over @import

Avoid filters

Optimize images

Optimize CSS sprites

Don't scale images in HTML

Make favicon.ico small and cacheable

Keep components under 25K

Pack components into a multipart document

Part I Review of 14 best practices (updated)

Make Fewer HTTP Requests Less components = fast page HTTP Request overhead Combine scripts, combine stylesheets, combine images into CSS sprites

Less components = fast page

HTTP Request overhead

Combine scripts, combine stylesheets, combine images into CSS sprites

CSS Sprites background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; One request instead of ten! Tools: http://www.csssprites.com http://spritegen.website-performance.org/

Use a Content Delivery Network For static components Content closer to your users Akamai, Amazon S3

For static components

Content closer to your users

Akamai, Amazon S3

Add Expires header (or Cache-control) For static components “ Never expire” policy, far future Expires header Once a component is served, the browser never asks for it again When you need to change a component, rename it Apache example: ExpiresActive On ExpiresDefault &quot;modification plus 10 years&quot; For dynamic components Use Cache-control Help the browser send If-Modified-Since Writeup on YUI blog/YDN coming up, stay tuned

For static components

“ Never expire” policy, far future Expires header

Once a component is served, the browser never asks for it again

When you need to change a component, rename it

Apache example:

ExpiresActive On ExpiresDefault &quot;modification plus 10 years&quot;

For dynamic components

Use Cache-control

Help the browser send If-Modified-Since

Writeup on YUI blog/YDN coming up, stay tuned

Gzip Components You send zipped content over the wire, the browser unpacks it Modern browsers understand compressed content Search engine spiders do too Request header Accept-Encoding: gzip,deflate Response header Content-Encoding: gzip All text components should be sent gzipped: html (php), js, css, xml, txt…

You send zipped content over the wire, the browser unpacks it

Modern browsers understand compressed content

Search engine spiders do too

Request header

Accept-Encoding: gzip,deflate

Response header

Content-Encoding: gzip

All text components should be sent gzipped: html (php), js, css, xml, txt…

Put CSS at the Top Firefox and IE will not render anything before the last piece of CSS arrives over the wire Even CSS that is not needed such as @media print Place the stylesheets as early as possible in the document <head> <title>My page</title> <link href=“styles.css” …/> </head> <body> <!-- content -->

Firefox and IE will not render anything before the last piece of CSS arrives over the wire

Even CSS that is not needed such as @media print

Place the stylesheets as early as possible in the document

<head>

<title>My page</title>

<link href=“styles.css” …/>

</head>

<body>

<!-- content -->

Move Scripts to the Bottom (inline too) Scripts block downloads The browser’s logic: since this script can do location.href or document.write at any time, why download possibly useless components Move scripts to the bottom to remove the download block Inline scripts too <!-- content --> <script src=“script.js” …/> </body> </html>

Scripts block downloads

The browser’s logic: since this script can do location.href or document.write at any time, why download possibly useless components

Move scripts to the bottom to remove the download block

Inline scripts too

<!-- content -->

<script src=“script.js” …/>

</body>

</html>

Avoid CSS Expressions CSS expression: #content { position: absolute; left: expression(document.body.offsetWidth+‘px’); } IE-only way to have JavaScript in CSS They tend to get executed more often than you planned, think onmousemove often Smart expressions overwrite themselves

CSS expression:

#content {

position: absolute;

left: expression(document.body.offsetWidth+‘px’);

}

IE-only way to have JavaScript in CSS

They tend to get executed more often than you planned, think onmousemove often

Smart expressions overwrite themselves

Make JavaScript and CSS External Helps with caching, “never expire” policy Share with other pages But this is two more HTTP requests Homepages might consider inlining yahoo.com

Helps with caching, “never expire” policy

Share with other pages

But this is two more HTTP requests

Homepages might consider inlining

yahoo.com

Reduce DNS Lookups Browser needs to map domain name to an IP address DNS lookups take time 2-4 domains per page

Browser needs to map domain name to an IP address

DNS lookups take time

2-4 domains per page

Minify JavaScript and CSS (inline too) Minify, but still gzip JSMin (written in JavaScript, but has a PHP port) YUI compressor – minifies CSS too Inline styles and scripts should also be minified

Minify, but still gzip

JSMin (written in JavaScript, but has a PHP port)

YUI compressor – minifies CSS too

Inline styles and scripts should also be minified

Minify: before /** * The dom module provides helper methods for * manipulating Dom elements. * @module dom * */ (function() { var Y = YAHOO.util, // internal shorthand getStyle, // for load time browser branching setStyle, // ditto propertyCache = {}, // for faster hyphen converts reClassNameCache = {}, // cache regexes for className document = window.document; // cache for faster lookups YAHOO.env._id_counter = YAHOO.env._id_counter || 0;

/**

* The dom module provides helper methods for

* manipulating Dom elements.

* @module dom

*

*/

(function() {

var Y = YAHOO.util, // internal shorthand

getStyle, // for load time browser branching

setStyle, // ditto

propertyCache = {}, // for faster hyphen converts

reClassNameCache = {}, // cache regexes for className

document = window.document; // cache for faster lookups

YAHOO.env._id_counter = YAHOO.env._id_counter || 0;

Minify: after (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;

Avoid Redirects A wasted HTTP request Causes a restart

A wasted HTTP request

Causes a restart

Remove Duplicate Scripts Duh! IE might decide to download them again

Duh!

IE might decide to download them again

Configure ETags ETags are meant to help with caching A component served from server A has a different ETag than the same component served from B Configure ETags not to include inode … or just remove them and implement “never expire” policy Apache default FileETag INode MTime Size Change to FileETag None

ETags are meant to help with caching

A component served from server A has a different ETag than the same component served from B

Configure ETags not to include inode

… or just remove them and implement “never expire” policy

Apache default FileETag INode MTime Size

Change to FileETag None

Make AJAX Cacheable Content returned from XMLHttpRequest s is like any other component Should be gzipped Could be cached Cache-control: max-age=?

Content returned from XMLHttpRequest s is like any other component

Should be gzipped

Could be cached

Cache-control: max-age=?

Part II After YSlow “A”: 20 more best practices

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Flush the buffer early Let the browser start fetching components while your backend is busy PHP has the function flush() Best for busy backends / light frontends ... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content --> Case Study: Yahoo! Search

Let the browser start fetching components while your backend is busy

PHP has the function flush()

Best for busy backends / light frontends

... <!-- css, js -->

</head>

<?php flush(); ?>

<body>

... <!-- content -->

Case Study: Yahoo! Search

Use GET for AJAX requests GET is for retrieving data POST is a two-step process (send headers, send data) GET request is one TCP packet (unless you have a lot of cookies) Max URL length 2K (because of IE) POST without actually posting data is like GET Yahoo! Mail Research

GET is for retrieving data

POST is a two-step process (send headers, send data)

GET request is one TCP packet (unless you have a lot of cookies)

Max URL length 2K (because of IE)

POST without actually posting data is like GET

Yahoo! Mail Research

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Post-load components Ask yourself: what's absolutely required in order to render the page initially? The rest can wait (drag and drop, animations, hidden content, images below the fold) JavaScript is ideal candidate for splitting YUI Image Loader YUI Get Utility

Ask yourself: what's absolutely required in order to render the page initially?

The rest can wait (drag and drop, animations, hidden content, images below the fold)

JavaScript is ideal candidate for splitting

YUI Image Loader

YUI Get Utility

Post-load components Case study: yahoo.com onload.js and onload.css Progressive enhancement

Case study: yahoo.com

onload.js and onload.css

Progressive enhancement

Preload components Preload Items you'll need in the future Unconditional preload (google.com loads a sprite onload) Conditional preload (search.yahoo.com after you type in the input box) Anticipated preload – preload in advance before launching a redesign

Preload

Items you'll need in the future

Unconditional preload (google.com loads a sprite onload)

Conditional preload (search.yahoo.com after you type in the input box)

Anticipated preload – preload in advance before launching a redesign

Preload components (contd.) Unconditional preload example

Unconditional preload example

Preload components (contd.) Conditional preload example – search.yahoo.com When you start typing the page can safely assume you’ll hit the search results page Time to preload

Conditional preload example – search.yahoo.com

When you start typing the page can safely assume you’ll hit the search results page

Time to preload

Reduce the number of DOM elements World's fastest page? about:blank ! A complex page means more bytes to download It also means slower DOM access in JavaScript It also may mean using semantically incorrect markup (like nested tables or abusing <div> s) Use semantic markup Use YUI's reset.css, fonts.css, grids.css Easy to test, just type in Firebug’s console: document.getElementsByTagName('*').length yahoo.com is a busy page and still under 700 elements (HTML tags)

World's fastest page? about:blank !

A complex page means more bytes to download

It also means slower DOM access in JavaScript

It also may mean using semantically incorrect markup (like nested tables or abusing <div> s)

Use semantic markup

Use YUI's reset.css, fonts.css, grids.css

Easy to test, just type in Firebug’s console:

document.getElementsByTagName('*').length

yahoo.com is a busy page and still under 700 elements (HTML tags)

Split components across domains Maximize parallel downloads But not more than 2-4 domains, because of the DNS lookup penalty www.example.org – HTML content static.example.org – Static components Future: IE8 will allow 6 requests per domain

Maximize parallel downloads

But not more than 2-4 domains, because of the DNS lookup penalty

www.example.org – HTML content

static.example.org – Static components

Future: IE8 will allow 6 requests per domain

Split components (contd.) 2 components in parallel 8 components in parallel

Minimize the number of iframes <iframe> pros: Can help with slow third-party content like badges and ads Security sandbox You can download scripts in parallel <iframe> cons: They have a cost even if blank They block page onload Non-semantic

<iframe> pros:

Can help with slow third-party content like badges and ads

Security sandbox

You can download scripts in parallel

<iframe> cons:

They have a cost even if blank

They block page onload

Non-semantic

No 404s 404 Not Found Useless downloads Some sites have helpful 404s “Did you mean X?”… … which uses server resources (DB, etc) When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it

404 Not Found

Useless downloads

Some sites have helpful 404s “Did you mean X?”…

… which uses server resources (DB, etc)

When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it

No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Reduce cookie size Eliminate unnecessary cookies Keep cookie sizes as low as possible to minimize the impact on the user response time Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

Eliminate unnecessary cookies

Keep cookie sizes as low as possible to minimize the impact on the user response time

Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected

Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

Cookie-free hosting for components Option 1: Separate subdomain (static.example.org) Option 2: A new TLD (e.g. yimg.com, ytimg.com, images-amazon.com) Proxies might refuse to cache www.www-yes.org vs www-no.org? no-www leaves you no choice but to write cookies to *.example.org

Option 1: Separate subdomain (static.example.org)

Option 2: A new TLD (e.g. yimg.com, ytimg.com, images-amazon.com)

Proxies might refuse to cache

www.www-yes.org vs www-no.org?

no-www leaves you no choice but to write cookies to *.example.org

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Minimize DOM access DOM access is the slowest Cache Update nodes “offline” and then add them to the tree Avoid fixing layout with JavaScript

DOM access is the slowest

Cache

Update nodes “offline” and then add them to the tree

Avoid fixing layout with JavaScript

Develop smart event handlers Don't wait for onload , use DOMContentLoaded Events bubble up, so use delegation (attach listeners to outer elements) Clean up to prevent IE memory leaks Careful with onresize Use YUI Event utility

Don't wait for onload , use DOMContentLoaded

Events bubble up, so use delegation (attach listeners to outer elements)

Clean up to prevent IE memory leaks

Careful with onresize

Use YUI Event utility

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Choose <link> over @import CSS should be at the top In IE @import is the same as putting <link> at the bottom

CSS should be at the top

In IE @import is the same as putting <link> at the bottom

Avoid filters IE proprietary AlphaImageLoader Fixes an IE6 problem with semi-transparent PNGs, IE7 is fine Blocks rendering, freezes the browser Increased memory consumption Per element, not per image! Best: Avoid completely, use gracefully degrading PNG8 Fallback: use underscore hack _filter not to penalize IE7+ users

IE proprietary

AlphaImageLoader

Fixes an IE6 problem with semi-transparent PNGs, IE7 is fine

Blocks rendering, freezes the browser

Increased memory consumption

Per element, not per image!

Best: Avoid completely, use gracefully degrading PNG8

Fallback: use underscore hack _filter not to penalize IE7+ users

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Optimize images GIF - don't use a bigger palette than you need Use PNGs instead of GIFs “ All we are saying is: Give PiNG a Chance!&quot; pngcrush tool (or optipng, or pngoptimizer) Removing gamma chunks also helps with cross-browser colors Strip comments jpegtran - lossless JPEG operations, can be used to optimize and remove comments

GIF - don't use a bigger palette than you need

Use PNGs instead of GIFs

“ All we are saying is: Give PiNG a Chance!&quot;

pngcrush tool (or optipng, or pngoptimizer)

Removing gamma chunks also helps with cross-browser colors

Strip comments

jpegtran - lossless JPEG operations, can be used to optimize and remove comments

Optimize images (contd.) You can write a simple tool that walks your image directories before site launch and does the following: Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png Crush all PNGs > pngcrush image.png –rem alla –reduce result.png Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

You can write a simple tool that walks your image directories before site launch and does the following:

Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png

Crush all PNGs > pngcrush image.png –rem alla –reduce result.png

Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Optimize images (contd.) You’d be surprised how many sites, from small to huge, could optimize the download size 200K of useless image information sent over the wire for a single page?!

You’d be surprised how many sites, from small to huge, could optimize the download size

200K of useless image information sent over the wire for a single page?!

Optimize CSS sprites Choose horizontal over vertical when possible Combine similar colors Keep color count low (<256) to fit in a PNG8 “ Be mobile-friendly” – don’t leave big gaps Filesize doesn’t increase much, but the image needs to be decompressed into a pixel map 100x100 is 10000 pixels 1000x1000 is 1 Million pixels Case study: Yahoo! Mail Classic

Choose horizontal over vertical when possible

Combine similar colors

Keep color count low (<256) to fit in a PNG8

“ Be mobile-friendly” – don’t leave big gaps

Filesize doesn’t increase much, but the image needs to be decompressed into a pixel map

100x100 is 10000 pixels

1000x1000 is 1 Million pixels

Case study: Yahoo! Mail Classic

Optimize sprites

Don't scale images in HTML Downloads unnecessary bytes If you need <img width=&quot;100&quot; height=&quot;100&quot; src=&quot;mycat.jpg&quot; /> then have mycat.jpg 100x100 not 500x500

Downloads unnecessary bytes

If you need

<img width=&quot;100&quot; height=&quot;100&quot; src=&quot;mycat.jpg&quot; />

then have mycat.jpg 100x100 not 500x500

Make favicon.ico small and cacheable www.example.org/favicon.ico Necessary evil: The browser will request it Better not respond with a 404 Cookies are sent Cannot be on CDN Interferes with the download sequence Make it small (<= 1K) Animated favicons are not cool Set Expires header Tools: imagemagick, png2ico Case study: Yahoo! Search - favicon.ico is 9% of all page views!

www.example.org/favicon.ico

Necessary evil:

The browser will request it

Better not respond with a 404

Cookies are sent

Cannot be on CDN

Interferes with the download sequence

Make it small (<= 1K)

Animated favicons are not cool

Set Expires header

Tools: imagemagick, png2ico

Case study: Yahoo! Search - favicon.ico is 9% of all page views!

Bonus: crossdomain.xml Cross domain policy for Flash/Flex Sits in the root: example.org/crossdomain.xml <cross-domain-policy> <allow-access-from domain=&quot;*.yahoo.com&quot; secure=&quot;false&quot;/> </cross-domain-policy> Set Expires header gzip … and secure while at it, don’t do: <allow-access-from domain=&quot;*“ />

Cross domain policy for Flash/Flex

Sits in the root: example.org/crossdomain.xml

<cross-domain-policy>

<allow-access-from domain=&quot;*.yahoo.com&quot; secure=&quot;false&quot;/>

</cross-domain-policy>

Set Expires header

gzip

… and secure while at it, don’t do:

<allow-access-from domain=&quot;*“ />

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Keep components under 25K Because iPhone won’t cache them Uncompressed size under 25Kb Minify HTML in addition to JS and CSS

Because iPhone won’t cache them

Uncompressed size under 25Kb

Minify HTML in addition to JS and CSS

Pack components into a multipart document For UAs that support it (iPhone doesn’t) Like an email with attachments

For UAs that support it (iPhone doesn’t)

Like an email with attachments

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Tools YSlow ( http:// developer.yahoo.com/yslow / ) Fiddler ( http:// www.fiddlertool.com /fiddler/ ) IBM Page Detailer ( http:// www.alphaworks.ibm.com/tech/pagedetailer ) HTTPWatch ( http:// www.httpwatch.com / ) AOL Pagetest ( http:// pagetest.wiki.sourceforge.net / ) Firebug Net Panel ( http:// www.getfirebug.com / )

YSlow ( http:// developer.yahoo.com/yslow / )

Fiddler ( http:// www.fiddlertool.com /fiddler/ )

IBM Page Detailer ( http:// www.alphaworks.ibm.com/tech/pagedetailer )

HTTPWatch ( http:// www.httpwatch.com / )

AOL Pagetest ( http:// pagetest.wiki.sourceforge.net / )

Firebug Net Panel ( http:// www.getfirebug.com / )

IBM Page Detailer Methodology Packet Sniffer Competitive Advantage Most accurate Provides detailed data Works for any browser Best waterfall view Drawbacks Requires a download 90 day free trial Runs only on Windows Misses cached components

Methodology

Packet Sniffer

Competitive Advantage

Most accurate

Provides detailed data

Works for any browser

Best waterfall view

Drawbacks

Requires a download

90 day free trial

Runs only on Windows

Misses cached components

Firebug NET Panel Methodology Packet Sniffer Competitive Advantage Integrated with Firebug Displays waterfall view Provides HTTP header info Drawbacks Runs only in Firefox Inaccurate waterfall view No render time No parse time No redirects No DNS lookups Misses cached components

Methodology

Packet Sniffer

Competitive Advantage

Integrated with Firebug

Displays waterfall view

Provides HTTP header info

Drawbacks

Runs only in Firefox

Inaccurate waterfall view

No render time

No parse time

No redirects

No DNS lookups

Misses cached components

URLs – Exceptional Performance YUI blog http://yuiblog.com/blog/category/performance/ YDN (Yahoo Developer Network) http://developer.yahoo.com/performance/ YDN blog http://developer.yahoo.net/blog/archives/performance/ Mailing list (Yahoo! Group) http://tech.groups.yahoo.com/group/exceptional-performance/ Feedback http://developer.yahoo.com/yslow/feedback.html

YUI blog

http://yuiblog.com/blog/category/performance/

YDN (Yahoo Developer Network)

http://developer.yahoo.com/performance/

YDN blog

http://developer.yahoo.net/blog/archives/performance/

Mailing list (Yahoo! Group)

http://tech.groups.yahoo.com/group/exceptional-performance/

Feedback

http://developer.yahoo.com/yslow/feedback.html

URLs (contd.) &quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ &quot;Maximizing Parallel Downloads in the Carpool Lane&quot;, Tenni Theurer, Patty Chi http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ YUI Image Loader ( http:// developer.yahoo.com/yui/imageloader / ) YUI Get ( http://developer.yahoo.com/yui/get/ ) YUI Compressor ( http:// developer.yahoo.com/yui/compressor / contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/ ) JSMin ( http:// www.crockford.com/javascript/jsmin.html ) &quot;High-performance AJAX applications&quot; Julien Lecompte http://yuiblog.com/blog/2007/12/20/video-lecomte/ Yahoo! engineer Michael J. Radwin talk back in 2004 http:// www.radwin.org/michael/talks /

&quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders

http://yuiblog.com/blog/2007/03/01/performance-research-part-3/

&quot;Maximizing Parallel Downloads in the Carpool Lane&quot;, Tenni Theurer, Patty Chi

http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

YUI Image Loader ( http:// developer.yahoo.com/yui/imageloader / )

YUI Get ( http://developer.yahoo.com/yui/get/ )

YUI Compressor ( http:// developer.yahoo.com/yui/compressor / contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/ )

JSMin ( http:// www.crockford.com/javascript/jsmin.html )

&quot;High-performance AJAX applications&quot; Julien Lecompte http://yuiblog.com/blog/2007/12/20/video-lecomte/

Yahoo! engineer Michael J. Radwin talk back in 2004

http:// www.radwin.org/michael/talks /

Credits – thank you!

Take-home Focus on the front-end Harvest the low hanging fruit Be an advocate for your users Start early

Focus on the front-end

Harvest the low hanging fruit

Be an advocate for your users

Start early

Thank you! Merci beaucoup!