성능최적화가 필요한 이유

성능이 저하되면 사용자가 떠나고 매출이 감소한다.

 

페이지 표시 시간에 따른 이탈률

페이지 표시 시간	사용자 이탈률
1초 -> 3초	32% 증가
1초 -> 5초	90% 증가
1초 -> 6초	106% 증가
1초 -> 10초	123% 증가

 

이 통계는 사용자들이 웹 서비스의 성능에 얼마나 민감한지를 수치적으로 보여주고 있다.

성능 최적화를 통해 빠르고 안정적인 서비스를 제공하면 사용자 만족도가 높아지고, 이는 가입률과 전환률 증가, 이탈률 감소로 이어져 결국 더 많은 수익 창출에 기여할 수 있다.

 

성능 최적화는 어떻게 이루어지는 것일까?

웹 성능을 결정하는 요소는 2가지

1. 로딩 성능

서버에 있는 HTML, CSS 등 웹페이지에 필요한 리소스를 다운로드 할 때의 성능

 

✅ 로딩 성능 개선방법

👉 다운로드 해야할 리소스 수를 줄이거나 크기를 줄인다.

👉 코드 분할하여 다운로드 하거나 리소스의 우선순위를 매겨 중요한 것 부터 먼저 다운로드 한다.

2. 렌더링 성능

다운로드한 리소스를 가지고 화면을 그릴 때의 성능 (JS코드가 크게 영향을 준다)

코드를 얼마나 효율적으로 작성 했느냐에 따라 화면 그려지는 속도와 사용자 인터랙션의 자연스러운 정도가 달라진다.

✅ 렌더링 성능 개선방법

다양한 방법이 존재하지만 그 중

👉 자신의 서비스에 필요한 최적화 기법을 찾아서 적용한다.

👉 브라우저 동작 원리, 사용하는 프레임워크, 라이프사이클 등 웹 개발 기본 지식을 습득한다.

 

🚀 성능 최적화 할 수 있는 다양한 분석 기법 🚀

1️⃣ 개발자도구의 Performance, Lighthouse, Network, Coverage 패널 이용한 분석

• 브라우저 개발자 도구를 활용해 페이지 로딩 성능, 불필요한 리소스 사용 여부, 코드 커버리지 등을 분석
• 💡 Performance → 성능 프로파일 분석, Network → 요청 최적화, Lighthouse → 종합적인 성능 평가

2️⃣ webpack-bundle-analyzer를 이용한 번들 파일 분석

• 웹팩 번들 크기를 시각적으로 분석하여, 불필요한 패키지 포함 여부 및 코드 스플리팅 필요성을 파악

3️⃣ 코드 분할과 컴포넌트 지연로딩 (Lazy Loading) / 사전 로딩 (Preloading) 분석

• 코드 분할이 잘 적용되었는지, 지연 로딩이 정상적으로 동작하는지 개발자 도구 Network 패널에서 확인

4️⃣ 텍스트 압축 기법 분석 (Gzip, Brotli 등 적용 여부 확인)

• 개발자 도구 Network 패널에서 압축된 응답 크기(Content-Encoding) 확인

5️⃣ 병목 코드 분석과 최적화 (CPU 및 메모리 프로파일링)

• 개발자 도구 Performance 패널에서 특정 함수가 실행되는 시간과 빈도를 분석하여 성능 저하 요소 파악

6️⃣ 브라우저 렌더링 과정 분석 (Paint, Layout, Compositing 확인)

• 개발자 도구 Rendering 패널에서 Layout Shift, Paint, Compositing 과정을 분석하여 성능 이슈 해결

7️⃣ CSS 애니메이션 최적화 분석 (GPU 가속 여부 확인)

• 개발자 도구 Layers 패널을 활용하여 CSS 애니메이션이 GPU 가속을 활용하는지 확인

8️⃣ 이미지 CDN을 통한 이미지 사이즈 최적화 분석

• 이미지 로딩 시간을 Network 패널에서 분석하고, 적절한 CDN 사용 여부 및 압축 상태 확인

9️⃣ 이미지 사전 로딩 / 지연 로딩 분석 (Lazy Load 적용 여부 확인)

• loading="lazy" 속성이 적용되었는지, Network 패널에서 이미지 로딩 시점을 확인

🔟 이미지 / 동영상 포맷 종류 분석 (WebP, AVIF 사용 여부 확인)

• Network 패널에서 이미지 확장자를 확인하고, 최신 압축 포맷(WebP, AVIF 등) 사용 여부 점검

1️⃣1️⃣ 폰트 최적화 분석 (FOIT, FOUT 발생 여부 확인)

• 개발자 도구에서 Web Font 로딩을 분석하고, font-display: swap 적용 여부 확인

1️⃣2️⃣ 캐시 최적화 분석 (Cache-Control 및 ETag 설정 확인)

• 개발자 도구 Network 패널에서 캐시 관련 응답 헤더(Cache-Control, ETag) 확인

1️⃣3️⃣ 불필요한 CSS 제거 분석 (Unused CSS 확인)

• Coverage 패널을 활용하여 사용되지 않는 CSS 코드를 분석하고 최적화

1️⃣4️⃣ React Developer Tools 활용한 렌더링 분석

• React 컴포넌트의 불필요한 리렌더링을 확인하고, useMemo, useCallback 적용 여부 분석

1️⃣5️⃣ React 라이프사이클 분석 (불필요한 리렌더링 감지)

• React Developer Tools의 Components 패널에서 상태 변화 및 리렌더링 최적화 여부 확인

1️⃣6️⃣ 레이아웃 이동(Layout Shift) 분석 (CLS 확인)

• 개발자 도구 Performance 패널과 Lighthouse를 통해 Cumulative Layout Shift(CLS) 점수 분석

1️⃣7️⃣ Redux의 useSelector 렌더링 최적화 분석

• React Developer Tools와 console.log를 활용해 useSelector가 불필요하게 렌더링되는지 확인

1️⃣8️⃣ 메모이제이션의 개념 & 활용한 최적화 분석 (useMemo, useCallback 적용 여부 확인)

• 개발자 도구 Performance 패널에서 리렌더링 빈도를 분석하고, 메모이제이션 적용 여부 확인

1️⃣9️⃣ 병목 함수 로직 개선을 위한 프로파일링 (CPU & Memory Profiling)

• 개발자 도구의 Performance, Memory 패널을 활용해 불필요한 메모리 누수 및 연산량 분석