MIX10: Jason Weber’s High-Performance Best Practices for Web Sites

During a long car trip to Buffalo, NY I decided to enrich myself by watching a few videos having to do with the field of web design. Here are my notes on Jason Weber’s presentation on High-Performance Best Practices for Web Sites. Below are his “20″ best practices for performance:

NETWORKING

1. Compress files downloads.
   Utilize gzip encoding when making http requests and responding to those requests. Don’t do it on images! They’re already compressed.
2. Provide cache-able content.
   Set an expiration date on your responses so the server doesn’t have to pull it down again.
3. Use conditional requests.
   Only pull content if it was last modified since a certain date. Include the modification date in the response.
4. Minify your Javascript.
   Removes extra spaces and returns, replaces variables with single characters, can make your Javascript be 25% of its original size.
5. Do not scale images.
   Requires less CPU time for the browser to display the image. Sending more data than what is needed slows down the download process.
6. Use image sprites!
   Keeps network requests down.

HTML

1. Link Javascript to the bottom of your page.Inline Javascript slows down your page load in older browsers b/c older browsers need to execute that code right away.
   Don’t ever link to a script file in the head of your page. In older browsers they will go ahead and load that Javascript before the page is even done loading. Link your Javascript at the end of the file instead.
2. Add a defer tag when you must link Javascript at the top of the page.You can also use the defer tag in the script tag if you must put your Javascript in the head part of your page. This defers the loading of the Javascript until the entire HTML page has been rendered (supported since IE4, don’t know about FF).

CSS

1. Link the CSS in the head of your file, unlike the Javascript best practice.Don’t want any “flashes of unstyled content.” Avoid embedded styles; can slow down loading of webpages.
2. Avoid using the @import for CSS files as it slows down the browser.The browser tries to download all of those imported files so it can properly render the cascade and thus takes longer.

COLLECTIONS

1. He didn’t really address anything under this topic.

JAVASCRIPT

1. Minimize symbol resolution (walking up the lookup chain).To resolve a variable value there are 3 places Javascript looks:Local > Intermediate Scopes > GlobalThe higher up it must go to get the value the more performance cost.Objects work in the same way:Instance > Prototype Chain > DOMIf you don’t declare the variable using var = its scope is global and costs you performance. If you use var = you scope it to be a local variable.

   Works the same way with functions too.

2. Use native methods.To parse JSON you can use the native parse or stringify that’s native to the browser (possibly only IE8 though…?).
3. Remove duplicate script files.
4. Minimize the amount of Javascript frameworks you use on a page.

MARSHALLING

1. Minimize the amount of DOM interactions that you make from Javascript.Each time the Javascript engine has to communicate with the DOM it costs you a little bit more.
   Cache your DOM lookups in a variable, e.g. var elms = document.body.all;

DOM

1. Built in methods are always more effecient than trying to roll something yourself.Instead of nodes[i] to iterate through just use the DOM API node.nextSibling; to iterate through that collection; minimizes calls to the DOM.
2. Use the selectors API for effecient access to collections (IE8+ only).

FORMATTING

1. Only send the required styles for that page.(Doesn’t this go against the whole cacheing of your stylesheet as an advantage while surfing through your site?)
2. When possible, use class or id based selectors over element selectors.Make element selectors as simple as possible and use child or descendent selectors when able.

BLOCK BUILDING, LAYOUT, RENDERING

1. Batch visual changes.Don’t allow your user to see every change you make to the page until you’re done. Put all changes in a variable and then change the page.

At the end of Mr. Weber’s presentation he hit briefly on the new features of IE9. Below are my notes on this topic:

• Hardware accelerated HTML 5
• Compiled Javascript (into native machine code to be executed rather than interpreting non-native machine code)
• GPU powered HTML5 graphics