Picovert

프론트엔드 성능 최적화 체크리스트 2026

2026-04-2810분 분량

성능은 하나의 것이 아닙니다 — 수십 가지 작은 결정의 합입니다. 이 체크리스트는 이미지, 폰트, JavaScript, CSS, 캐싱, 렌더링 등 6가지 영역에서 30가지 항목을 다룹니다. 각 항목은 일반적인 영향도 순으로 정렬되어 있습니다. 상위 항목부터 해결하세요.

이미지 (가장 높은 영향)

  • 모든 이미지를 WebP 또는 AVIF로 변환하세요. WebP는 JPEG를 25~35%, PNG를 50~70% 줄입니다. 정적 에셋에는 Picovert 변환 도구를 사용하세요.
  • LCP 이미지에 절대 레이지 로딩을 쓰지 마세요. 대신 fetchpriority="high"와 <head>의 <link rel='preload'>를 추가하세요.
  • 모든 img에 항상 width와 height를 지정하세요. 예약 공간 없이 이미지가 로드될 때 발생하는 CLS를 방지합니다.
  • 최소 3가지 크기의 srcset을 사용하세요. 320w, 768w, 1200w로 모바일, 태블릿, 데스크톱을 커버합니다. 모바일 페이로드를 50~60% 줄입니다.
  • 화면 아래의 이미지는 레이지 로딩하세요. loading="lazy"는 이제 모든 모던 브라우저의 기본 기능입니다. JavaScript가 필요 없습니다.
  • GIF 애니메이션을 MP4로 변환하세요. MP4는 10~20배 작고 하드웨어 디코딩을 사용합니다. 여기서 변환.

폰트

  • WOFF2만 사용하세요. WOFF2는 WOFF보다 30% 더 좋은 압축을 제공하며 브라우저 지원이 98%입니다.
  • 실제로 사용하는 문자로 폰트를 서브셋하세요. 전체 라틴 폰트는 80KB입니다. 언어별 문자셋으로 서브셋: 15~20KB.
  • 중요한 폰트를 프리로드하세요. <link rel="preload" as="font" crossorigin>은 두 번째 라운드트립의 발견 지연을 제거합니다.
  • 본문 폰트에는 font-display: swap, 장식 폰트에는 optional을 설정하세요. 로드 중 보이지 않는 텍스트(FOIT)를 방지하면서 큰 레이아웃 이동도 피합니다.
  • Google Fonts 대신 폰트를 자체 호스팅하세요. fonts.googleapis.com으로의 DNS 조회와 연결을 없앱니다.

JavaScript

  • 라우트 수준에서 코드를 분리하세요. 각 라우트는 필요한 JavaScript만 로드해야 합니다. Next.js는 페이지에 대해 자동으로 이것을 수행합니다.
  • 사용하지 않는 의존성을 감사하고 제거하세요. 새 npm 패키지를 추가하기 전에 npx bundle-phobia [패키지]를 실행하세요.
  • 무거운 컴포넌트는 동적 임포트하세요. 리치 텍스트 에디터, 차트 라이브러리, PDF 렌더러 — 필요할 때만 로드하세요.
  • moment.js를 date-fns 또는 dayjs로 교체하세요. moment.js는 67KB; date-fns는 대부분의 사용 사례에서 트리쉐이킹 가능하여 5KB 미만입니다.
  • 모든 비중요 서드파티 스크립트를 지연 로드하세요. 분석, 히트맵, 챗봇 —load 이벤트가 발생한 후 로드하세요.

CSS

  • above-the-fold 콘텐츠의 중요 CSS를 인라인하세요. 브라우저는 외부 스타일시트를 기다리지 않고 보이는 부분을 렌더링할 수 있습니다.
  • 사용하지 않는 CSS를 제거하세요. PurgeCSS나 Tailwind의 JIT를 사용하여 페이지가 실제로 사용하는 것만 전송하세요.
  • 독립 컴포넌트에 contain: layout을 사용하세요. CSS 격리는 스타일 재계산이 트리 전체로 전파되는 것을 방지합니다.
  • CSS 애니메이션을 JavaScript 애니메이션보다 선호하세요. CSS 애니메이션은 컴포지터 스레드에서 실행되어 메인 스레드를 차단하지 않습니다.

캐싱

  • 정적 에셋에 장기 캐시 헤더를 설정하세요. 해시된 파일 이름(JS, CSS, 이미지)에는 Cache-Control: max-age=31536000, immutable. immutable은 브라우저에 재검증하지 않도록 지시합니다.
  • HTML에 stale-while-revalidate를 활성화하세요. 배경에서 업데이트를 가져오는 동안 즉시 캐시된 HTML을 제공합니다.
  • 사용자와 가까운 엣지 노드가 있는 CDN에 배포하세요. 대부분의 글로벌 트래픽에서 왕복 지연을 150ms에서 10ms 미만으로 줄입니다.

렌더링

  • 데이터 무거운 페이지에 Next.js App Router RSC를 사용하세요. 서버 컴포넌트는 자체 JavaScript를 클라이언트에 전송하지 않고 HTML을 스트리밍합니다.
  • Suspense 경계로 HTML을 스트리밍하세요. 사용자는 가장 느린 데이터 의존성을 기다리는 대신 점진적으로 콘텐츠를 봅니다.
  • content-visibility: auto를 화면 밖 섹션에 사용하세요. 브라우저는 보이지 않는 콘텐츠의 레이아웃과 페인트를 건너뛰어, 긴 페이지에서 렌더링 시간을 40~60% 줄입니다.
  • 추측하지 말고 측정하세요. 각 변경 전후에 Lighthouse를 실행하고, Search Console의 CrUX 데이터를 확인하고, 자체 RUM 데이터와 함께 web-vitals 라이브러리를 사용하세요.