Even Faster Web Sites best practices for faster pages : Even Faster Web Sites best practices for faster pages
The Importance of Frontend Performance : 17% 83% iGoogle, primed cache The Importance of Frontend Performance 9% 91% iGoogle, empty cache
Time Spent on the Frontend : Time Spent on the Frontend
The Performance Golden Rule : The Performance Golden Rule 80-90% of the end-user response time is
spent on the frontend. Start there. greater potential for improvement simpler proven to work
14 Rules : 14 Rules Make fewer HTTP requests
Use a CDN
Add an Expires header
Gzip components
Put stylesheets at the top
Put scripts at the bottom
Avoid CSS expressions
Make JS and CSS external
Reduce DNS lookups
Minify JS
Avoid redirects
Remove duplicate scripts
Configure ETags
Make AJAX cacheable
Slide 6 : High Performance Web Sites YSlow
Slide 7 : http://conferences.oreilly.com/velocity/ 20% discount: vel08st
Even Faster Web Sites : Even Faster Web Sites Split the initial payload
Load scripts without blocking
Don't scatter scripts
Split dominant content domains
Make static content cookie-free
Reduce cookie weight
Minify CSS
Optimize images
Use iframes sparingly
To www or not to www
Why focus on JavaScript? : Why focus on JavaScript?
Scripts Block : Scripts Block only supported in IE
script and main page domains can differ
no need to refactor JavaScript
document.write Script Tag : document.write Script Tag document.write("" + ""); parallelization only works in IE
parallel downloads for scripts, nothing else
all document.writes must be in same script block
Browser Busy Indicators : Browser Busy Indicators
Browser Busy Indicators : Browser Busy Indicators good to show busy indicators when the user needs feedback
bad when downloading in the background
Ensure/Avoid Ordered Execution : Ensure scripts execute in order:
necessary when scripts have dependencies
IE: http://stevesouders.com/cuzillion/?ex=10017
FF: http://stevesouders.com/cuzillion/?ex=10018
Avoid scripts executing in order:
faster – first script back is executed immediately
http://stevesouders.com/cuzillion/?ex=10019 Ensure/Avoid Ordered Execution
Summary of Traits : Summary of Traits *Only other document.write scripts are downloaded in parallel (in the same script block).
and the winner is... : and the winner is...
Load Scripts without Blocking : Load Scripts without Blocking don't let scripts block other downloads
you can still control execution order, busy indicators, and onload event
What about inline scripts?
Inline Scripts Block Rendering : Inline Scripts Block Rendering long executing inline scripts block rendering of the entire page
workarounds:
initiate execution with setTimeout
move JavaScript to external script with advanced downloading techniques
Inline Scripts after Stylesheets Block Downloading : Inline Scripts after Stylesheets Block Downloading Firefox blocks parallel downloads when downloading stylesheets
IE doesn't...
...unless the stylesheet is followed by an inline script
best to move inline scripts above stylesheets or below other resources
Examples of Scattered Scripts : Examples of Scattered Scripts
Don't Scatter Scripts : Don't Scatter Scripts remember inline scripts carry a cost
avoid long-executing inline scripts
don't put inline scripts between stylesheets and other resources
Takeaways : Takeaways focus on the frontend
run YSlow: http://developer.yahoo.com/yslow
Velocity: register before May 5
this year's focus: JavaScript
Split the Initial Payload
Load Scripts without Blocking
Don't Scatter Scripts
speed matters
you CAN make your site even faster!