Download Web Performance 101

Web Performance
Toolbelt
Jeremy Solarz
@jeremysolarz
Web Performance Group @
Meetup
1
What next?
• Where is the time?
• Remember the Rules?!
• Toolbelt
– YSlow
– Pagespeed
– HTTP Watch (Free / Prof Version)
– DynaTrace => we will have a guest speaker
– Google Profiler
– HAR
Web Performance Group @
Meetup
2
Frontendtime
Empty Cache
97%
95%
95%
Primed Cache
97%
81%
81%
www.google.com/search
search.live.com/results
www.msn.com
47%
67%
98%
0%
0%
94%
www.myspace.com
en.wikipedia.org/wiki
www.yahoo.com
98%
94%
97%
98%
91%
96%
www.youtube.com
98%
97%
www.aol.com
www.ebay.com
www.facebook.com
http://stevesouders.com/docs/velocity-20090622.ppt
Web Performance Group @
Meetup
3
Yahoo’s Rules
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Minimize HTTP Requests
Use a Content Delivery Network
Add an Expires or a CacheControl Header
Gzip Components
Put StyleSheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS
External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
Remove Duplicate Scripts
•
•
•
•
•
•
•
•
•
•
Configure ETags
Make AJAX Cacheable
Use GET for AJAX Requests
Reduce the Number of DOM
Elements
No 404s
Reduce Cookie Size
Use Cookie-Free Domains for
Components
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small &
Cacheable
http://developer.yahoo.com/yslow/help/#guidelines
Web Performance Group @
Meetup
4
YSlow
www.orf.at
Web Performance Group @
Meetup
5
Gooles Rules
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Avoid bad requests
Avoid CSS expressions
Combine external CSS
Combine external JavaScript
Defer loading of JavaScript
Enable compression
Leverage browser caching
Leverage proxy caching
Minify CSS
Minify HTML
Minify JavaScript
Minimize request size
Minimize DNS lookups
Minimize redirects
• Optimize images
• Optimize the order of styles
and scripts
• Parallelize downloads across
hostnames
• Put CSS in the document head
• Remove unused CSS
• Serve resources from a
consistent URL
• Serve scaled images
• Serve static content from a
cookieless domain
• Specify a character set early
• Specify image dimensions
• Use efficient CSS selectors
http://code.google.com/speed/page-speed/docs/rules_intro.html
Web Performance Group @
Meetup
6
Pagespeed
www.orf.at
Web Performance Group @
Meetup
7
HTTP Watch
www.orf.at
Web Performance Group @
Meetup
8
DynaTrace
not by Me ;)
Web Performance Group @
Meetup
9
Google Profiler
www.orf.at
Web Performance Group @
Meetup
10
HAR
• Http Archive Specification
– http://groups.google.com/group/http-archivespecification
• JSON Format
• Export
– http://www.stevesouders.com/blog/2009/10/1
9/http-archive-specification-firebug-andhttpwatch/
Web Performance Group @
Meetup
11
Need quick example?
See quickly how components interact…
• http://stevesouders.com/cuzillion/
Example 1: http://bit.ly/pX0Q9I
Example 2: http://bit.ly/oXUKzk
Web Performance Group @
Meetup
12
?
Web Performance Group @
Meetup
13
Last words
• Please review the Meetup on Meetup.com
• Next Meetup => Thursday, November 3th
2011
Web Performance Group @
Meetup
14