The Battle for Kilobytes in JavaScript

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

Thomas Kluiters
Sep 2, 2020 · 4 min read
Image for post
Image for post
Photo by Vlad Tchompalov on Unsplash.

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:

Create index.scss under src/style/.

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 ):

Image for post
Image for post
Preact and Bulma: A total size of 23.7kb!
Image for post
Image for post
The same application in React. Still small, but three times as large!

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!

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store