Tailwind CSS 성능 최적화

 

PurgeCSS를 활용한 불필요한 CSS 제거

Tailwind는 수천 개의 유틸리티 클래스를 제공하지만, 실제 프로젝트에서 사용하는 클래스는 극히 일부에 불과합니다.

따라서 사용하지 않는 CSS를 제거하여 번들 크기를 줄이는 것이 중요합니다.

1. PurgeCSS 설정하기

Tailwind는 자체적으로 PurgeCSS를 내장하고 있으며, tailwind.config.js 파일에서 간단하게 설정할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

• 이렇게 설정하면 지정한 경로에서 실제로 사용된 클래스만 CSS에 포함되고, 사용되지 않은 스타일은 제거됩니다.

2. PurgeCSS 적용 전후 비교

적용 전 (개발 환경)

.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: #ffffff; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
...

적용 후 (프로덕션 빌드)

.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: #ffffff; }

• 사용되지 않는 스타일이 제거되어 파일 크기가 크게 줄어드는 것을 확인할 수 있습니다.

---

JIT(Just-In-Time) 모드 활성화로 빌드 속도 향상

Tailwind는 기존 정적 빌드 방식에서 JIT 모드를 도입하여 성능을 개선했습니다.

JIT 모드를 활성화하면 빌드 속도가 빨라지고, 사용한 유틸리티 클래스만 즉시 생성됩니다.

1. JIT 모드 활성화

Tailwind 3.0 이상에서는 JIT 모드가 기본적으로 활성화되어 있습니다.

하지만 Tailwind 2.x 버전에서는 mode: 'jit' 설정이 필요합니다.

module.exports = {
  mode: 'jit',
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

• JIT 모드를 사용하면 개발 중에도 즉시 반영되며, 사용된 클래스만 빌드되어 불필요한 CSS가 포함되지 않습니다.

 

2. JIT 모드의 장점

• 사용한 스타일만 즉시 생성됨 → 빌드 속도 향상
• CSS 파일 크기 감소 → 빠른 로딩
• 다양한 유틸리티 클래스를 동적으로 사용할 수 있음

---

또다른 웹 성능 최적화 전략

1. 이미지 최적화

웹 성능을 높이기 위해 최적화된 이미지를 사용해야 합니다.

• next/image (Next.js 사용 시): 자동으로 최적화된 이미지를 제공
• WebP, AVIF 등의 차세대 이미지 포맷 사용
• 크기가 큰 이미지는 Lazy Loading 적용

 

2. Lazy Loading 적용

Lazy Loading을 활용하면 페이지 로딩 시 불필요한 리소스를 줄일 수 있습니다.

이미지 Lazy Loading 예제 (React + Tailwind)

const OptimizedImage = () => {
  return (
    <img
      className="w-full h-auto rounded-lg"
      src="https://via.placeholder.com/800x600"
      loading="lazy"
      alt="Optimized"
    />
  );
};

export default OptimizedImage;

 

3 코드 스플리팅과 최적화

• CSS 코드 스플리팅: 사용하지 않는 CSS를 제거하여 최소한의 CSS만 로드
• 동적 로딩: 페이지별로 필요한 코드만 로드하여 초기 로딩 시간을 단축
• CDN 활용: Tailwind의 CDN을 사용하면 빠른 로딩이 가능