Optimizing Web Assets, Part 1, General Ideas

The modern web offers so many possibilities for developers to make the user’s journey more pleasant, responsive and rich. Developers can achieve that using a number of technologies in HTML, CSS and JavaScript, but there is “no silver bullet” to make that happen — you must work hard and deliver.

There are three primary optimization techniques for assets on your website:

  1. Minify
  2. Compress
  3. Convert
  4. Delay

Minify

This usually applies to JavaScript and CSS files, which are minified during the build stage using a bundler like Vite or webpack. Developer can also minify HTML by getting rid of extra whitespaces, newline symbols etc., if the content is server-side rendered (SSR). Developers should at least try to minify their SVGs, although it can be tricky to work with them later on.

It is also possible to minify font files.

Compress

Developers can compress their files, further reducing their sizes. Most popular compression formats for plain text are Brotli and gzip, and they use different compression algorithms.

Brotli is more suitable for compressing JavaScript and CSS, although one should (if possible) try both formats for a file, ensuring the best compression rate is applied.

Some file formats are already compressed. Those include JPEG, PNG, WebP, WebM, GIF, FLAC. But not all images, videos, and audio files are compressed; there are uncompressed formats like BMP or WAV, which you can safely compress with, for example, gzip.

Although media files are almost always compressed, it is possible to compress them further in the same format. Some formats, like WebP, support lossless compression, which can be safely used, while other formats, like JPEG, do not, in which case you have the option to compress the file to a satisfactory extent.

Convert

Converting files from one format to another is a powerful technique. Developers usually convert media files because new formats are better: they have reduced file sizes, can be decoded more quickly, and use fewer resources. For example, my favourite conversions are from PNG to WebP, and from TTF to WOFF2, because they save quite a lot of network traffic.

Not every new format is supported in every browser. Using new formats can add more complexity to development and support — that is, if you care about those 2-5% of web users.

Delay

The simplest way to optimize loading of an asset is to avoid downloading it in the first place. Sometimes assets are not needed until e.g. user scrolls to specific part of a page, takes an action, or uses a specific language. In those cases it can be better to delay loading of a resource, especially if it is not something that requires instant feedback, in which case assets can be preloaded after a specific event, such as a mouseover or scrolling to a specific part of a page.

Putting it All Together

Developers can combine those techniques, and usually there are two ways of doing so:

  1. Developer files (JavaScript, CSS, HTML): minify and compress
  2. Media files: convert and compress You don’t usually need to do this manually: there are various supporting tools to help a developer out.

When assets are ready for production, developer must choose how to deliver them. At this step, it is possible to delay loading of a resource.

Optimizing web assets is a crucial skill for a web developer. It doesn’t only affect users but can also reduce the company’s expenses, free up resources, and ensure everyone gets what they want.

Side Notes

One can also “minify” images by reducing the number of colors used, getting rid of transparency, antialiasing, and so on. This is usually not applicable, perhaps because it is so limiting for an artist or just impossible. That is why you, the developer, must take responsibility and make the best out of every asset.

It is possible to minify font files. Using tools like FontForge, one can remove unused glyphs. For example, if you use a specific monospaced font only for numbers, you can leave glyphs just for them and some accompanying symbols like ., ,, etc.

Not every media file should be compressed. Sometimes it is best to leave it as-is and maybe cache it somehow.

Be careful when converting media files, especially when converting videos. Some formats may be less in size but more demanding for codecs to decompress, which may worsen the user experience.

Edits

$ cd ..