Front-End Performance
The time it takes to load pages is the first impression of your site and the shopping experience. Site responsiveness is especially important for new customers. 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 said that in A/B tests, redesigning a page so that it was 100 ms slower caused a 1% drop in sales.
Front-end performance is influenced by:
- JavaScript
- CSS
- Images
- Flash files
- HTTP request count
- Page complexity and size
- Whether pages are cached
Here's what happens when a page is rendered:
- Entering a URL in a browser triggers an HTTP request.
- The server builds the page and sends it back to the browser.
- The browser parses the DOM tree into memory.
- 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.
Follow these basic guidelines:
- The browser needs the CSS information before it can begin rendering. Therefore, if you include the CSS information, whether inline or external, at the beginning of the page, the page renders faster.
- All JavaScript in the header must be loaded first. If you include the JavaScript at the end of the file, the page appears to load faster. When JavaScript is at the end of the file, the page doesn't complete rendering faster, but it appears to load faster, because parts of the page can begin to render sooner.
- Because Flash files can trigger reload operations, it is better to put them before JavaScript, but after the rest of the page.
