Why you don't have to worry about file size of your code

I often see people on programming forums argue that certain coding techniques or naming conventions increase your code's file size. Larger files mean longer downloads and a slower website.

This article explains why you should focus on writing readable code instead of worrying about the size of the front-end code your write.

Why the file size of your code doesn't matter

It's true that focussing on readability can sometimes lead to longer code that needs to be downloaded when a user loads a page on your website.

However, the JavaScript you write yourself usually only is a fraction of the overall JavaScript code required by your application.

Take this example from a single-page app I worked on recently. The chart shows the relative gzipped file size of different parts of the JavaScript code.

You can see that the application's JS code is only a quarter of the total file size. The biggest chunk comes from libraries (in this example it's mostly Angular and jQuery).

You should focus on writing maintainable code because the file size of your code isn't that significant overall.

Why the file size of your code really doesn't matter

The previous chart excludes one item that was unique to this particular project. In reality, the JavaScript file also included a bunch of SVG icons that are required for the application.

Including the SVGs, this is the correct chart:

Now only 10% of the overall JavaScript download is part of the application code.

A single large image will be a lot bigger than your application code.

Embedding SVGs in your JS code probably isn't something you do very often. However, if you have a single large image on your website it's probably a lot bigger than all of your application code combined.

If you think download size may be a concern run your website through Google PageSpeed and focus on the biggest contributors to page download size.

There are also plenty of techniques that can reduce the size of your JavaScript code without impacting maintainability. For example, only load the code that's required for the current page and avoid using global variables that can't be minified.

However, making your code harder to read because you think it's too verbose is unlikely to be a good idea.