This is a talk I gave at EscConf in Boston, on October 27th 2011.

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

4. Why Frontend Performance?

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

8. So How Do We Do It?

9. CSS
Only Serve ONE CSS file on each page*
*Okay, there are always exceptions
9

10. AUTOMATE!

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

13. Images

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

17. Automation
function encode_image($image_path) {
$base64_string = apc_fetch($image_path);
if (empty($base64_string)) {
$image_data = file_get_contents($image_path);
$base64_string = base64_encode($image_data);
apc_store($image_path, $base64_string);
}
return $base64_string;
}
17

18. Smush Your Images!
• Lossless Image Compression:
1. http://www.smushit.com/ysmush.it/
• Lossy Image Compression
1. 90% JPEG vs. 100% JPEG - You can’t tell the difference
18

19. BEFORE
977KB

20. AFTER
385KB

21. Monitoring and Testing

22. Measuring and Monitoring
• Google Webmaster Tools
• WebPagetest (www.webpagetest.org)
• Yottaa.com
• Firebug
• YSlow
• PageSpeed
• Dynatrace Ajax Edition
22

23. Measuring and Monitoring
• Google Webmaster Tools
• WebPagetest (www.webpagetest.org)
• Yottaa.com
• Firebug
• YSlow
• PageSpeed
• Dynatrace Ajax Edition
23

28. http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html

29. Resources
• http://www.webperformancecentral.com/wiki/WebPagetes
t/Optimization_Help
• http://developer.yahoo.com/performance/
• http://code.google.com/speed/
• High Performance Websites (Book)
• Even Faster Websites (Book)
29

30. Questions?
We’re Hiring!
www.wayfair.com/careers
Get In Touch:
www.meetup.com/Web-Performance-Boston/
jklein@wayfair.com
@jonathanklein
30