웹 성능이 중요한 이유
Google의 연구에 따르면 페이지 로딩 시간이 1초에서 3초로 늘어나면 이탈률이 32% 증가합니다. 5초가 되면 90%까지 치솟습니다. 또한 Google은 Core Web Vitals를 검색 순위 요소로 사용합니다.
Core Web Vitals 이해하기
LCP (Largest Contentful Paint) — 가장 큰 콘텐츠 요소가 화면에 표시되는 시간. 2.5초 이내가 좋음.
FID / INP — 사용자의 첫 인터랙션에서 브라우저가 반응하기까지의 시간. 200ms 이내가 좋음.
CLS (Cumulative Layout Shift) — 페이지 로딩 중 레이아웃이 얼마나 움직이는지. 0.1 이하가 좋음.
이미지 최적화
이미지는 대부분의 웹사이트에서 가장 큰 용량을 차지합니다. WebP 포맷은 JPEG 대비 25~35% 더 작고, AVIF는 WebP보다 20% 더 작습니다. SVG는 아이콘과 로고에 적합합니다. 반응형 이미지를 위해 srcset과 sizes 속성을 활용하고, loading="lazy"로 화면 밖 이미지를 지연 로드하세요.
CSS 최적화
Critical CSS — 첫 화면에 필요한 CSS만 인라인으로 넣고, 나머지는 비동기 로드합니다. PurgeCSS나 Tailwind의 JIT 모드로 미사용 CSS를 제거할 수 있습니다. 애니메이션 요소에 will-change: transform을 선언하면 GPU 가속을 활용할 수 있습니다.
JavaScript 최적화
코드 스플리팅 — 사용자가 필요로 하는 코드만 로드합니다. React의 lazy()나 Next.js의 dynamic import를 활용하세요.
Tree Shaking — 사용하지 않는 코드를 번들에서 자동으로 제거합니다. ES Modules를 사용하면 빌드 도구가 자동 처리합니다.
디바운싱과 쓰로틀링 — 스크롤, 리사이즈 같은 이벤트의 실행 빈도를 제한하여 성능을 보호합니다.
웹폰트 최적화
웹폰트는 CLS와 LCP에 직접적인 영향을 미칩니다. font-display: swap으로 폰트 로딩 전 시스템 폰트를 먼저 표시하고, link rel="preload"로 중요한 폰트를 미리 로드하세요. 한글 폰트는 서브셋을 사용하면 파일 크기를 대폭 줄일 수 있습니다.
측정 도구
- Chrome DevTools > Performance: 런타임 성능 분석
- Chrome DevTools > Lighthouse: 종합 성능 점수와 개선 제안
- PageSpeed Insights: Google의 공식 성능 측정 도구
- WebPageTest: 다양한 네트워크 환경에서의 성능 테스트
핵심 체크리스트
- 이미지: WebP 포맷 + lazy loading + 반응형 srcset
- CSS: Critical CSS 인라인 + 미사용 CSS 제거
- JS: 코드 스플리팅 + Tree Shaking
- 폰트: font-display: swap + preload + 서브셋
- 측정: Lighthouse 점수 90+ 유지
성능 최적화를 배웠다면, Compit 챌린지에서 가벼운 CSS 작성 연습을 해보세요!