[프론트엔드 성능 최적화] (1)

이 시리즈(?)는 '웹 개발 스킬을 한 단계 높여 주는 프론트엔드 성능 최적화 가이드(유동균 지음)' 을 읽고 정리해놓은 시리즈 입니다. 참고 부탁드립니다.

성능 최적화는 왜 필요할까?

: 개인적인 경험에서도 인정할 수 밖에 없는 부분인데, 만약에 랜딩 페이지에 들어갈 때 혹은 페이지 이동 시에 페이지 표시 시간이 느리다면 '이탈률'이 높을 수 밖에 없다. 웹 사이트에서 이탈률이 높다는건 예를 들어, 결제 시스템을 제공하는 앱에서 이렇게 지연 시간이 많다하면 결론적으로 결제 포기로 이어진다는 것이고, 그에 따라 수익면에서 손실을 갖게 된다는 말이 된다. 이에 따라 프론트엔드 측면에서 최적화가 제대로 돼야 이러한 손실을 막을 수 있다.

성능 최적화는 어떻게 이루어질까?

: 성능 최적화(혹은 웹 성능)를 결정하는 요소는 크게 로딩 성능과 렌더링 성능으로 분리할 수 있다.

• 로딩 성능 : 번들링한 파일의 사이즈에 따라서 혹은 코드 스플리팅에 따라서 로딩 속도가 다를 것인데 이와 관련된게 로딩 성능이라고 할 수 있다. 위에서 말한대로 로딩에 지연 시간이 있다면 이는 로딩 성능이 좋지 않은 것이다.
• 렌더링 성능 : React로 치면 useMemo 혹은 React.memo 등을 써서 최적화를 하는 목적이 되는 성능이다. 브라우저 렌더링 원리에 입각해 어떻게하면 최소한의 리렌더링으로 렌더링을 하게 할지 등을 고민하는게 렌더링 성능을 고민하는 것과 같다고 할 수 있다.