The document discusses optimizing frontend performance. It recommends reducing HTTP requests by combining CSS files into one file and using sprites and data URIs for images. It also suggests automating minification, compression, and image optimization. Performance should be monitored using tools like WebPagetest, YSlow, and PageSpeed. Frontend optimizations like these can reduce page load times and bandwidth usage.

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