boston barcamp 2011 - building fast websites
DESCRIPTION
This is a presentation I gave at Boston Barcamp 2011, an "unconference" where all of the content is generated by attendees.TRANSCRIPT
Furniture
Home Décor
Housewares
Home Improvement
Outdoor
Baby & Kids
Shoes, Bags & Luggage
Health & Fitness
Pet
Office & School Supply confidential materials
Building Fast WebsitesMaking Your Users Happy
Boston Barcamp 2011Jonathan Klein
[email protected]@jonathanklein
Agenda
• Why do we care?• What Page Load Time means• Best Practices• Measurement Tools• Homework
Why is a Faster Site Better?
A Faster Website Will Make You More Money
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
Injected a 400ms delay into search0.44% fewer searches/user
0.76% after 6 weeks
After delay was removed, 0.21% fewer searches
Shopzilla
Site redesign dropped load time by 5 seconds
7-12% increase in revenue50% reduction in hardware use
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
What Do I Mean By “Load Time”?
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
Best Practices
• Reduce HTTP Requests– Combine CSS, JS– Use image sprites:
Best Practices
• Minify CSS/JS– Strip comments and whitespace– Automate this
• Gzip all text– HTML– CSS– JS
• Optimize Images…
Image Optimization
• For graphics use PNG8 (256 color limitation)– No more .gif (unless animated)
• JPEGs can be saved at 75% quality
Let’s play a game…
51 KB
1.88 KB
Smush Your Images! - smushit.com
Measuring Performance
How Do You Measure Load Time?
• Google Webmaster Tools• WebPagetest (www.webpagetest.org)• Yottaa.com• Firebug• YSlow• PageSpeed• Dynatrace Ajax Edition
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
Optimize Images
• Only serve the bytes you have to
• 90KB is a lot over a slow connection
• Keeping page weight down is critical
Homework
Webmaster tools
Webmaster tools
Resources
• http://developer.yahoo.com/performance/
• http://code.google.com/speed/
• High Performance Websites (Book)
• Even Faster Websites (Book)
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)
We’re Hiring!www.csnstores.com/careers
Get In Touch:www.meetup.com/Web-Performance-Boston/
[email protected]@jonathanklein
Questions?