[ WEB ] 웹프론트엔드에서 앱 성능 최적화 하는 다양한 방법

 

 

 

웹 프론트엔드에서 어플리케이션의 성능을 최적화할 수 있는 방법은 무엇이 있을까?

크게 로딩 성능 최적화와 렌더링 성능 최적화 이렇게 2가지로 나눌 수 있는 것 같다. 

 

 

---

 

 

로딩 성능 최적화

웹프론트에서 로딩 성능을 최적화하는 방법은 다양하다.

우선 리소스 최소화 및 압축을 통한 사이즈 감소(JavaScript, CSS, HTML 파일 압축, 이미지 최적화-크기 조정, 압축, webP사용 등)를 통해 앱의 번들 사이즈를 줄일 수도 있고, 캐싱 전략을 구한하여 불필요한 데이터 추가 요청등을 방지할 수도 있다. 캐싱 전략으로는 브라우저 캐싱 설정을 최적화하거나, 서비스 워커를 이용한 오프라인 캐싱, CDN을 통한 리소스 캐싱등이 여기에 속한다. SSR, SSG 등을 사용하여 클라이언트 측 JavaScript 실행 부하를 감소시켜 초기 로딩시간을 단축시키는 방법도 있다.

 

큰 번들을 작은 청크로 나누어 필요할 때만 로드하도록 코드 분할 및 지연 로딩을 통해 로딩 속도를 개선할수 있다.

예를 들어 JavaScript 파일에 async/defer 속성 사용하여 필요한 코드를 먼저 로딩하거나, Lazy Loading, Dynamic Import, Suspense 등을 이용하여 필요할 때 동적으로 import 하는 방법도 있다. 또한 사용하지 않는 코드나 불필요한 참조등을 제거하여 메모리 사용을 줄이는 방법, 코드를 분할하여(React의 경우는 컴포넌트 분할 등) 작업하는 것도 초기 로딩속도를 줄이는 방법 중 하나이다.  

 

그 외에 preloading 및 prefetch 등을 이용하여 중요한 리소스를 미리 가져오거나, DB query 및, API 응답을 최적화하는 방법, HTTP/2 또는 HTTP/3를 사용하여 다중 요청 처리를 하는 방법도 로딩 성능 향상에 도움이 될 수 있다.

 

 

 

 

 

 

 

렌더링 성능 최적화

 

웹프론트에서 렌더링 성능을 최적화하는 방법은 가상 DOM(VDOM)을 사용하여 실제 DOM조작을 최소화하는 방법이 있으며, 컴포넌트의 렌더링을 최적화하기 위해 메모이제이션을 활용하는 방법도 있다. CSS에서는 will-change 속성을 사용하여, 변경될 속성에 대해 힌트를 제공하여 브라우저가 미리 적절하게 최적화할 수 있다.

 

렌더링 성능을 최적화 하기위해서는 불필요한 리렌더링을 방지해야 하는데, 그러기 위해서는 컴포넌트의 상태관리 최적화 및 컴포넌트 분리를 통한 성능 최적화를 해야 한다. 컴포넌트가 독립적으로 동작하고 서로의 상태에 의존하지 않도록 하는 것도 매우 중요하며, 불필요한 상태는 사용하지 않아야 한다. 불변성을 유지하며 새로운 객체를 생성하는 방식으로 상태를 업데이트하는 것이 좋다. 이렇게 하지 않으면 변경 사항 감지가 어려워서 불필요한 리렌더링이 발생할 수 있다.

 

또한 한번에 화면에 필요한 모든 항목을 렌더링 하지 않고, 현재 뷰 기준으로 보이는 부분만 먼저 렌더링 하게 하는 기술등을 활용하는 것도 효과적이다.