0x00 Blog

~~~ Home ~~ Resumé ~~ Projects ~~ About ~~~

Minimalism on the web, more than just a design

15 Mar 2020

Often times when you think about minimalism on the web the first things that come to mind are black letters with white background and a few blue/purple links. But there are two aspects to consider when we talk about minimalism on the web, on one side there is the minimalist design which can range from websites like I previously described to beautiful websites carefully crafted like the one below by Panache.

Minimalist web example

And on the other side there is minimalist code/components/features (I program in HTML). Websites that will only add what is essentially needed such as this blog, I only require text and space to write about my thoughts and opinions.

This is where I want to focus, minimalist code.

Let’s take a look at Bootstrap v4.4.1, a CSS framework that simplifies the development of a website by defining colors, typography, layouts and different components such as forms, alerts, buttons, etc. The bootstrap.min.css file which contains all this rules weights 155.8 KiB. Usually a server will compress this file before sending it to you, which ends up at 23.6 KiB transferred when you make the request and gets uncompressed on your side. One compressed CSS file alone weights more than this webpage, including HTML, CSS and image!

According to HTTP archive the median weight of a website is around 1957.8 KB. Most websites will not only use a CSS framework, most times they’ll include different JavaScript frameworks and libraries, load external fonts and multiple images. All of this little components start adding up making your website heavier and depending on the connection it will load slower and on some devices it could slow it down and difficult to interact because of the CPU usage.

Performance is an important aspect of a website (Website Response Times) which is why just a few more KiB will actually make a difference, depending on the content, it could take time to render images, load and execute JavaScript, etc.

In this sense when you develop a website you should always take a minimalist approach. Of course you are free to add features to your website such as a comment section, related posts, categories, etc. but some things to consider:

At the end of the day, it’s far easier to just throw some libraries, CSS framework and other components to create a website than focusing on how they work and doing it yourself. But I still believe people who develop websites should consider taking a minimalist approach and spend just a little bit more time on not bloating their website.

PS. This web page, at the moment of publication, is 19.66 KB, still less than bootstrap.min.css file.