One Mistake I Made With Tailwind CSS That Cost Me 140KB

Here's how things went down:

I finished developing a CSS game (Flex Box Adventure) using Gatsby.
Deployed it to Netlify.
Shared it with folks on Twitter and said, “Share your feedback with me.”
Went to sleep.
Woke up.
Opened Twitter DMs.
Saw this message:
Surprised because how two small static HTML web pages can slow down the website's loading speed.
Decided to check it out.
Opened Google Chrome.
Typed the website url in the search bar.
Pressed “Enter.”
Waited for the website to load.
Opened Google Chrome dev tools.
Clicked on the “Network” tab.
Found that my web page weighs 156KB:
Surprised X2
Opened the source code of the web page.
Found 88.000 lines of CSS code:
Surprised X3
Asked myself, “How did I place eighty-eight thousand lines of CSS in my code?”
Remembered that the only styles I imported into the App.tsx file (besides my 300 lines index.css) were Tailwind CSS.
Googled, “Tailwind CSS in production.”
Clicked on the first link.
Found out that I forgot about purging CSS.
Opened tailwind.config.js
Added Tailwind purge rules:
Re-deployed the website to Netlify.
Opened Google Chrome dev tools once again.
Found that my website weights ≈18KB now:
Surprised X4
Felt happy.

Lessons Learned By Me

What have I learned from this situation:

Users are the best testers.
Never go to sleep after sharing your first version of the product.

One Lesson For You

In fact, nothing critical happened. Only one person pointed to the website loading speed, out of 40+ others who gave me feedback about the game.

What does it say to us?

You can spend time building your product until it becomes perfect, then test it for months and, without fear, release it to the public.

Or you can stop wasting your precious time on seeking perfection and unnecessary pre-optimization and release your product as soon as you have built an MVP (minimum viable product)

Just remember one thing, 40 users in one day can improve your product more (giving ideas and feedback) than you, building it alone in a few months.