<aside> 📌 프론트엔드 성능 최적화를 위한 아티클 [FE 최적화] 0. 프론트엔드 최적화 관련 개념 정리 및 간단한 적용 [FE 최적화] 1. 페이지 로드 및 웹 성능 최적화 [FE 최적화] 2. React 렌더링 성능 최적화
</aside>
현재까지 진행한 프로젝트를 리팩토링 단계에서 더 좋은 퍼포먼스를 보이기 위해 학습한 과정들을 기록할 예정이에요.
무거워진 웹은 긴 로딩 시간 함께 사용자 경험에 안 좋은 영향을 끼쳐요. 실례로 Pinterest의 경우 긴 로딩 시간으로 인해 사용자가 페이지를 이탈하는 비율이 높았으나 최적화를 통해 이탈률을 줄이고 매출을 40%로 증가시켰다고 해요.
**[프론트엔드 성능 최적화를 위한 아티클]**에서 먼저 필요한 개념과 성능 측정 도구를 알고, 현재 최적화가 거의 진행되지 않은 프로젝트 상태를 측정해볼 것이에요. 이후, 리액트에서의 로드 최적화와 렌더링 최적화를 적용하고나서의 결과와 비교해볼 예정이에요.
프론트엔드의 성능 최적화를 확인하기 위해 먼저 브라우저가 어떻게 화면을 사용자에게 보여주는지 알아야 했어요.
브라우저는 웹 페이지에 필요한 리소스를 내려받고 해석한 다음 여러 계산 과정을 거쳐 콘텐츠를 화면에 보여주어요. 브라우저 로딩 과정 중 스타일 이후의 과정(스타일 -> 레이아웃 -> 페인트 -> 합성)을 렌더링이라고 하는데, 이 렌더링 과정은 상황에 따라 반복하여 발생할 수 있어요.
<aside> 💡 파싱 > 스타일 > 레이아웃(reflow) > 페인트(repaint) > 합성 & 렌더
</aside>
우리 프로젝트에서는 로딩 과정에서의 최적화와 렌더링 과정에서의 최적화를 나누어 아티클을 작성해보려고 해요. 프로젝트를 개선하기 전에 먼저, 어떤 방식으로 최적화할 수 있는지 구체적으로 정리하고 직접 일부를 적용하고 콘솔을 이용해 간단하게 렌더링 성능을 줄여보는 실습을 아래에서 진행해볼게요.