An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
One Mistake I Made With Tailwind CSS That Costed 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.
- Waked up.
- Opened Twitter DMs.
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.
Surprised X2
Opened the source code of the web page.
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.
Opened tailwind.config.js
Re-deployed the website to Netlify.
Opened Google Chrome dev tools once again.
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.
Original Link: https://dev.to/nickbulljs/one-mistake-i-made-with-tailwind-css-that-costed-me-140kb-3pnn
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To