HTML optimization
One of my favorite programming languages is HTML. I’ve always found it interesting because it is so flexible. You are not bound to follow specific patterns; only your imagination limits you from what you can do. You take what is in your head and build a skeleton of it. With HTML, you can quickly build a hero section, for example. First, you need a wrapper to go around the whole section. Next, you need an inner wrapper around your content and graphics, and, voila, you have built the skeleton of a hero section in only two steps. Next, you need to add the text and the image, but I will let that be up to you. The exact section could also have been built in a much more complicated manner by adding more wrappers, but I always try to make things as simple as possible.
The freedom in HTML makes it such an excellent programming language, and some people call it forgiving because you don’t get punished for making mistakes. I guess it’s kind of similar to having a stack of colored building blocks. You know, those big ones we used to play with as kids. HTML is like the patient and sweet caretaker that allows you to first put a blue block, then a green, and then a red. As long as you stack some blocks on top of each other, you have done it correctly. There are, of course, rules that should be followed.
If you don’t follow them, your organic SEO result could get punished, but I am only trying to point out that you won’t get punished the same way as other programming languages. JavaScript, for example, would have thrown you an error as soon as you tried to stray from the pattern. So if JavaScript only allowed you to put a red on top of a blue, you will be corrected once you try adding a green. Freedom is good, but with freedom comes responsibility, and like any other programming language, you should optimize your code. In this lesson, we will be talking about HTML optimization, minimization, descriptive code, inline styles, and much more.
Less is more
The first concept that we are going to talk about is called “Less is more.” If we go back a few years in web development, we can see that creating a wrapper for almost everything was popular. A simple hero element could contain the main wrapper, an inner wrapper, another wrapper that controls the background image, another wrapper to manage potential shadowing, another one to control various padding and margin settings, and yet another one for the content. In Node JS, we have something called callback-hell, and I think this example could be categorized as the same, just under a different name: “Markup-hell.” Callback-hell is where you layer server-side functions. So, every time a function runs, it will check if an error has happened. If no error occurs, it will go on to the following function. Once you have many layers of functions with error handling, you can see that it becomes layer-on layer, which is callback hell.
Markup-hell is my definition of HTML with unnecessarily excessive code. It is too much to add a div wrapper for every setting. Instead, adding descriptive classes to control the settings would be better. Classes would minimize the amount of code you write, making the code much easier to read in the future. I’ve tried many times to come back to some code I wrote a year back, and every time I look at it, I think to myself, “What was I thinking?”. Maybe you know the feeling? When you write too much code, you over-complicate your product, making it harder for you or other developers in the future to interpret and understand what you made. Another angle is that less code renders faster.
For each character you write, the device has to interpret more code, which only takes longer and requires more resources. You will not notice a single character because all of your devices are so fast. But let’s say you have an extremely long HTML page full of tables, divs, and spans. Compared to a tiny HTML page, you will see a significant difference in the rendering time. This is something you can test yourself. Try to create an HTML page and add hundreds of lines of HTML. Now try to time how long it takes to render in the web browser. Once you have the time written down, you can try with a small HTML file only containing a single paragraph. Once you render the small HTML file, you will see a difference in the amount of time it takes to finish rendering.
To make it a little simpler to understand the benefits of “Less is more,” then here is a list of some benefits:
