This is a presentation I gave at Boston Barcamp 2011, an "unconference" where all of the content is generated by attendees.

1. Building Fast WebsitesMaking Your Users Happy Boston Barcamp 2011 Jonathan Klein jklein@csnstores.com @jonathanklein

2. Agenda Why do we care? What Page Load Time means Best Practices Measurement Tools Homework

3. Why is a Faster Site Better? A Faster Website Will Make You More Money

5. Firefox Firefox reduced the load time of their download page by 2.2 seconds Downloads went up 15.4% This could drive 60 MILLION yearly downloads

6. Google Injected a 400ms delay into search 0.44% fewer searches/user 0.76% after 6 weeks After delay was removed, 0.21% fewer searches

7. Shopzilla Site redesign dropped load time by 5 seconds 7-12% increase in revenue 50% reduction in hardware use

8. Much More More examples: http://www.phpied.com/the-performance-business-pitch/ Faster sites… Convert better Cost less to run Rank better in Google: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

9. What Do I Mean By “Load Time”?

10. Load Time Two Main Pieces Server side generation time Client side render time 80-90% of load time takes place on the client We’ll be talking about this

11. Best Practices Reduce HTTP Requests Combine CSS, JS Use image sprites:

12. Best Practices Minify CSS/JS Strip comments and whitespace Automate this Gzip all text HTML CSS JS Optimize Images…

13. Image Optimization For graphics use PNG8 (256 color limitation) No more .gif (unless animated) JPEGs can be saved at 75% quality

14. Let’s play a game… 51 KB 1.88 KB

15. Smush Your Images! - smushit.com

16. Measuring Performance

18. How Do You Measure Load Time? Google Webmaster Tools WebPagetest (www.webpagetest.org) Yottaa.com Firebug YSlow PageSpeed Dynatrace Ajax Edition

23. Expires Headers Set a far future date on static resources CSS/JS/Images Release new version by changing the filename Benefits repeat visitors and repeat page views

25. Optimize Images Only serve the bytes you have to 90KB is a lot over a slow connection Keeping page weight down is critical

26. Homework

29. Webmaster tools

30. Webmaster tools

33. Resources http://developer.yahoo.com/performance/ http://code.google.com/speed/ High Performance Websites (Book) Even Faster Websites (Book)

36. Conclusion “Speed is the most important feature. If your application is slow, people won’t use it. I see this more with mainstream users than I do with power users...If something is slow, they’re just gone.” - Fred Wilson (10 Golden Principles of Web Apps)

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