[ WEB ] 웹 프론트엔드 성능 최적화 방법

 

 

 

웹 프론트엔드 개발에서는 사용자 경험을 극대화하기 위해 성능 최적화가 꼭 필요하다고 생각한다. 

서비스를 사용할 때, 느린 로딩 속도와 성능이 저하되는 불필요한 자원 낭비는 사용자로 하여금 좋지 않은 경험을 남기고, 이런 경험은 사용자로 하여금 서비스를 이탈하게끔 만드는 주요 원인이라고 생각한다. 이번 포스팅에서는 웹 프론트엔드 성능 최적화에 대해 간단히 알아보려고 한다.

 

 

 

---

 

 

 

1. 초기 로딩 최적화

코드 분할 (Code Splitting): 애플리케이션의 코드베이스를 여러 청크로 나누어 필요한 부분만 로드한다. Webpack, Rollup 등의 번들러에서 dynamic import를 활용하여 필요한 부분에서만 파일을 사용하여 효율성을 높일 수 있다.

 

Lazy Loading: 이미지나 비디오 같은 리소스를 필요할 때 로드한다. 필요하지 않은 페이지에서는 로드되지 않으며, `loading="lazy"` 속성을 사용하거나 Intersection Observer API를 활용해 사용자가 해당 뷰포트로 이동(포커싱)하기 전까지 불필요한 리소스 로드를 줄인다.

 

Tree Shaking: 사용되지 않는 코드를 제거하여 번들 크기를 줄인다. ES6 모듈을 사용하고 번들러 설정에서 tree shaking을 활성화하여 사용하지 않는 코드는 번들에 포함시키지 않도록 하여 번들 파일의 사이즈를 효율적으로 줄일 수 있다.

 

 

2. 런타임 성능 최적화

DOM 조작 최소화: DOM 업데이트는 브라우저 성능에 영향을 미치므로 최소화가 중요하다. Virtual DOM을 사용하는 React 등 라이브러리를 활용하거나 DOM 변경을 batch로 묶어서 처리하여 DOM조작을 최소화 하는 전략을 통해 DOM업데이트로 인한 성능저하를 방지해야한다.

 

Debounce와 Throttle 사용: 사용자 입력 이벤트(스크롤, 입력 등)의 과도한 호출을 제한한다. Debounce는 다중 이벤트가 감지될 때 마지막 이벤트를 1회만 보내는 것이고, Throttle은 일정 기간(시간)안에 이벤트를 감지하여 뭉쳐서 보내는 기술이다. 이를 통해 성능 저하를 방지할 수 있다

 

 

 

3. 네트워크 최적화

리소스 압축: Gzip이나 Brotli를 사용하여 전달되는 파일의 크기를 줄인다. 서버에서 압축 설정을 활성화해야 한다.

CDN(Content Delivery Network) 사용: 전 세계적으로 분산된 서버를 통해 사용자와 가까운 서버에서 리소스를 제공한다.

HTTP/2와 HTTP/3 사용: 다중 요청을 하나의 연결에서 처리하여 네트워크 병목을 줄인다.

 

 

 

4. 이미지 최적화

이미지 포맷 최적화: WebP, AVIF와 같은 최신 이미지 포맷을 사용하고 이미지 최적화 도구를 활용해 용량을 줄인다.

Responsive Images 사용: 사용자 디바이스에 적합한 크기의 이미지를 제공한다. srcset과 sizes 속성을 활용하여 다양한 화면 크기에 대응한다.

5. 로딩 속도 측정과 모니터링

Lighthouse: Chrome DevTools에서 성능 점수를 측정하고 개선해야할 부분에 대한 방향을 확인한다.

Web Vitals: 사용자 경험 지표(LCP, FID, CLS)를 분석하고 Google Analytics 또는 Web Vitals 라이브러리등을 활용하여 성능을 최적화한다.

Real User Monitoring(RUM): 실제 사용자의 데이터를 수집하여 문제를 파악하고 그에 맞춰 성능을 최적화한다. Datadog, New Relic과 같은 도구를 사용할 수 있다.

 

 

 

---

결론

웹 프론트엔드 성능 최적화는 사용자 경험을 개선하고, 비즈니스 성과를 높이는 중요한 작업이다. 위에서 소개한 방법들을 하나씩 적용해 보고 실제 속도 측정 및 모니터링등을 통해 각각의 서비스에 맞는 효율적이고 빠른 웹 서비스를 고민해보면 좋을 것 같다.