Websites rely on assets such as images, fonts, and videos to deliver content. Asset optimisation involves refining these resources to ensure they load quickly and efficiently while maintaining quality. This process includes compression, format selection, and delivery optimisation to improve performance.

Why is Asset Optimisation Important?

Improved Page Speed: Smaller assets reduce download times, directly enhancing load performance.
Enhanced User Experience: Faster websites lower bounce rates and keep visitors engaged.
SEO Benefits: Search engines like Google prioritise fast-loading websites in rankings.
Bandwidth Efficiency: Optimised assets consume less data, benefiting users on limited mobile plans.

How to Optimise Assets

1. Image Optimisation

Images often make up the largest portion of a webpage's total size. Optimising them involves:

Compression: Compression reduces the file size of images while maintaining an acceptable level of quality. There are two main types of compression:
- Lossless Compression: This method reduces file size without any loss in quality by removing unnecessary metadata and optimising data structures. It is ideal for graphics requiring precision, such as logos and icons.
- Lossy Compression: This method achieves higher compression rates by discarding some image data, which may result in a slight quality loss. It is best suited for photographs and other complex images where minor quality degradation is acceptable.

Tools that can be used for image compression include:

Squoosh: A powerful web-based tool that allows for both lossy and lossless compression.
TinyPNG: Specialises in compressing PNG and JPEG files without significant quality loss.
ImageOptim: Lossless compression and metadata removal

Modern Formats: Traditional formats like JPEG and PNG can be large and inefficient. In contrast, WebP and AVIF offer significantly better compression, reducing file sizes by 30-50% while maintaining quality.

To efficiently convert images, FFmpeg provides a powerful command-line solution. However, since not all browsers support these modern formats, implementing fallbacks to traditional formats is essential to ensure compatibility. For example:
```
  <picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="...">
  </picture>
```
Responsive Delivery: To ensure images look sharp on all devices while minimising bandwidth use, serve images in different sizes based on the user’s screen size. The srcset and sizes attributes allow browsers to choose the most appropriate image:
```
  <img src="small.jpg"  
       srcset="medium.jpg 800w, large.jpg 1200w"  
       sizes="(max-width: 600px) 800px, 1200px"  
       alt="...">
```
Lazy Loading: Loading all images at once can slow down page performance. Instead, defer loading images that are not immediately visible using the loading="lazy" attribute. This improves initial page load time and conserves bandwidth:
```
  <img src="image.jpg" alt="Lazy Loaded Image" loading="lazy">
```

2. Video and Multimedia Optimisation

Videos are large assets that require efficient handling to ensure smooth playback without unnecessary bandwidth consumption.

Compression: Use tools like HandBrake to reduce resolution and bitrate while maintaining quality.
Streaming Over Hosting: Instead of self-hosting, use platforms like YouTube or Vimeo, which offer optimised streaming, adaptive bitrate playback, and CDN distribution, ensuring fast loading times and better performance across different devices and network conditions.
Disable Autoplay: Allow users to control video playback rather than consuming bandwidth automatically. This approach enhances user experience, conserves mobile data, and prevents unnecessary distractions.
Use HTML5 Video Instead of GIFs: MP4 files are significantly smaller and more efficient than GIFs. Unlike large, looping GIFs, MP4 videos provide the same visual effect with better compression and playback controls. For example, a looping animation can be implemented using HTML5 video:
```
  <video autoplay loop muted>
      <source src="animation.mp4" type="video/mp4">
  </video>
```

3. Font Optimisation

Custom fonts enhance the aesthetics of a website but can negatively impact performance if not optimized properly. To improve font efficiency, several techniques can be applied:

Subsetting: Reducing font size by removing unused characters and language-specific glyphs can significantly decrease file size. Tools like Google Fonts Subsetting allow developers to include only the necessary characters, improving load times.
Efficient Font Formats: Using highly compressed font formats such as woff2 ensures faster loading while maintaining quality. Since woff2 is supported by most modern browsers, it is the preferred format for web fonts.
Preloading Critical Fonts: To prevent layout shifts caused by delayed font loading, critical fonts should be preloaded. This ensures they are available as soon as the page renders. The following example demonstrates how to preload a font file:
```
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
```
System Font Fallbacks: To minimise reliance on external font files, developers should define system fonts as fallback options. Using widely available fonts like Arial or Helvetica helps maintain readability while reducing additional HTTP requests.

Conclusion

In a world where more than 53% of users abandon sites taking over 3 seconds to load, asset optimisation is not optional—it’s essential. By optimising images, fonts, and multimedia, developers can significantly improve page load times, enhance user experience, and boost SEO rankings.

Moreover, prioritising asset optimisation not only benefits end users by providing a smoother browsing experience but also reduces bandwidth consumption and server load, making websites more scalable and cost-effective.

Web Performance Optimisation Techniques IV - Asset Optimisation