High performance web site - reading notes (2)

1. Make Fewer HTTP Requests
Image maps
CSS Sprites
Inline images (data: URL scheme)
    e.g. <img alt="red star" src="data:image/gif;base64,THE-BASE64-DATA-OF-IMAGE">
Combined javascripts and stylesheets

2. Use a Content Delivery Network
Akamai
Mirror Image
Limelight
SAVVIS (specialized in video content delivery)
Use keynote.com or gomez.com to test geographic locations

3. Add an Expires header
Expires
Cache-Control (max-age) which take precedence over Expires
Apache mod_expires
Empty cache vs. primed cache
Last-Modified
revving filenames (add build version number), don't use query string

4. Gzip components
Accept-Encoding (Content-Encoding in response)
Image/PDF should not be gzipped (Gzip your scripts and stylesheets)
Gzip reduce by about 70%
Apache mod_gzip (mod_deflate)
Proxy caching uses Vary header (e.g. Vary: Accept-Encoding,User-Agent)
Update (5/17/2012)
Compress the Embedded OpenType font files used by Internet Explorer. EOT is a binary format, but it is not natively compressed
Compress favicon, while an image file, is not natively compressed

5. Put stylesheets at the top
Use Link instead of @import as @import rule causes unexpected ordering in how the components are downloaded
FOUC = Flash of unstyled content
Put stylesheets in the document HEAD using the LINK tag