Boston Barcamp 2011 - Building Fast Websites
-
Upload
jonathan-klein -
Category
Technology
-
view
981 -
download
1
description
Transcript of Boston Barcamp 2011 - Building Fast Websites
![Page 1: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/1.jpg)
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
![Page 2: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/2.jpg)
Agenda
• Why do we care?• What Page Load Time means• Best Practices• Measurement Tools• Homework
![Page 3: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/3.jpg)
Why is a Faster Site Better?
A Faster Website Will Make You More Money
![Page 4: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/4.jpg)
![Page 5: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/5.jpg)
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
![Page 6: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/6.jpg)
Injected a 400ms delay into search0.44% fewer searches/user
0.76% after 6 weeks
After delay was removed, 0.21% fewer searches
![Page 7: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/7.jpg)
Shopzilla
Site redesign dropped load time by 5 seconds
7-12% increase in revenue50% reduction in hardware use
![Page 8: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/8.jpg)
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
![Page 9: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/9.jpg)
What Do I Mean By “Load Time”?
![Page 10: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/10.jpg)
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
![Page 11: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/11.jpg)
Best Practices
• Reduce HTTP Requests– Combine CSS, JS– Use image sprites:
![Page 12: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/12.jpg)
Best Practices
• Minify CSS/JS– Strip comments and whitespace– Automate this
• Gzip all text– HTML– CSS– JS
• Optimize Images…
![Page 13: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/13.jpg)
Image Optimization
• For graphics use PNG8 (256 color limitation)– No more .gif (unless animated)
• JPEGs can be saved at 75% quality
![Page 14: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/14.jpg)
Let’s play a game…
51 KB
1.88 KB
![Page 15: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/15.jpg)
Smush Your Images! - smushit.com
![Page 16: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/16.jpg)
Measuring Performance
![Page 17: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/17.jpg)
![Page 18: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/18.jpg)
How Do You Measure Load Time?
• Google Webmaster Tools• WebPagetest (www.webpagetest.org)• Yottaa.com• Firebug• YSlow• PageSpeed• Dynatrace Ajax Edition
![Page 19: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/19.jpg)
![Page 20: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/20.jpg)
![Page 21: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/21.jpg)
![Page 22: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/22.jpg)
![Page 23: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/23.jpg)
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
![Page 24: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/24.jpg)
![Page 25: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/25.jpg)
Optimize Images
• Only serve the bytes you have to
• 90KB is a lot over a slow connection
• Keeping page weight down is critical
![Page 26: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/26.jpg)
Homework
![Page 27: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/27.jpg)
![Page 28: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/28.jpg)
![Page 29: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/29.jpg)
Webmaster tools
![Page 30: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/30.jpg)
Webmaster tools
![Page 31: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/31.jpg)
![Page 32: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/32.jpg)
![Page 33: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/33.jpg)
Resources
• http://developer.yahoo.com/performance/
• http://code.google.com/speed/
• High Performance Websites (Book)
• Even Faster Websites (Book)
![Page 34: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/34.jpg)
![Page 35: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/35.jpg)
![Page 36: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/36.jpg)
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)
![Page 37: Boston Barcamp 2011 - Building Fast Websites](https://reader033.fdocuments.in/reader033/viewer/2022061112/54572a4cb1af9fc0638b5119/html5/thumbnails/37.jpg)
We’re Hiring!www.csnstores.com/careers
Get In Touch:www.meetup.com/Web-Performance-Boston/
[email protected]@jonathanklein
Questions?