Another month, another how-to with Ally. Last month, we explored how images can impact your web performance, with tips on how to shed those kilobytes whilst retaining quality.

However, images aren't the only assets that can slow down your web pages. In this post, we’ll be looking at how you can optimise the size and delivery of additional assets for your website.

Although there are many advanced techniques for caching and server-side optimisation of these assets, we will be looking at small changes that the average user can carry out in order to achieve better results.

1.Get rid of the third party blockers

Many third party assets like javascript, stylesheets and font files are render-blocking; this means that they can stop the rest of the page rendering until these assets have been loaded. To achieve faster speeds, our aim should be to make these requests as small as possible and optimise how these assets are loaded.

2. Fonts

Popular services such Google Fonts, Typekit and give us the ability to load a variety of custom web fonts. Although easy to setup, they can often end up loading more than you need.

Once you have selected the typefaces you need, make sure that you only select the weights and characters that you will need for your design. Example’s from Typekit and Google Fonts below show how easy it is to optimise your kits. Google even shows a handy loading time indicator - what more could you want!

Screen Shot 2017-04-03 at 18.47.18 Screen Shot 2017-04-03 at 18.53.01

Now that you have reduced the size of the load, we can optimise how these font assets are loaded using a web font loader. This can be used to load the font assets asynchronously, or while other loading tasks are being carried out.

3. Move your assets

A Content Delivery Network or CDN allows your to upload and distribute assets across a network of servers to help them get to your website users faster.

When your assets are being served from a CDN;

  • The users' browser will allow more to be loaded simultaneously.
  • It will handle the loading of the assets when you have unexpectedly high levels of traffic.
  • They will receive cached versions quicker from highly optimised servers.
  • It will save you money on hosting as it reduces the number of requests to your own server.

4. Local asset optimisation

In addition to third-party assets, you will have local assets that are loaded as part of your template or theme.

These files can get very large so it is important to optimise, combine and compress them to help them load faster.

When developing websites we have a build process that can be run in the background that will test, optimise and compress our assets automatically and then create minified bundles for us to serve to our users.

If you’re not a developer there are plugins that can be installed, that will be able to run similar tasks on your own server. You should always be able to tweak your settings to suit your website, however, remember to be careful with these as they could affect the performance of your server.

There are also free services like Cloudflare which allow you to manage and optimise your site with a range of powerful tools.

So now you know how these assets affect the rendering of your web pages why not give the changes a try?