Lesson 15 - Sustainable Web Design In 20 Lessons

In this lesson, we are going to talk about JavaScript optimization. It is something that, for many people, is very familiar, but it can also be very confusing. If you search on Google to find the best methods for optimizing JavaScript, it won’t take long to find an ocean of articles giving you the best practices to use. So finding the information you need isn’t problematic. But what is the reason behind many not optimizing their JavaScript? The programming language is very popular and is the go-to language developers use to make functions for the front end. It has always been like this. I don’t remember when JavaScript wasn’t the most prioritized front-end programming language.

JavaScript is also one of the first programming languages people choose to learn as web developers, as you probably remember from when you started. Initially, you focused solely on making things work and not optimizing. When I started getting better at it, I became slightly obsessed and wanted everything to be JavaScript. Luckily I had developers around me with great experience that could stop me from building bad habits. But many don’t have experienced web developers to help them daily, so they work with a different attitude; “If it’s working, don’t touch it.”

I remember that after spending half a day building the HTML and CSS structure, I would look forward to attaching JavaScript actions that would make stuff happen. The functions I am talking about are simple: you click the hamburger button, and then a mobile menu comes out, or when you automatically update the current year in your copyright line.

I have always been told that HTML is the skeleton of your website. CSS is the looks, and JavaScript is the brain. Many look at it that way, which is probably one reason why it became so popular. JavaScript is used for many things and not just the internet. The SpaceX Crew Dragon flight uses JavaScript in the main cockpit. It is a massive step for JavaScript to be used for space traveling because until now, it has only been HAL/S (High order assembly language/shuttle), C, and C++.

JavaScript is a fantastic programming language and quite forgiving, if I should say so. It comes with its upsides and also its downsides. Some of the upsides are that it is pretty easy to learn, and you don’t have to write perfect code. I mean, you can get away with passing a string where it should have been a number and vice versa. It has always been like that, so debugging bigger JavaScript systems can be quite an adventure. It was first when TypeScript was released that it became easier to spot bugs caused by type errors. Some downsides to JavaScript are that it can become relatively slow and resource-heavy when not optimized. In most cases, it won’t be something you feel in the web browser, but it makes a significant difference when dealing with big JavaScript web applications.

When you aren’t restricted to following good programming techniques, you can get away with stuff that shouldn’t have been possible. So why do we optimize JavaScript? As mentioned, if JavaScript isn’t optimized, it can become quite slow and resource-heavy. That is not something you want. You want your code to be both light and fast. When code is optimized, it will pollute less, and it will help make your website more sustainable. The more sustainable a website is, the more users you will have and the less it will pollute.