What is traffic?

• Bytes sent from client to server and then back (not page hits)
• Measured in Terabytes (volume)
• or Megabits per second (Mbps) when you're big
• Asymmetric for the web (more bytes going out to clients)

Why save traffic?

• It makes sites faster (less bytes)
• You pay less including overage charges ($$$)
• Your systems can handle more traffic

Where to save?

• Text is tiny, but HTML is large
• Images are large
• Video is huge

gzip

• HTML, CSS, JS, JSON
• 70% reduction
• Incoming traffic is also reduced slightly
• Pages start to render much faster

Combine, minify and compress

• Combine JS, CSS and images - no extra headers, no extra connections
• Smush.it, PunyPNG for images (we need a library)
• YUICompressor for JS and CSS

Use CDN

• Close to user
• Prices are lower then with regular providers
• Easier to scale - not clogging your pipes
• Expecially for video
• <img src="<?=$CDN?>/images/logo.png"/>

Use browser cache

• Don't have "browser caching issue", use "browser caching functionality"
• All static content can be cached
• Avoid 304s - use far-future expires (last-modified is not enough)
• But, you need to keep URLs unique (CMS changes)

Video

• Use just enough quality
• Use streaming
• Don't autostart if you can

More info

• TechPresentations.org/Performance

About these slides

These slides use an HTML presentation tool Slidy.

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

Licensing & Attribution