HTML, CSS

⚡️ Tối Ưu Performance Khi Deploy Website Dùng Tailwind CSS

Posted on by Đỗ Thành
26
Th6
View: 23

Dưới đây là phần tiếp theo trong chuỗi thực hành Tailwind CSS nâng cao, tập trung vào một chủ đề cực kỳ quan trọng khi đưa sản phẩm ra môi trường thực tế: Tối ưu hiệu suất (performance) khi deploy website dùng Tailwind CSS.

🎯 Mục tiêu

  • Giảm kích thước file CSS build xuống mức tối thiểu
  • Cải thiện tốc độ tải trang (First Load Time)
  • Tối ưu SEO, trải nghiệm người dùng trên mobile
  • Áp dụng chiến lược lazy load, preload, minify, caching…

1. 🧹 Sử dụng Purge CSS (tích hợp sẵn trong Tailwind)

Tailwind sử dụng Just-in-Time (JIT) engine để chỉ build ra những class bạn thực sự sử dụng.
Tuy nhiên, bạn vẫn cần xác định vùng content rõ ràng để tránh giữ lại class thừa.

✅ Cấu hình tailwind.config.js:

module.exports = {
  content: [
    './index.html',
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

✅ Nhờ đó, file build ra sẽ chỉ chứa class thực tế xuất hiện trong dự án.

2. 🧱 Tách file CSS / JS hợp lý

  • Đối với các framework như React, Vue, Nuxt: chia component theo module
  • Tránh import toàn bộ thư viện lớn vào mỗi trang
  • Sử dụng code splitting (tự động nếu dùng Vite, Webpack hoặc Nuxt)

3. 📦 Minify và Gzip CSS/JS

Các công cụ như Vite, Next.js, Nuxt, hoặc Webpack đều hỗ trợ minify khi build production.

Với Vite:

npm run build

Kết quả: CSS được minify, tree-shaking, giảm còn vài KB.

👉 Bạn có thể kiểm tra file CSS đã build ở dist/assets/index-xxx.css

4. 🚀 Lazy load và preload tài nguyên

HTML preload:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Lazy load hình ảnh:

<img src="banner.jpg" loading="lazy" alt="Ảnh banner" />

5. 🌐 Sử dụng CDN nếu cần

  • Nếu bạn không cần custom Tailwind và chỉ dùng bản mặc định, có thể dùng CDN:
<script src="https://cdn.tailwindcss.com"></script>
  • Với các ảnh, font, script tĩnh → upload lên Cloudflare, Netlify, Vercel CDN để tối ưu tải

6. 🌓 Tối ưu Dark Mode

Tailwind mặc định sử dụng "media" hoặc "class" để bật dark mode.

👉 Với "class":

darkMode: 'class'

Gợi ý:

  • Chỉ bật dark mode khi người dùng chọn
  • Lưu trạng thái dark mode vào localStorage để không load lại nhiều lần

7. 📊 Dùng công cụ đo hiệu suất

Công cụMục đích
Lighthouse (Chrome DevTools)Đo performance, SEO, accessibility
PageSpeed InsightsKiểm tra tốc độ load trang thật sự
WebPageTest.orgPhân tích tải tài nguyên chi tiết
BundlephobiaXem kích thước thư viện npm

8. 📦 Caching + Versioning

  • Đặt hash trong tên file CSS/JS để browser cache hiệu quả:
<link rel="stylesheet" href="/dist/app.abcd1234.css" />
  • Với Vite/Next/Nuxt: tự động tạo hash mỗi lần build

9. 🧩 Tối ưu component tái sử dụng

  • Sử dụng @apply trong CSS để gom nhóm class → tránh trùng lặp
  • Tránh inline class quá dài trong component
  • Kết hợp với các UI library nhẹ như ShadCN UI, DaisyUI, Flowbite

🔧 Nếu dùng hosting: Vercel / Netlify

  • Hỗ trợ build + deploy + cache tự động
  • Tích hợp CI/CD với GitHub/GitLab
  • Miễn phí cho dự án nhỏ
  • Vercel tối ưu tốt cho React (Next.js), Netlify tối ưu cho Vue/Nuxt

✅ Kết luận

Khi tối ưu hiệu suất khi deploy Tailwind CSS, bạn nên:

  • Giảm kích thước file CSS qua content purge & minify
  • Lazy load hình ảnh và JS không cần thiết
  • Tối ưu dark mode, preload, CDN
  • Sử dụng công cụ đo hiệu suất thường xuyên
Đỗ Thành