Two strategies for improving the performance of your web app

Performance is important. Improving the performance of your web app reduces your bounce rates and thus increases your chances of getting new users and customers. In Backbeam we have this in mind. That's why we've released two ways to reduce unnecessary HTTP requests.

We rewrote the way we store assets on our servers so now we're able to attach metadata to them. This opens up a lot of new possibilities. The first one is the ability to set a maxAge parameter on each asset individually.

The maxAge parameter tells the browser how long it should keep a copy of the asset without requesting it again. This is very useful when you're using version numbers in your assets, such as jquery-1.11.0.min.js. Each time the name of the asset changes the URL changes as well, so the browser will treat it as a new asset. For this kind of assets you should put a very high maxAge value and you will avoid many unnecessary HTTP requests.

But there is a drawback with assets you edit by hand. If you change the content but you don't change the name or the path of the asset, then the browser isn't going to request it again if it's already cached because the browser doesn't know that the asset has changed since the URL is the same. But we have thought about this too. In your HTML templates you can now use a built-in filter named lastModified. For example if you have this code in your template:


<link rel="stylesheet" href="/css/styles.css">

You can change the code to use this new filter and your code will look like this:


<link rel="stylesheet" href="{{ '/css/styles.css'|lastModified }}">

Now, if you load the web page and see the source code, it turns out that the markup will look like this:


<link rel="stylesheet" href="/css/styles.css?1394638810">

You see a timestamp in the querystring of the URL. This is the timestamp that indicates when the asset was last modified. And when the asset is requested by the browser the server will check that this timestamp matches the current last modified timestamp of the file. If they match then the server will tell the browser to cache the asset for a very long time (regardless the maxAge set in the control panel for that asset). So in practice the asset won't be requested again unless you change its content. If you modify the asset the timestamp will change and the browser will treat this as a new file so the experience will be seamless: the asset is only requested again if it changes and you don't have to rename it.

If you inspect the HTTP requests in your browser (e.g. in the Chrome Dev Tools), you will see the result: an unnecessary HTTP request avoided and the page loaded faster

The only drawback here is when you want to reference an asset from another asset. For example importing a CSS file from another CSS file. But you can combine both strategies: the maxAge metadata parameter with the lastModified filter in HTML templates.