Boost Your Website Speed: Proven Frontend Performance Best Practices

No one wants to wait for a webpage to load, yet most sites disappoint. This article presents Yahoo's 35 golden rules for frontend performance, organized by category, and explains how to test and improve site responsiveness.

Web Content

Reduce HTTP request count

Reduce DNS lookup count

Avoid page redirects

Cache Ajax responses

Lazy load resources

Preload critical resources

Reduce DOM element count

Domain sharding for static assets

Reduce the number of iframes

Avoid 404 errors

Server

Use a CDN

Add Expires or Cache‑Control headers

Enable Gzip compression

Configure ETags appropriately

Flush output early (Response.Flush)

Prefer GET for Ajax requests

Avoid empty image src attributes

Cookie

Reduce cookie size

Serve static content from cookie‑free domains

CSS

Place stylesheet links in the document head

Avoid CSS expressions

Use <link> instead of @import Avoid IE filters

JavaScript

Place scripts at the bottom of the page

Use external JavaScript and CSS files

Minify JavaScript and CSS

Remove duplicate scripts

Reduce DOM access (cache elements, batch updates)

Implement smart event handling (event delegation)

Images

Optimize image files (lossless compression, proper formats)

Use CSS sprites to combine multiple icons

Do not scale images via HTML/CSS; serve appropriately sized files

Use a small, cacheable

favicon.ico

Mobile Client

Keep individual resources under 25 KB (iPhone cache limit)

Bundle components when the client supports it

Examples

Bundling files reduces request count. In ASP.NET you can use ScriptManager or MVC bundling.

CSS sprite example (combined image with background‑position):

.app-icon-read { background-position: 0 0; }
.app-icon { background: url("/pics/app/app_icons_50_5.jpg") no-repeat; border-radius:10px; box-shadow:1px 1px 2px #999; display:inline-block; height:50px; width:50px; }

Image map example (multiple clickable areas on a single image):

ETag removal configuration for IIS:

<rewrite>
  <outboundRules>
    <rule name="Remove ETag">
      <match serverVariable="RESPONSE_ETag" pattern=".+" />
      <action type="Rewrite" value="" />
    </rule>
  </outboundRules>
</rewrite>

Minified CSS example:

body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}

Image optimization tools: imagemagick, pngcrush, jpegtran.

JavaScript minifiers: Packer, JSMin, Closure Compiler, YUICompressor, AjaxMin.

CSS minifiers: CSSTidy, Minify, YUICompressor, AjaxMin, CSSCompressor.