Boston Barcamp 2011 - Building Fast Websites

1,016 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,016
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Boston Barcamp 2011 - Building Fast Websites

  1. 1. Building Fast WebsitesMaking Your Users Happy<br />Boston Barcamp 2011<br />Jonathan Klein<br />jklein@csnstores.com<br />@jonathanklein<br />
  2. 2. Agenda<br />Why do we care?<br />What Page Load Time means<br />Best Practices<br />Measurement Tools<br />Homework<br />
  3. 3. Why is a Faster Site Better?<br />A Faster Website Will Make You More Money<br />
  4. 4.
  5. 5. Firefox<br />Firefox reduced the load time of their download page by 2.2 seconds<br />Downloads went up 15.4%<br />This could drive 60 MILLION yearly downloads<br />
  6. 6. Google<br />Injected a 400ms delay into search<br />0.44% fewer searches/user<br />0.76% after 6 weeks<br />After delay was removed, 0.21% fewer searches<br />
  7. 7. Shopzilla<br />Site redesign dropped load time by 5 seconds<br />7-12% increase in revenue<br />50% reduction in hardware use<br />
  8. 8. Much More<br />More examples:<br />http://www.phpied.com/the-performance-business-pitch/<br />Faster sites…<br /> Convert better<br /> Cost less to run<br /> Rank better in Google: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html<br />
  9. 9. What Do I Mean By “Load Time”?<br />
  10. 10. Load Time<br />Two Main Pieces<br />Server side generation time<br />Client side render time<br />80-90% of load time takes place on the client<br />We’ll be talking about this<br />
  11. 11. Best Practices<br />Reduce HTTP Requests<br />Combine CSS, JS<br />Use image sprites:<br />
  12. 12. Best Practices<br />Minify CSS/JS<br />Strip comments and whitespace<br />Automate this<br />Gzip all text<br />HTML<br />CSS<br />JS<br />Optimize Images…<br />
  13. 13. Image Optimization<br />For graphics use PNG8 (256 color limitation)<br />No more .gif (unless animated)<br />JPEGs can be saved at 75% quality<br />
  14. 14. Let’s play a game…<br />51 KB<br />1.88 KB<br />
  15. 15. Smush Your Images! - smushit.com<br />
  16. 16. Measuring Performance<br />
  17. 17.
  18. 18. How Do You Measure Load Time?<br />Google Webmaster Tools<br />WebPagetest (www.webpagetest.org)<br />Yottaa.com<br />Firebug<br />YSlow<br />PageSpeed<br />Dynatrace Ajax Edition<br />
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23. Expires Headers<br />Set a far future date on static resources<br />CSS/JS/Images<br />Release new version by changing the filename<br />Benefits repeat visitors and repeat page views<br />
  24. 24.
  25. 25. Optimize Images<br />Only serve the bytes you have to<br />90KB is a lot over a slow connection<br />Keeping page weight down is critical<br />
  26. 26. Homework<br />
  27. 27.
  28. 28.
  29. 29. Webmaster tools<br />
  30. 30. Webmaster tools<br />
  31. 31.
  32. 32.
  33. 33. Resources<br />http://developer.yahoo.com/performance/<br />http://code.google.com/speed/<br />High Performance Websites (Book)<br />Even Faster Websites (Book)<br />
  34. 34.
  35. 35.
  36. 36. Conclusion<br />“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.”<br /> - Fred Wilson (10 Golden Principles of Web Apps)<br />
  37. 37. We’re Hiring!<br />www.csnstores.com/careers<br />Get In Touch:<br />www.meetup.com/Web-Performance-Boston/<br />jklein@csnstores.com<br />@jonathanklein<br />Questions?<br />

×