Nick Bull Blog


Nick Bull Blog

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

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

Nick's photo
·Nov 6, 2020·

2 min read

Featured on Hashnode

Here's how things went down:

  1. I finished developing a CSS game (Flex Box Adventure) using Gatsby.
  2. Deployed it to Netlify.
  3. Shared it with folks on Twitter and said, “Share your feedback with me.”
  4. Went to sleep.
  5. Woke up.
  6. Opened Twitter DMs.
  7. Saw this message: 1_tweet.png

  8. Surprised because how two small static HTML web pages can slow down the website's loading speed.

  9. Decided to check it out.
  10. Opened Google Chrome.
  11. Typed the website url in the search bar.
  12. Pressed “Enter.”
  13. Waited for the website to load.
  14. Opened Google Chrome dev tools.
  15. Clicked on the “Network” tab.
  16. Found that my web page weighs 156KB: 2.png

  17. Surprised X2

  18. Opened the source code of the web page.
  19. Found 88.000 lines of CSS code: 3.png

  20. Surprised X3

  21. Asked myself, “How did I place eighty-eight thousand lines of CSS in my code?”
  22. Remembered that the only styles I imported into the App.tsx file (besides my 300 lines index.css) were Tailwind CSS.
  23. Googled, “Tailwind CSS in production.”
  24. Clicked on the first link.
  25. Found out that I forgot about purging CSS. 4.png

  26. Opened tailwind.config.js

  27. Added Tailwind purge rules: 5.png

  28. Re-deployed the website to Netlify.

  29. Opened Google Chrome dev tools once again.
  30. Found that my website weights ≈18KB now: 6.png

  31. Surprised X4

  32. Felt happy.

Lessons Learned By Me

What have I learned from this situation:

  1. Users are the best testers.
  2. 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.

And also, 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 📌

Share this