13 Proven Front‑End Performance Rules to Speed Up Your Website

Recently I read Steve Souders' "High Performance Web Sites" guide. Although the book is a bit dated, its performance optimization principles remain valuable. The rules share a common theme: small effort yields noticeable performance gains.

Performance golden rule: Only 10‑20% of response time is spent downloading the HTML document; the remaining 80‑90% is spent downloading page components.

Rule 1: Reduce HTTP requests . This is the most important rule. Techniques include:

CSS sprites – combine images into a single file and use background-position to locate them.

Data URLs – inline small images as base64‑encoded data URLs (e.g., webpack converts images < 8 KB).

Combine scripts and CSS files.

Rule 2: Use a CDN . Distribute content closer to end users to reduce request latency.

Rule 3: Add Expires headers . Set long‑lived Expires headers for static resources that rarely change.

Rule 4: Compress components . Use gzip or similar encoding to shrink files, often by about 70%.

Rule 5: Place stylesheets at the top . Early CSS loading improves perceived page speed and provides visual feedback during loading.

Rule 6: Place scripts at the bottom . Loading scripts later prevents them from blocking rendering and allows visual components to load first.

Rule 7: Avoid CSS expressions . Frequent evaluation of CSS expressions degrades performance.

Rule 8: Use external JavaScript and CSS . Although inline code reduces HTTP requests, external files benefit from caching, which yields greater performance gains.

Rule 9: Reduce DNS lookups . Leverage DNS caching and persistent connections.

Rule 10: Minify JavaScript . Remove unnecessary characters and whitespace; minified .min.js files illustrate this.

Rule 11: Avoid redirects . 3xx responses add latency; watch for missing trailing slashes that cause redirects.

Rule 12: Delete duplicate scripts .

Rule 13: Configure ETag . Conditional requests (If‑Modified‑Since, If‑None‑Match) rely on ETag; inconsistent ETags across servers can cause extra requests, harming performance in clustered environments.

Rule 14: Make Ajax cacheable . Cache Ajax responses where possible to reduce waiting time.

The book applied these rules to the top ten US sites and found substantial performance improvement opportunities. Reviewing my own internship projects revealed many similar optimization chances, reminding developers to apply these guidelines for better user experience.