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.
In the End…
If you like this article share it with your colleges or friends and check me on Twitter.
📌 Every week, I send out a “3-2-1” newsletter with 3 tech news, 2 articles, and 1 advice for you. Join my 3-2-1 newsletter here.
Top comments (5)
nice, thanks
thanks for sharing
tailwind purge, will be remembered ;-) ty for sharing this.
i member
This is the kind of story I am here for. Thanks for sharing.
TBH you should never ever use tailwind in production without purging.
I'm glad I've made this mistake early...