What is performance?

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

Why do we need to care?

• User experience
• Money!!!
  • +100ms → -1% sales (Amazon) *
  • +400ms → -5-9% full-page traffic (Yahoo! Autos front page) **
  • +500ms → -20% searches (Google) ***
  * Make Data Useful, Greg Linden at Stanford Data Mining class, fall 2006
  ** YSlow 2.0 early preview in China, Stoyan Stefanov, December 6^th, 2008
  *** Scaling Google for Every User, Marissa Mayer at Google Seattle Conference on Scalability 2007 (video)

Part 1: PHP + DB (Hans Zaunere)

Part 2: PHP code profiling using XDebug (Gennady Feldman)

Part 3: Front-end performance testing and optimization

Sergey Chernyshev

Front-end: Pages grew huge!

1995 - 2008

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

Front-end: Pages grew huge!

Jun 2006 - Jan 2008

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

How do we know what's going on?

• YSlow for Firebug
• Google's Page Speed is new, but promising (also Firebug extension)
• Waterfalls:
  • Firebug's Net panel (Firefox)
  • WebPageTest.org and AOL Page Test (IE, connection summary, scriptable)
  • Fiddler (WinINET, works with Firefox as proxy)
• JS profilers
• CSS analysis

Amazon Waterfall!

• Total Requests: 88
• Total Time: 6.344 seconds
• Back-end Time: 0.968 seconds = just 15%

CNN Waterfall!

• Total Requests: 174
• Total Time: 4.406 seconds
• Back-end Time: 0.171 seconds = less then 4%

Make fewer requests

• Consolidate your JS & CSS
  • on the fly using PHP
  • just create simple build process (it can be manual!)
• Use fewer images:
  • try CSS instead
  • use CSS sprites for background images

Put less on the wire

• Minify your JS & CSS (JSMin, YUI Compressor)
• SmushIt.com, OptiPNG for images
• gzip, mod_deflate

Flush early

• Flush your header early - browser will start download before backend is done

  ob_flush();
  flush();
  

Fight with cache, not against it

• DO NOT put random number in the URL just to avoid "browser caching problem"
• It's not a problem, It's a feature!
• If you know how to use it

Cache is your friend

• Modern web servers are already smart and send Last-modified header by default for all static content (JS, CSS, images)
  • so browsers can use conditional GET (If-Modified-Since => 304)
• But they are not smart enough to automatically use cache expiration headers

Cache is your friend

• Use far future expires on all static content to avoid pointless 304s!

Cache is your friend

• Use far future expires on all static content to avoid pointless 304s!
  • mod_expires
    .htaccess in /assets/ folder:

    ExpiresActive on
    ExpiresDefault A315569260
    

  • Use "URL versioning" in HTML to "invalidate" (timestamps, SVN versions)

Cache is your friend (even for dynamic content)

• Cache not only static, but dynamic too (data.php?...&ver=2009-06-12+18%3A02%3A38)

  if (array_key_exists('ver', $_GET)) {
          header('Expires: '.date('r', time() + 315569260));
          header('Cace-control: max-age=315569260');
  }
  

  • Especially useful for AJAX data (JSON, XML, CSV)
  • Calculate versions in calling code (SELECT MAX(time) FROM ...)
  • Use Shift+Ctrl+Delete to clear cache in Firefox when debugging
• If you can't version URLs, at least use Last-modified and 304s for conditional GET

Q & A

More info

• TechPresentations.org/Performance
• Follow the rules (34)

About these slides

These slides use an HTML presentation tool Slidy.

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

Licensing & Attribution