0522 웹 마스터 실전 (6/N): 성능 최적화와 캐싱 전략
✅ 1. 웹 성능 최적화 (Web Performance Optimization)
- 웹 성능 최적화란 사용자가 웹사이트에 접속했을 때 페이지가 더 빠르게 로딩되고, 더 부드럽게 동작하도록 개선하는 작업입니다.
- 웹사이트 속도는 단순히 “빠르면 좋다” 수준이 아니라, 사용자 이탈률, 검색엔진 최적화(SEO), 광고 효율, 전환율에 직접적인 영향을 줍니다.
- 특히 쇼핑몰, 예약 페이지, 이벤트 페이지처럼 사용자가 빠르게 정보를 확인하고 행동해야 하는 사이트에서는 성능 최적화가 매우 중요합니다.
➕ 1-1. 웹 성능이 중요한 이유
-
사용자 경험 개선:
- 페이지가 느리면 사용자는 기다리지 않고 이탈할 가능성이 높습니다.
- 모바일 환경에서는 네트워크 상태가 불안정할 수 있기 때문에 더 민감합니다.
-
SEO에 영향:
- 검색엔진은 사용자가 좋은 경험을 얻을 수 있는 빠른 웹사이트를 선호합니다.
- Google은 페이지 경험과 Core Web Vitals 같은 성능 지표를 검색 품질 판단 요소로 활용합니다.
-
전환율 개선:
- 상품 구매, 상담 신청, 사전예약, 회원가입 같은 행동은 페이지 속도에 영향을 받습니다.
- 사용자가 버튼을 누르기 전까지 기다리는 시간이 길어질수록 전환 가능성은 떨어집니다.
✅ 2. Core Web Vitals
- Core Web Vitals는 Google이 웹페이지의 사용자 경험을 측정하기 위해 제시한 핵심 성능 지표입니다.
- 웹 마스터와 프론트엔드 개발자는 이 지표를 통해 웹사이트가 실제 사용자에게 얼마나 빠르고 안정적으로 느껴지는지 확인할 수 있습니다.
➕ 2-1. LCP (Largest Contentful Paint)
-
LCP는 페이지에서 가장 큰 콘텐츠 요소가 화면에 표시되기까지 걸리는 시간을 의미합니다.
-
보통 메인 배너 이미지, 큰 제목, 대표 이미지 등이 LCP 대상이 됩니다.
-
개선 방법:
- 큰 이미지 용량 줄이기
- WebP, AVIF 같은 최신 이미지 포맷 사용
- 중요한 이미지에 우선 로딩 적용
- 서버 응답 속도 개선
- 불필요한 JavaScript 줄이기
➕ 2-2. INP (Interaction to Next Paint)
-
INP는 사용자가 버튼 클릭, 입력, 탭 등의 상호작용을 했을 때 화면이 얼마나 빠르게 반응하는지를 측정하는 지표입니다.
-
기존 FID보다 더 넓은 범위의 사용자 상호작용 성능을 평가합니다.
-
개선 방법:
- 무거운 JavaScript 작업 줄이기
- 이벤트 핸들러 최적화
- 불필요한 렌더링 방지
- 긴 작업(Long Task)을 쪼개서 처리하기
➕ 2-3. CLS (Cumulative Layout Shift)
-
CLS는 페이지 로딩 중 레이아웃이 갑자기 움직이는 정도를 측정합니다.
-
예를 들어 사용자가 버튼을 누르려는 순간 광고나 이미지가 늦게 로딩되면서 버튼 위치가 밀리는 경우가 있습니다.
-
개선 방법:
- 이미지와 배너 영역에 width, height 또는 aspect-ratio 지정
- 광고 영역 크기를 미리 확보
- 웹폰트 로딩 방식 최적화
- 동적으로 추가되는 콘텐츠의 위치와 크기 관리
✅ 3. 이미지 최적화
- 웹사이트에서 가장 많은 용량을 차지하는 요소는 보통 이미지입니다.
- 특히 쇼핑몰, 휴대폰 판매 사이트, 이벤트 페이지처럼 제품 이미지와 배너가 많은 사이트에서는 이미지 최적화가 매우 중요합니다.
➕ 3-1. 이미지 최적화 방법
-
이미지 용량 압축
- 원본 이미지를 그대로 사용하지 않고, TinyPNG, Squoosh, ImageOptim 같은 도구로 압축합니다.
-
적절한 이미지 크기 사용
- 화면에는 500px로 보이는데 실제 이미지는 3000px인 경우 불필요하게 큰 이미지를 내려받게 됩니다.
- PC, 태블릿, 모바일 화면에 맞는 크기의 이미지를 제공하는 것이 좋습니다.
-
최신 이미지 포맷 사용
- JPG, PNG보다 WebP, AVIF가 더 작은 용량으로 좋은 품질을 제공할 수 있습니다.
- 단, 브라우저 호환성을 고려해야 합니다.
-
Lazy Loading 적용
- 첫 화면에 보이지 않는 이미지는 사용자가 스크롤해서 가까워질 때 로딩합니다.
- HTML에서는
loading="lazy"속성을 사용할 수 있습니다.
<img src="/images/banner.webp" alt="이벤트 배너" loading="lazy" />-
중요 이미지는 Lazy Loading 제외
- 메인 배너처럼 첫 화면에서 바로 보여야 하는 이미지는 lazy loading을 적용하지 않는 것이 좋습니다.
- LCP 대상 이미지가 늦게 로딩되면 성능 점수가 나빠질 수 있습니다.
✅ 4. 캐싱 전략 (Caching Strategy)
- 캐싱이란 한 번 가져온 데이터를 다시 사용할 수 있도록 저장해두는 방식입니다.
- 웹사이트에서는 브라우저, CDN, 서버, API 응답 등 여러 단계에서 캐싱을 사용할 수 있습니다.
- 캐싱을 잘 적용하면 서버 부하를 줄이고, 사용자에게 더 빠르게 콘텐츠를 제공할 수 있습니다.
➕ 4-1. 브라우저 캐싱
-
브라우저 캐싱은 사용자의 브라우저가 이미지, CSS, JavaScript 파일 등을 저장해두었다가 다음 방문 시 다시 다운로드하지 않고 재사용하는 방식입니다.
-
대표적인 HTTP 캐시 헤더:
Cache-Control: public, max-age=31536000, immutable-
의미:
public: 브라우저와 CDN 같은 중간 캐시 서버가 저장 가능max-age=31536000: 1년 동안 캐시 유지immutable: 파일 내용이 바뀌지 않는다고 간주하여 재검증을 줄임
-
단, 이 설정은 파일명이 변경되는 정적 파일에 적합합니다.
-
예를 들어
main.a1b2c3.js처럼 빌드 시 해시가 붙는 파일은 내용이 바뀌면 파일명도 바뀌기 때문에 장기 캐싱에 적합합니다.
➕ 4-2. CDN 캐싱
-
CDN(Content Delivery Network)은 전 세계 여러 지역의 서버에 정적 파일을 복사해두고, 사용자와 가까운 서버에서 파일을 제공하는 방식입니다.
-
이미지, CSS, JavaScript, 동영상, 폰트 같은 정적 리소스 제공에 효과적입니다.
-
장점:
- 사용자와 가까운 위치에서 파일 제공
- 서버 부하 감소
- 트래픽 비용 절감 가능
- 대량 접속 상황에서 안정성 향상
-
예시:
- AWS CloudFront
- Cloudflare CDN
- Fastly
- Akamai
✅ 5. 실무에서 자주 하는 성능 개선 작업
➕ 5-1. JavaScript 번들 최적화
-
React, Vue, Next.js 같은 프론트엔드 프로젝트에서는 JavaScript 번들 크기가 커지면 초기 로딩 속도가 느려질 수 있습니다.
-
개선 방법:
- 사용하지 않는 라이브러리 제거
- 필요한 기능만 import
- 코드 스플리팅 적용
- 페이지별 lazy import 적용
- 번들 분석 도구 사용
const EventPage = React.lazy(() => import("./pages/EventPage"));➕ 5-2. CSS 최적화
-
사용하지 않는 CSS가 많으면 렌더링 성능이 떨어지고 파일 용량도 커집니다.
-
개선 방법:
- 사용하지 않는 CSS 제거
- Tailwind 사용 시 purge/content 설정 확인
- 중복 스타일 정리
- 공통 컴포넌트화
➕ 5-3. API 응답 최적화
-
프론트엔드가 아무리 빨라도 API 응답이 느리면 사용자는 사이트가 느리다고 느낍니다.
-
개선 방법:
- 필요한 데이터만 내려주기
- 불필요한 JOIN 줄이기
- DB 인덱스 설정
- 페이지네이션 적용
- 자주 조회되는 데이터 캐싱
- 느린 쿼리 로그 확인
➕ 5-4. 폰트 최적화
-
웹폰트는 디자인 품질을 높여주지만, 잘못 사용하면 로딩 속도와 CLS에 영향을 줄 수 있습니다.
-
개선 방법:
- 필요한 굵기만 로딩
font-display: swap적용- 폰트 파일 용량 줄이기
- 너무 많은 웹폰트 사용 지양
@font-face {
font-family: "Pretendard";
src: url("/fonts/Pretendard.woff2") format("woff2");
font-display: swap;
}✅ 6. 성능 측정 도구
➕ 6-1. Lighthouse
- Chrome DevTools에 포함된 성능 진단 도구입니다.
- Performance, Accessibility, Best Practices, SEO 등의 점수를 확인할 수 있습니다.
- 단, Lighthouse 점수는 테스트 환경에 따라 달라질 수 있으므로 절대적인 수치로만 판단하면 안 됩니다.
➕ 6-2. PageSpeed Insights
- Google에서 제공하는 웹 성능 측정 도구입니다.
- 실험실 데이터와 실제 사용자 데이터를 함께 확인할 수 있습니다.
- Core Web Vitals 개선 방향을 파악하는 데 유용합니다.
➕ 6-3. Chrome DevTools Performance 탭
- 페이지 로딩, 렌더링, 스크립트 실행 시간을 자세히 분석할 수 있습니다.
- 어떤 JavaScript 작업이 오래 걸리는지, 렌더링 병목이 어디서 발생하는지 확인할 수 있습니다.
➕ 6-4. Network 탭
- 각 리소스의 요청 시간, 응답 시간, 파일 크기, 캐시 여부를 확인할 수 있습니다.
- 이미지가 너무 큰지, API 응답이 느린지, 특정 파일이 캐시되지 않는지 확인할 때 유용합니다.
📌 요약
- 웹 성능 최적화는 사용자 경험, SEO, 광고 효율, 전환율에 직접적인 영향을 주는 중요한 웹 마스터 업무입니다.
- Core Web Vitals의 핵심 지표는 LCP, INP, CLS이며, 각각 로딩 속도, 상호작용 반응성, 레이아웃 안정성을 평가합니다.
- 이미지 최적화, JavaScript 번들 최적화, CSS 정리, API 응답 개선, 폰트 최적화는 실무에서 자주 하는 성능 개선 작업입니다.
- 캐싱 전략은 브라우저 캐싱, CDN 캐싱, 서버 캐싱 등 여러 단계에서 적용할 수 있으며, 서버 부하 감소와 로딩 속도 개선에 효과적입니다.
- 성능 개선은 감으로 하는 것이 아니라 Lighthouse, PageSpeed Insights, Chrome DevTools, Network 탭 등을 활용해 측정하고 개선해야 합니다.
