What is performance?

• Performance is how fast your site works or one user
• NOT how many users it can serve (Scalability)
• NOT how often it's down (Reliability)

Why do we need to care?

• User experience
• Money!!!
  • Optimized site → +7-12% conversions &
    -50% in operation costs for Shopzilla
  • Optimized site → +15% (+60M) downloads for Firefox
    (-1 sec → +2.7% downloads)
  • Slowness is sticky as discovered by Google and Microsoft
• NEW: Google now uses site's speed in search ranking

Front-end: Start Here!

Top 1000 Home pages, growth in just 1.5 years.

Jun 2006 - Jan 2008

* Average Web Page Size Triples Since 2003, as of end of 2007 (via Nicole Sullivan)

People.com News Waterfall

• Total Requests: 168
• Document Complete: 7.1 sec
• Total Time: 10.8 sec
• Back-end Time: 0.3 sec = just 4%

EntertainmentWeekly.com News waterfall

• Total Requests: 127
• Document Complete: 10 sec
• Total Time: 17 sec
• Back-end Time: 0.2 sec = less then 2%

Time.com Politics waterfall

• Total Requests: 151
• Document Complete: 6.3 sec
• Total Time: 10 sec
• Back-end Time: 0.1 sec = less then 2%

RealSimple waterfall

• Total Requests: 151
• Document Complete: 8 sec
• Total Time: 8.8 sec
• Back-end Time: 0.1 sec = around 1%

Tools

• Diagnostic Tools, waterfallers
  • Google Page Speed extension for Firebug
  • YSlow extension for Firebug
  • WebPageTest.org and AOL Page Test
  • Fiddler2 (WinINET)
  • HttpWatch ($$$)
  • MySpace's Performance Tracker

Tools

• Content Compressors
  • JSMin by Douglas Crockford, Google's Closure JS Compiler
  • YUI Compressor - for JS and CSS
  • SmushIt.com - for images (web interface + API, not Open Source yet)

Tools

• Server-side
  • APC for PHP
  • memcached
  • mod_deflate for Apache2
  • nginx - lightweight reverse proxy
  • Squid - caching reverse proxy
  • Akamai, Limelight - CDNs

Tools

• Monitoring
  • Any tool that actually measures what you need!
  • Show Slow - my Open Source performance monitoring project

Show Slow

DEMO

How do I start?

How do I start? Business people

• use metrics that include site performance, tie it in to your bottom line (e.g. can you afford loosing 7-12% traffic? how fast will 50% savings in operations pay for optimization project?)
• incorporate performance testing in QA process (developers should not care more then you do). Use Google Page Speed / YSlow / Show Slow - they speak business language.
• Some things are hard to perfect, but it's still cheap to get a lot of improvement and quickly

How do I start? Designers

• watch Design Fast Websites presentation by Nicole Sullivan (Yahoo!, co-author of Smoosh.it)
• start designing experience, not digital paper
• use consistent styles (reusable CSS, cached)
• don't mandate effects that require heavy lifting on browser side
  • Rounded corners can still be fast
  • Transparent PNGs can still be fast
• use graceful degradation for less capable browsers (IE6)

How do I start? Front-end developers

• most of it is on your shoulders
• include YSlow grades in your year end review and resume
• include performance into your definition of good craftmanship
• learn how browsers work, DOM, events, if that trick of yours really makes it faster
• learn network, use waterfall tools, reduce amount of requests, use one CSS file (load it first), one JS file (load as late as possible), CSS sprites
• "smush" images, compress CSS and JS, automate it
• change your code and publishing process to allow "infinite" caching of assets (SVN Assets). If you can do that for HTML, ask to double your bonus.

How do I start? Backend developers

• you should already know what to do - performance culture is ages old here
• still heavily depends on your apps and connected to scalability and reliability, nothing loads before your code
• use indexes in your databases! Monitor how they perform as you dataset grows
• use browser cahce (e.g. for dynamic JSON, pages) and server caches (RAM is cheap, disks are even cheaper)
• help front-end developers!

How do I start? System administrators

• configure gzipping (mod_deflate) and expires
• talk to designers, and developers and even business people
• read RFC 2616 (HTTP) and Apache manual
• install APC, memcached, Squid, nginx

More info

• Google's Let's make the web faster initiative
• Page Speed best practices
• YSlow best practices
• TechPresentations.org/Performance

Start speeding!

• Meetup: http://www.meetup.com/Web-Performance-NY/
• Twitter: @nywebperf
• Wiki: http://www.nywebperformance.org/
• LinkedIn group

About these slides

These slides use an HTML presentation tool Slidy.

They are valid XHTML document with rich metadata embedded using RDFa.

Licensing & Attribution