Optimising Static Assets

Modern websites are created using a vast number of static assets, such as images, Javascript files, and stylesheets. These assets quickly add up to large page sizes and give your users a slow and undesirable experience. Even if your website backend is fast, static assets can really damage your user experience. Your assets can be optimized in a number of ways to help speed up your website.

Image Optimisation

The most obvious optimisation is to simply reduce the quality of your images, and therefore reduce file size. Done correctly, this can decrease the overall download size of your website by a large amount with only a very minor degradation in visual appearance. The file format also matters here, photographs and realistic images should always be stored as JPG for the smallest possible file size. Other types of images should be stored as PNG to keep crisp, sharp edges.

Minification

Minifying assets is a process which strips out all unnecessary characters from text assets to be used in the production environment. This includes unneeded whitespace and comments. While unusable in development, this can reduce the filesize by a large portion.


Minification can be applied to HTML, CSS and Javascript. It can be taken a step further by merging the same types of resources. For example, if you had a number of Javascript files, it would help performance by merging these into a single files. Even if some of the code isn’t used on all pages, this reduces the connections needed and the whole file can be cached in the browser on the first visit to the website.

CDNs

Content Delivery Networks (CDNs) are used to globally distribute your assets, so that users browsers can download your files from a server closest to them. This allows for the assets to be downloaded quickly and reduces load on your server.


CDNs have another benefit. Browsers generally limit the number of connections to a server to 6, using a CDN adds a different connection on your page allowing the browser to download more at once.


CDNs are best suited to sites with a globally distributed audience. If this isn’t the case, the other option is to simply add a subdomain to host your assets to get around the 6 connections limit.

Server Configuration

The easiest optimization of the lot is to enable GZIP on your web server. Once enabled, GZIP compresses your assets on the fly to be uncompressed in the client's browser. GZIP works best on text-based assets and can compress them as high as 70%-90% (https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer). GZIP offers little benefit to image assets due to them already being compressed.