I often find myself browsing the internet on my older phone, waiting endlessly for applications to load only to click on the wrong button because some other HTML element rendered itself slightly later than the button. Pushing the button down revealed some other link.

Why can’t web pages be… lighter?

There are many ways in which you can speed up page render speeds. One particular way I’d like to focus on today is reducing the amount of stuff we send to our poor visitors.

While size does matter, I still want to use a cutting-edge component library. I have recently been favoring Preact over other component libraries.

The nice advantage of Preact is that it is tiny! When comparing React’s 109kb (34.8 kb gzipped) size to Preact’s 3kb size, it’s quite obvious that Preact is an attractive option.

Preact does come with the drawback that it does not offer as many features as React does and it takes a little while to get used to, but I have found this not a reason to be deterred.

Now that we’ve settled on our component library, I’d like to introduce you to a concept that has recently been gaining a bit more traction: CSS-only frameworks. The great thing about CSS-only frameworks is that they’re extremely lightweight, and when built well, they allow you to easily customize the CSS framework to tailor to your specific needs.

My favorite CSS framework by far is Bulma. It is lightweight, well documented, and infinitely customizable.

Lastly, I’d like to mention that I’m a huge fan of TypeScript and will be using TypeScript in this article.

#javascript #preact #css #react #software-engineering