High Performance Web Pages - 20 new best practices

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)

This talk
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

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

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

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/

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 "A"?
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

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

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

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 "modification plus 10 years"
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…

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>

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

<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

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

Reduce DNS Lookups
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: 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;

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

Remove Duplicate Scripts
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

Make AJAX Cacheable
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
... 
</head>
<?php flush(); ?>
<body>
... 
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

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

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 components (contd.)
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

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)

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

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

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

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

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

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

Minimize DOM access
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

Choose <link> over @import
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

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!"
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

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?!

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

Optimize sprites

Don't scale images in HTML
Downloads unnecessary bytes
If you need
<img width="100" height="100" src="mycat.jpg" />
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!

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

Keep components under 25K
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

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 / )

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

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

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

URLs (contd.)
"When the Cookie Crumbles" Tenni Theurer, Steve Souders
http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
"Maximizing Parallel Downloads in the Carpool Lane", 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 )
"High-performance AJAX applications" 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
Harvest the low hanging fruit
Be an advocate for your users
Start early

Thank you! Merci beaucoup!

http://wpgarage.com	4916
http://developer.yahoo.net	4170
http://softduit.com	2403
http://www.phpied.com	1666
http://phpperformance.de	1144
http://developer.yahoo.com	461
http://hutek.info	445
http://www.2803.com	403
http://wordpressgarage.com	322
http://www.willdurand.fr	320
http://www.moskalyuk.com	236
http://www.profissionaisdeweb.com	195
http://www.codingquery.com	161
http://blog.uoopo.com	159
http://pessoal.org	131
http://www.kurmis.com	115
http://kb.cnblogs.com	111
http://www.dofollow.us	111
http://www.slideshare.net	88
http://deltatech-v2.de	87
http://blog.pmcamp.org	83
http://www.stubbornella.org	71
http://translate.googleusercontent.com	59
http://www.2005lions.net	58
http://www.internation.be	57
http://www.2803.fr	56
http://www.bopor.com	51
http://sting.topgeek.org	47
http://www.createwebsite.info	46
http://blog.php-stage.de	44
http://prasathpree.wordpress.com	40
http://performance.corp.yahoo.com	40
http://www.33lab.cn	38
http://yuanyun.blogbus.com	34
http://www.guim.fr	27
http://www.vingthuitzerotrois.fr	26
http://workspace.apurimacmedia.com	24
http://kms.poscoict.com	23
http://feeds.feedburner.com	22
http://cache.baidu.com	21
http://kurmis.com	21
http://tendou86.blogspot.com	20
http://www.blog.sambabusiness.com.br	19
http://www.diamondtin.com	18
http://pcop.poscoict.com	17
http://phparch.cn	16
http://webcache.googleusercontent.com	15
http://www.barefoot-webdesign.com	13
http://kaloyan.info	12
http://techculture.wordpress.com	12
http://www.agavemountain.com	9

High Performance Web Pages - 20 new best practices

by Stoyan Stefanov

Accessibility

Categories

Upload Details

Usage Rights

147 Embeds 18,928

Statistics

High Performance Web Pages - 20 new best practices Presentation Transcript