Downloaded 20 times
Uploaded byJonathan Klein
EscConf - Deep Dive Frontend Optimization
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.
More Related Content
Similar to EscConf - Deep Dive Frontend Optimization
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
EscConf - Deep Dive Frontend Optimization
- 1. October 27, 2011 DeepDive Frontend Optimization Jonathan Klein @jonathanklein www.jonathanklein.net
- 2. Agenda WhoI am Why Frontend Performance? Reducing HTTP Requests CSS Automation Images Automation Monitoring Performance
- 3. Who is thisGuy? • 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.
- 5. Focusing on FrontendPerformance… • 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 DoWe Do It?
- 9. CSS Only Serve ONE CSS file on each page* *Okay, there are always exceptions 9
- 10.
- 11. Automation Techniques 1. Specifywhat 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.
- 14. Start By EliminatingThem • Use Sprites: .classname { background: url(sprite.png) no-repeat 0 -432px; } 14
- 15. Can also usedataURIs • 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.
- 20.
- 21.
- 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.
- 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
Editor's Notes
- #6 Can do more with less hardware, saves you money. Saves you money on bandwidth as well. Since your site is faster you make more money.
- #7 Can do more with less hardware, saves you money. Saves you money on bandwidth as well. Since your site is faster you make more money.
- #18 This is a way to do automatic spriting – base64 encode the images