The Battle for Kilobytes in JavaScript

Squeezing out every little byte in web apps for speed and the greater good

Thomas Kluiters

Follow

Sep 2, 2020 · 4 min read

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.

Enough talk! Let’s build an example project! Let’s install the preact-cli to help us create our first project:

npm i -g preact-cli

With Preact CLI installed, let’s create a new TypeScript project called my-app:

preact create typescript my-app

We can now run our app in the background by entering the following command in our terminal:

npm run dev

Our next step will be acquiring Bulma and installing it:

npm install bulma node-sass sass-loader --save-dev

Normally, you would want to save these kinds of dependencies as an ordinary “dependency,” as you’d just include the entire CSS file. However, we’re going to be using a CSS loader to only load the CSS that we actually need for our application, slimming down our app as much as we can!

We will also need a Sass loader to be able to import parts of the Bulma library.

Let’s create a file under the src/style directory, call it index.scss, and import the necessary CSS to add a Bulma-themed button to the front page of our web application:

Also, make sure to change the first line of index.js under src to import “./style/index.scss”.

After looking over the documentation on buttons for Bulma, it seems like we’ll have to create a simple <button> element and assign it to the button class. Sounds easy enough! Let’s change our code in src/routes/home/index.tsx to:

Switch back to your browser and you should be able to see a beautiful button appearing!

Time to put our application to the test. Let’s run the following command to truly squeeze out the smallest blob of code we can think of:

preact build --no-sw --no-ssr --no-esm
serve -s build

Let’s open up Lighthouse and see the difference between an application that has exactly the same code (replacing preact-router with react-router-dom ):

Neat! It might not seem like much, but a 50kb difference could mean quite a bit on very slow connections or phones.

I hope you were able to learn something about CSS-only frameworks, Preact, and creating smaller web applications while still enjoying the experience of component libraries such as Preact. As always, feel free to reach out if you have any questions!