Understanding Front-End Performance

Front-end site performance can directly increase or decrease your site traffic and sales.

For example, when Google slowed their site 500 ms for a user test, it caused a 20% drop in traffic. Greg Linden of Amazon has also said that in A/B tests, when they redesigned a page so that it was 100 ms slower, it caused a 1% drop in sales.

The time it takes to load pages is the first impression of your site and the shopping experience. This is why site responsiveness is especially important for new customers.

Here's what happens when a page is rendered:

  1. Entering a URL in abrowser triggers an HTTP request.
  2. The server builds the page and sends it back to the browser.
  3. The browser parses the DOM tree into memory.
  4. The browser resolves the components of the page: JavaScript , CSS, images, and AJAX.
    Note: The browser must have the DOM tree and CSS information before it starts rendering. Everything that is JavaScript and defined in the header must be loaded first. Flash files also trigger reload operations.

You should follow some basic guidelines: