Yahoo Talk – Rules to scale your Frontend

by admin on October 16, 2007 in Scale

From the Yahoo research on user experience, they found out that 90% of user waiting time is coming from the frontend. So, we should start paying attention on this to get a bigger impact on our changes in a short time.

Here are the 14 rules they formulated:

Make fewer HTTP requests
- Concatenate scripts and stylesheets to reduce HTTP traffics
- CSS sprites (combine images to 1 file and use background position attribute for particular image).
Use a CDN
- Akamai (distribute your static content before distributing your dynamic content).
Add an Expires header
- Maximize the use of Browser cache (not just for images but stylesheet, scripts as well).
Gzip components
- Gzip will cut 90% of size for response to send back (fewer TCP packets). This will affect users’ download times. Configure apache to do it.
Put stylesheets at the top
- IE waits for all external stylesheets to load up before rendering.
- Improve user perception to put it at the top.
- use LINK tag but not @import
Move scripts to the bottom
- scripts block parallel downloads across all hostnames. In HTTP 1.1, you can download 2 components in parallel per hostname. So, JS right above your component to minimize the block.
- scripts block rendering of everything below them in the page
- scripts defer attribute is not a solution. Block rendering and downloads in FF but slightly in IE. So, rely on it.
Avoid CSS expressions
- Use one-time expression
Make JS and CSS external
- Could be cached!
Reduce DNS lookups
- typically takes 20-120ms.
Minify JS
- Take away white space, tab…Â and comments on JS to reduce its size.
- Obfuscation is risky and not save you much unless you want to protect your JS.
Avoid redirects
Remove duplicate scripts
Configure ETags
Make AJAX cacheable
- You can make expire time far in the future and put last modified time in the url.