1. October 27, 2011
Deep Dive Frontend
Optimization
Jonathan Klein
@jonathanklein
www.jonathanklein.net
2. Agenda
Who I am
Why Frontend Performance?
Reducing HTTP Requests
CSS
Automation
Images
Automation
Monitoring Performance
3. Who is this Guy?
• Senior Software Engineer/Performance Guy at Wayfair
• Organizer - Boston Web Performance Meetup Group
• Organizer - #WPOChat (monthly Twitter chat)
• Wayfair Stats:
1. ~1400 requests/sec for static content
2. ~400 requests/sec for dynamic content
3. ~10 million unique visitors per month
4. On a typical Monday we serve 75,000,000 static files
3
5. Focusing on Frontend Performance…
• Reduces Requests to Backend
• Reduces Bandwidth Usage
• Makes Site Faster (oh right!)
1. 80-90% of load time takes place on the client
2. For Mobile 97%
5
6. Reducing HTTP Requests
Reducing HTTP requests is the #1
thing you can do to improve
performance
6
11. Automation Techniques
1. Specify what files you want on the page
• $css_files = array(‘foo’, ‘bar’, ‘baz’);
2. Build URL in code
• http://some.image.domain/combine/foo-bar-baz.css
3. Rewrite the URL when request arrives
• http://some.image.domain/scripts/combine.php?files=foo-bar-baz&type=css
4. Combine on the server
• Cache in memory (APC)
11
12. More CSS Tips
1. Put CSS Files at the top
2. Minify (remove comments and whitespace)
1. http://developer.yahoo.com/yui/compressor/
3. Gzip
4. Yeah, automate these as well
12
14. Start By Eliminating Them
• Use Sprites:
.classname {
background: url(sprite.png) no-repeat 0 -432px;
}
14
15. Can also use dataURIs
• Base64 Encoded String
1. http://www.nczonline.net/blog/2009/10/27/data-uris-explained/
2. NO SUPPORT in IE < 8 (use MHTML)
• http://www.phpied.com/inline-mhtml-data-uris/
• No request at all
• This…
• Turns into this:
• data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAMAAABFNRROAAADAFBMVEVVJD5pLk2EOF+HZ3q0n6rLusPt5+ry6
fL///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZcu0MAAAAOElEQVQI15XNMQ4AIAhDUSqivf+J
hahBExf/9tKhIncle8lSANgV0RJZy5a4aFNebHnCpselQX4bYBYA4TNfSuwAAAAASUVORK5CYII=
15