Boston Barcamp 2011 - Building Fast Websites

  • 725 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
725
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 4.
  • 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
  • 17.
  • 18. How Do You Measure Load Time?
    Google Webmaster Tools
    WebPagetest (www.webpagetest.org)
    Yottaa.com
    Firebug
    YSlow
    PageSpeed
    Dynatrace Ajax Edition
  • 19.
  • 20.
  • 21.
  • 22.
  • 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
  • 24.
  • 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
  • 27.
  • 28.
  • 29. Webmaster tools
  • 30. Webmaster tools
  • 31.
  • 32.
  • 33. Resources
    http://developer.yahoo.com/performance/
    http://code.google.com/speed/
    High Performance Websites (Book)
    Even Faster Websites (Book)
  • 34.
  • 35.
  • 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?