Deep Dive Frontend Optimization

Jonathan Klein

@jonathanklein

www.jonathanklein.net

October 27, 2011

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

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%

6

Reducing HTTP Requests

Reducing HTTP requests is the #1 thing you can do to improve

performance

So How Do We Do It?

9

CSS

Only Serve ONE CSS file on each page*

*Okay, there are always exceptions

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)

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

Images

14

Start By Eliminating Them

• Use Sprites:

.classname { background: url(sprite.png) no-repeat 0 -432px;}

15

Can also use dataURIs

• Base64 Encoded String1. 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+ry6fL///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZcu0MAAAAOElEQVQI15XNMQ4AIAhDUSqivf+JhahBExf/9tKhIncle8lSANgV0RJZy5a4aFNebHnCpselQX4bYBYA4TNfSuwAAAAASUVORK5CYII=

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;

}

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

BEFORE

977KB

AFTER

385KB

Monitoring and Testing

22

Measuring and Monitoring

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

23

Measuring and Monitoring

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

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

29

Resources

• http://www.webperformancecentral.com/wiki/WebPagetest/Optimization_Help

• http://developer.yahoo.com/performance/

• http://code.google.com/speed/

• High Performance Websites (Book)

• Even Faster Websites (Book)

30

Questions?

We’re Hiring!www.wayfair.com/careers

Get In Touch:www.meetup.com/Web-Performance-Boston/

jklein@wayfair.com@jonathanklein