After YSlow "A"

After YSlow “A”: 20 more ideas for improving the user experience Nicole Sullivan nicolesl@yahoo-inc.com http://www.stubbornella.org Stoyan Stefanov stoyan@yahoo-inc.com http://www.phpied.com http://developer.yahoo.com/performance

The sluggish Web ,[object Object],[object Object],[object Object],[object Object]

Exceptional Performance at Yahoo! ,[object Object],[object Object],[object Object],[object Object],[object Object]

The Performance Golden Rule ,[object Object],[object Object],[object Object],[object Object]

List of 14 best practices (updated) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://developer.yahoo.com/performance/rules.html content server server server server javascript javascript javascript javascript content css css css css content content

After YSlow “A”: 20 more best practices

Flush the buffer early ,[object Object],[object Object],[object Object],[object Object],Components download in parallel with HTML

Post-load components ,[object Object],[object Object],[object Object],[object Object],[object Object]

Post-load components ,[object Object],[object Object],[object Object]

Preload components ,[object Object],[object Object],[object Object],[object Object]

Preload - Unconditional ,[object Object]

Preload - Conditional ,[object Object]

Preload - Anticipated ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Reduce DOM elements ,[object Object],[object Object],[object Object],[object Object],[object Object]

Reduce DOM elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Avoid filters – AlphaImageLoader ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Avoid AlphaImageLoader ,[object Object],[object Object],[object Object]

Avoid filters ,[object Object]

Hmm, images? ,[object Object],[object Object],[object Object]

What % of page weight is images? Average 45.6% 1 Yahoo! 29% 2 Google 75% 3 YouTube 62% 4 Live.com 64% 5 MSN 41% 6 MySpace 48% 7 Wikipedia 39% 8 Facebook 35% 9 Blogger 27% 10 Yahoo! JP 36%

GIF-to-PNG Average 20.42% savings LOSSLESS!

Crush PNG Average 16.05% savings LOSSLESS!

Strip JPEG metadata Average 11.85% savings LOSSLESS!

Optimize images ,[object Object],[object Object],[object Object]

Case study: Google charts API 1 2 3

Case study: Google charts API 1 2 3 Original (707 colors)

Case study: Google charts API Original (1408 colors) Crushed (1408 colors) PNG8 (256 colors) 25% saving 55% saving (1000+ colors are lost but who can tell?)

Optimize images ,[object Object],[object Object]

Optimize CSS sprites ,[object Object],[object Object],[object Object]

Optimize sprites Horizontal may be smaller

To sprite or not to sprite? ,[object Object],[object Object],[object Object]

Mobile Performance Research Reduce the size of each component to 25 Kb or less. http://yuiblog.com/blog/2008/02/06/iphone-cacheability/ iPhone

URLs – Exceptional Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

URLs (contd.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Take-home ,[object Object],[object Object],[object Object],[object Object],[object Object]

Thank you! Nicole Sullivan nicolesl@yahoo-inc.com http://www.stubbornella.org Stoyan Stefanov stoyan@yahoo-inc.com http://www.phpied.com http://developer.yahoo.com/performance

After YSlow "A"

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to After YSlow "A"

Similar to After YSlow "A" (20)

Recently uploaded

Recently uploaded (20)

After YSlow "A"

Editor's Notes