Improving Web Frontend Performance

Author Alex Ciminian
2011-09-21 14:00

Presentation Outline

Speed as a feature
HTTP performance optimization
Organizing HTML resources
CSS Optimizations
JS Optimizations

Speed as a Feature

Speed improves user experience.
Smaller and faster websites lead to reduced costs, especially in the mobile space.
It is taken into account by Google in SR rankings.
Fact: on average 80% time spent downloading page resources, 20% spent on the server rendering the page.

Research on a wide variety of hypertext systems has shown that users need response times of less than one second when moving from one page to another if they are to navigate freely through an information space.

Jakob Nielsen,
usability expert

The page with 10 results took .4 seconds to generate. The page with 30 results took .9 seconds. Half a second delay caused a 20% drop in traffic. Half a second delay killed user satisfaction.

Greg Linden,
on A/B testing for Google

Website Performance Techniques (HTTP)

Reduce HTTP requests
Use HTTP compression: gzip, deflate
Use HTTP caching: If-Modified Since, ETag, Expires, Max-age

Reduce HTTP requests

Use CSS sprites and image maps
Combine JavaScript files.
Combine CSS files.
Use smart caching (more on that later).
The rule with most impact for first-time visitors

HTTP Compression

Two main alternatives: gzip, deflate; both standardized
To be used on text resources, not binary.
Tradeoff between CPU overhead and bandwidth reduction.

Example:

Accept-Encoding: gzip, deflate

Vary: Accept-Encoding
Content-Encoding: gzip

Turtle-tapping is an issue

HTTP Caching

More than one way to do it!

Last-Modified:

Last-Modified: Wed, Sep 01 2011 00:00:00 GMT

If-Modified-Since: Sep 13 2011

ETag:
```
ETag: bada55
```
```
If-None-Match: bada55
```

HTTP Caching (continued)

Expires:
```
Expires: Tue, 20 Mar 2007 04:00:25 GMT
```
Max-Age:
```
Cache-Control: max-age=3600
```

Placing HTTP Resources

Put stylesheets at the top and scripts at the bottom
FOUC or blank screen for CSS not used in the head of the page
JavaScript blocks parallel downloads
- XHR eval
- XHR injection
- Script in iframe
- Defer attribute (HTML4)
- document.write
All these differ in the way the browser busy indicators behave. The browser busy indicators are: status bar, progress bar, icon and cursor.

JS Performance: Efficient Data Access

Minding the scope chain : local variables are faster

function createChildFor(elementId){
    var doc = document, //store in a local variable
        element = doc.getElementById(elementId), 
        newElement = doc.createElement("div");
        element.appendChild(newElement);
}

with and catch augment the scope chain
Literal values, local variables, array elements and object properties have different access times
HTMLCollection is a live query

JS Performance: Flow Control

Conditionals:
- if for no more than two values to test or ranges
- switch for up to ten values to test
- arrays for over ten values which have single values as results
Loops:
- Store the count
- Decrement towards 0
- indexOf over arrays can be much slower than a loop
- Unrolling loops, Duff's device (?)

JS Performance: other aspects

String concatenation used to suck, [].join() was preferred.
Long running scripts can block the browser - solution: yield using timers or use web workers
setTimeout(func, 0) provides access to the events stack.

CSS Performance

Selectors are matched from right to left!
Avoid universal rules
Try and avoid qualifying ids and class names
Use as many classes as possible to have most specificity
Avoid the descendant selector
Use inheritance whenever possible

Other performance tips

Reduce DNS lookups
Use a CDN
Avoid redirects
Flush early

Resources

Steve Souders: High Performance Websites

Steve Souders: Even Faster Websites

Tools

Performance bookmarklets?