The advantage to doing so is that domain information retrieval is in process by the time it's needed (think a SCRIPT tag to another domain at the end of the document or an avatar from a third party site).

2. Use requestAnimationFrame Instead of setInterval

The foundation of element animation in the early days of JavaScript libraries was setInterval. Luckily those days are mostly gone as we now have requestAnimationFrame, made for these type of interactions. The Mozilla Developer Network, the site I work on, provides a good example usage:

Using an API built for a given task is always miles better than using a tool that wasn't meant for such tasks.

3. Lazy-Execute Functionality

Typical industry practice is registering JavaScript execution after a DOMContentLoaded event. There's nothing wrong in doing so but too many of these calls can bog down the page. Other times there's no real logic to executing the functionality without another trigger.

Think of a tabbed interface, for example. There's no sense in rendering widgets, making AJAX calls, etc. for content that may never be seen. The same could be said with widgets lower in the page -- why do a bunch of work if the user doesn't see it?

There's no steadfast rule for lazy execution but next time you go to register code for "dom ready", think about if you really need it then, and when could be a more efficient time to initialize that code.

4. Use Icon Fonts Instead of Images

Every website uses dozens of icons and small images to enhance design and improve usability. We've grown into using sprites as best we can but some images must be separate, and even then there are inefficiencies if you want a different version of the image for hover effects, for example.

Enter icon fonts and frameworks like Font Awesome, IcoMoon, and many more. Vector graphic images are converted into usable fonts, allowing us to cut down on image requests. Even better is that since these graphics are fonts, the images will scale with font-size and are easy to change color via the CSS color property.

Lastly, icon fonts are incredible easy to use. In the case of Font Awesome, this would create a keyboard icon on the page:

<i class="icon-keyboard"></i>

Now, style that element's color and font-size and you've got your icon! Easy and efficient -- the way the web should be!

5. Avoid Using Libraries for Simple Feature Testing

There are a few really outstanding feature testing libraries available, including Modernizr and has.js. They contain tests for both CSS and JavaScript features, and are tried and tested.

The problem is that developers tend to include the entire library instead of simply including the one or two tests that they need. What's much more performant is going to the given project's GitHub account and pulling out the real test code for what you need. Easy way to save several KB that your app doesn't need!

6. Use Proper Expires Headers

Proper request headers can play an important role in performance. Having static image, CSS, and JavaScript files cached regularly will make only the server page latency the true barrier.

By setting the expiration on static files well in to the future, you bypass requests for the same file upon each page request. Adding a query string to the file request will

7. Force Hardware Acceleration for CSS Animation

CSS animations are much more efficient than JavaScript-based animation -- that we all know. One nifty trick to take CSS animation performance to the next level is forcing them into hardware acceleration with a simple CSS snippet:

The above snippet pushes browsers to use hardware acceleration, thus making the animation much more efficient. Win!

8. Lazy Load Images

Images are a massive slowdown on the client side. Each image requires its own request and that can seriously bog down an app. One solution is to use Data URIs, as I mentioned in the first post. Another solution is to simply lazy-load images. The logic behind lazy loading images is that you listen to window scrolling and load images only as the user scrolls near them.

I've created a MooTools-based LazyLoad plugin to accomplish image lazy loading. Due to a WebKit image/src issue, you can't add the true src attribute to the image, so you need to use a data- attribute instead

Images wont load for users that have JS turned off but the benefits far outweigh the gains with lazy loading. Many mobile apps employ this strategy for imagery, and so do many sites with infinite scrolling.

9. Load Resources from a CDN or Optimized Server

Numerous vendors provide CDN services for client side frameworks. You can include Google, CDNJS, and BootstrapCDNin that list.

Propping your static files on a CDN can boost our site speed tremendously. MaxCDN is one easily accessible vendor of CDN services. Also consider placing your videos on YouTube or Vimeo, services that have optimized video for both desktop and mobile. Speed kills with video!

Front end development is an ever changing and exciting space, so look for performance gains whenever you can. Your users will immediately feel the impact of your work, and in many cases, these techniques don't take long to implement!