웹 성능이 중요한 이유
웹사이트의 로딩 속도는 사용자 경험(UX), 검색엔진최적화(SEO), 전환율(Conversion Rate)에 큰 영향을 미칩니다.
- UX : 3초 이상 소요시 사용자의 50%사 이탈함
- SEO : Google은 속도가 빠른 웹사이트를 더 높은 순위에 배치함
- 전환율 : 로딩 시간이 1초 증가할 때마다 전환율이 7% 감소함
웹 성능을 최적화하려면 불필요한 리소스를 줄이고 효율적인 코드와 설정을 적용해야합니다.
자, 이제 체크리스트를 따라가며 최적화하는 방법을 살펴볼까요?
웹 성능 최적화 체크리스트
1️⃣ 이미지 최적화 : 페이지 속도를 높이는 핵심 요소
웹 페이지의 가장 큰 용량을 차지하는 요소 중 하나가 이미지입니다.
최적화하지 않으면 로딩 속도가 느려지고 사용자 경험이 좋지 않아집니다.
- 차세대 이미지 포맷(WEBP, AVIF) 사용
- 기존 PNG, JPEG 보다 용량이 25~50% 작기 때문
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="이미지 설명">
</picture>
- 반응형 이미지 적용 (srcset)
- 화면 크기에 따라 다른 해상도의 이미지를 불러와 성능 최적화
<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="반응형 이미지">
- Lazy Loading 적용 (loading="lazy")
- 화면에 보이지 않는 이미지는 미리 로딩하지 않고 필요할 때 로딩되도록 설정
<img src="image.jpg" loading="lazy" alt="지연 로딩 이미지">2️⃣ CSS 및 JavaScript 최적화 : 불필요한 코드 최소화
- CSS 및 JavaScript 파일 압축(Minify)하기
- 불필요한 공백과 주석, 줄 바꿈을 제거하여 파일 크기 최소화
- UglifyJS, Terser, CSSNamo 와 같은 도구 사용
- 필요한 파일만 로드하기
- async 또는 defer 속성을 사용해 JavaScript 비동기 로딩
<script src="script.js" defer></script>- 필요없는 CSS 제거 (PurgeCSS 활용)
- 사용되지 않는 CSS를 제거하여 스타일 파일 크기 축소
3️⃣ 폰트 최적화 : 렌더링 속도 개선
- 시스템 폰트 사용 (웹 폰트 최소화)
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen;
}
- font-display: swap; 속성 추가해 글꼴 지연 로딩 방지
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap;
}4️⃣ 서버 및 네트워크 최적화
- 브라우저 캐싱 활성화 (Cahe-Control)
- CDN(Content Delivery Network) 사용
- Gzip/Brotli 압축 적용하여 전송 데이터 최소화