14 Proven Principles to Supercharge Your Website Performance

Today I skimmed through "High Performance Web Sites" (Chinese title: "高性能网站建设指南"). The book also has an advanced follow‑up "Even Faster Web Sites" (Chinese: "高性能网站建设进阶指南"). It presents 14 independent performance‑enhancing principles, each with examples, aimed at site architects and front‑end engineers.

Principle 1: Reduce HTTP Requests

Fewer requests mean less time spent constructing and waiting for responses. Combine resources to lower the number of files needed to render a page.

Image Map : Use the usemap attribute on <img> and a <map> element to create multiple clickable areas on a single image, cutting request count.

CSS Sprite : Set background-position on an element to display different icons from one large image, reducing multiple image requests.

Inline Image : Embed small images directly in the src attribute as a data URI (e.g., src="data:image/gif;base64,...") when the image is tiny and used only on that page.

Principle 2: Use Multi‑Line CDN

Provide several network lines (e.g., domestic telecom, Unicom, Mobile) and geographic locations (north, south, west) so all users can access the site quickly.

Principle 3: Leverage HTTP Cache

Assign long Expires headers to rarely‑changed resources (like static images) so browsers can reuse them without re‑downloading.

Principle 4: Enable Gzip Compression

Compress HTTP responses with Gzip to reduce payload size and transmission time.

Principle 5: Place Stylesheets Early

Load CSS first so the page can start rendering sooner, giving users a faster‑feeling load.

Principle 6: Place Scripts at the Bottom

Defer JavaScript to the end of the page, allowing the visual content to render before script execution.

Principle 7: Avoid CSS Expressions

Complex JavaScript, DOM lookups, and selector operations degrade page processing efficiency.

Principle 8: Externalize JavaScript and CSS

While inlining reduces request count for a single page, shared libraries (e.g., jQuery) should be external files so multiple pages can reuse the cached copy, avoiding redundant transfers.

Principle 9: Reduce DNS Lookups

Use persistent connections (Keep‑Alive) and minimize the number of distinct hostnames to cut DNS resolution overhead.

Principle 10: Compress Your JavaScript

Run JavaScript through a minifier. For example, the uncompressed jQuery 1.6.2 is 230 KB, while the minified version is 89.4 KB.

Principle 11: Minimize Redirects

Each redirect adds an extra HTTP request, slowing the user experience. Use redirects only when necessary, such as preserving old URLs after a site migration or providing human‑friendly URLs.

Principle 12: Remove Duplicate Scripts

Do not include the same script multiple times on a page. For complex sites, implement dependency management to avoid redundant imports.

Principle 13: Handle ETag Carefully

ETag can cause cache inconsistencies across different servers or when unrelated changes alter the tag. Consider customizing ETag generation or simply rely on Last-Modified instead.

Principle 14: Use HTTP Cache for Ajax

Ajax requests often fetch stable resources; apply the same caching strategies described in Principles 3 and 13 to improve Ajax performance.

Original source: http://www.cnblogs.com/mdyang/archive/2011/07/12/high-performance-web-sites.html