Optimizing Web Assets For Performance

Although most internet users nowadays have very fast connections it is still important to optimize your web application’s assets to ensure optimal performance. This is especially the case for mobile users, which have more constrained resources (data connections and hardware resources). There are a number of things you can do but I’lll highlight just a few that I believe are important to think about.


Serve Multiple Sizes - Instead of serving the same image used in multiple locations at different sizes on your website, you should try to make use of CSS media queries to define separate images for certain circumstances. Check out css-tricks's page on media queries for more info.

Compression - You should compress your images as well as possible in a photo editor before using them on the web. However, you can also use code to compress them on the fly. For example, this is possible using the various image processing utility functions in PHP.

Prefetching - With the new HTML5 specification you can prefetch content before its actually needed. This means that when it is needed, the content will already be available. Check out the WhatWG page on the prefetch specification for more info.

Caching - It's a good idea to try to take advantage of caching in your browser if possible. This way you can reduce the amount of content that needs to be retrieved multiple times. To learn more about controlling your browser's caching in the HTTP headers check out this page via betterexplained.com.

Stylesheets (CSS)

Preprocessing - CSS preprocessors help to automatically organize and optimize your stylesheets. Check out LESS, SASS, or Stylus.

Syntax Improvements - By carefully crafting your stylesheets you can reduce the size and increase the performance of rendering them. For some tips on good practices check out this developers.google.com site and this css-tricks.com page. You can also minimize the size of your CSS files automatically with tools such as CSSOptimizer and Minifycss.

Client-Side Code (JavaScript)

Size - You can also minimize the size of your JavaScript code. This reduced file size will allow for it to load quicker. There are quite a few tools out there to help you automatically minimize your JavaScript code.

Code Organization - You should try to only load code as its needed in your application. Minimizing HTTP requests will help to increase performance. You can make use of tools such as RequireJS to load different modules as needed. There are also ways to 'simulate' namespaces in JavaScript to help reduce the number of objects and to better organize the code.

Design Patterns - You wouldn't want to create everything you want to do from scratch. For many things you want to do there are most likely established efficient methods out there. Some design patterns to look at may be: Constructor Pattern, Module Pattern, MVC Pattern, Observer Pattern, Function Chaining Pattern, etc.

Written on August 23, 2013