Web Performance

1. The Performance Golden Rule

  • 80-90% of the end-user response time is spent on the front-end

2. Impact of Cookies on Response Time

Lessons

  • eliminate unnecessary cookies
  • keep cookie sizes low
  • set cookies at appropriate domain level
  • set Expires date appropriately an earlier date or none removes the cookie sooner

3. The “initial” 14 Rules

Make fewer HTTP requests

- Combine scripts
- Combine style sheets
- Combine images into an image map
- Combine images using “sprites”

An image sprite is a collection of images put into a single image

Use a CDN (content distribution network)

  • Content Distribution Networks have servers around the world. They distribute your content so downloads can come from a nearby location.

Add an Expires header

  • Cache-Control is an alternative to Expires

  • When cache-control: max-age is present, the response is stale if its current age is greater than the age value given (in seconds) at the time of a new request for the resource

  • The max-age directive on a response implies that the response is cacheable

Gzip components

  • During the initial negotiation, if both browser and server support at least one "common" compression method (gzip, compress, etc) then the transfer is compressed.

  • gziped: script, css, XML, JSON

  • not gziped: image, pdf

Put stylesheets at the top

  • Stylesheets block rendering in IE; IE will examine all stylesheets before starting to render

  • Firefox doesn’t wait, it renders objects immediately and re-draws if it finds a stylesheet; that causes flashing during loading

Move scripts to the bottom

  • As the loading of JavaScript can cause the browser to stop rendering the page until the JavaScript is fully loaded, one can avoid the delay by moving scripts to the bottom

Avoid CSS expressions

  • Problem: expression may execute many times

Make JS and CSS external

  • Inlining JavaScript code will cause the same bytes to be downloaded on every page view

  • External JS and CSS can be cached

Reduce DNS lookups

  • reduce the number of unique hostnames

Minify JS

  • Minification, or minify, is the process of removing all unnecessary characters from source code, without changing its functionality

  • An obfuscator minifies but also makes modifications to the program, changing variable names, function names, etc.

Avoid redirects

  • Redirects are used to map users from one URL to another

Status 301 means that the resource (page) is moved permanently to a new location. The client/browser should not attempt to request the original location but use the new location from now on.

Status 302 means that the resource is temporarily located somewhere else, and the client/browser should continue requesting the original url.

Remove duplicate scripts

  • Extra HTTP requests (IE only)

  • Extra executions

Configure Etags

Etags are used by clients and servers to verify that a cached resource is valid

If there is a match of Etags, the server returns a 304(Not Modified). If Etag doesn’t match, can’t send 304

Make AJAX cacheable

  • The AJAX request URL should include a dynamic variable, e.g. dateAndtime, so if the page is changed at the server, the new page will be downloaded

  • As long as the AJAX request page has not changed, e.g. an address book would change infrequently, it is best to have the browser cache it

4. New Rules (Yahoo's YSlow)

Avoid empty src or href

  • IE makes a request to the directory in which the page is located; Safari, Chrome, Firefox make a request to the actual page itself

Use GET for AJAX requests

When using the XMLHttpRequest object

  • POST: (1) send the headers, and (2) send the data.
  • GET : sends the headers and the data together

Reduce the number of DOM elements

Avoid HTTP 404 (Not Found) error

  • HTTP cookies are used for authentication, personalization, and other purposes. Cookie information is exchanged in the HTTP headers between web servers and the browser, so keeping the cookie size small minimizes the impact on response time.

Do not scale images in HTML

  • the browser will download an image that is larger than necessary. (This rule conflicts with Responsive design patterns)

Make favicon small and cacheable

A favicon is an icon associated with a web page; this icon resides in the favicon.ico file in the server's root.

  • Making the favicon small and reducing the cookie size for the server's root cookies improves performance for retrieving the favicon.
  • Making favicon.ico cacheable avoids frequent requests for it. Set expires header to a few months into the future, and limit size to 1K.

results matching ""

    No results matching ""